【2019-10-16】创建工作空间、应用,库时,自动生成的文件结构

创建工作空间、应用,库时,自动生成的文件结构


1、创建工作空间

Step1:命令:ng new my-workspace --createApplication="false"

每个工作空间中的所有项目共享一个CLI配置环境,该工作空间的顶层包含着全工作空间级的配置文件

Step2:生产的文件项有:

node_modules

.editorconfig

.gitignore

angular.json

package-lock.json //提供npm客户端安装到node_modules的所有软件包的版本信息

package.json //配置工作空间中所有项目可用的npm包依赖

README.md

tsconfig.json // 工作空间中各个项目的默认TypeScript 配置 ,如果每个项目的此配置文件不同,可删除这里的文件,单独在项目中进行配置

tslint.json // 工作空间中各个项目的默认TSLint 配置,如果每个项目的此配置文件不同,可删除这里的文件,单独在项目中进行配置


2、创建应用

Case1 : 创建工作空间的同时创建应用

Step1:命令:ng new my-app // 在创建工作空间的同时,并在src文件夹下为工作空间顶层的根应用生成一个新的应用骨架。新生成的应用包含一个根模块的源文件,包括一个根组件及其模板

Step2:生产的文件项有:

e2e //组针对根应用的端到端测试的源文件,以及测试专属的配置文件。

node_modules

src
--app //包含定义应用逻辑和数据的组件文件
-- app-routing.module.ts
-- app.component.html
-- app.component.scss
-- app.component.ts //为应用的根组件定义逻辑,名为 AppComponent
-- app.component.spec.ts //为根组件 AppComponent 定义了一个单元测试。
-- app.module.ts //定义了名为 AppModule 的根模块,它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时,它们也必须在这里声明。
--assets //包含要在构建应用时应该按原样复制的图像和其它静态资源文件。

--environments //包含特定目标环境的构建配置选项。默认情况下,有一个无名的标准开发环境和一个生产(“prod”)环境。你还可以定义其它的目标环境配置。
-- environment.prod.ts
-- environment.ts

--favicon.ico //用作该应用在标签栏中的图标。

--index.html //当有人访问你的站点时,提供服务的主要HTML页面。CLI会在构建你的应用时自动添加所有的JavaScript和CSS文件,所以你通常不用手动添加任何<script> 或 <link> 标签。

--main.ts //应用的切入点,用JIT编译器编译应用时,然后引导应用的根模块在浏览器中运行,你也可以在不改变任何代码的情况下改用AOT编译器,只要在CLI的build和serve命令中加上--aot标志就可以了。

--polyfills.ts // Provides polyfill scripts for browser support.
--styles.scss // 列出为项目提供样式的 CSS 文件。该扩展还反映了你为该项目配置的样式预处理器。
--test.ts //单元测试的主入口点,带有一些Angular特有的配置。你通常不需要编辑这个文件。

.editorconfig

.gitignore

angular.json

browserslist //配置各种前端工具之间共享的目标浏览器和 Node.js 版本。

karma.conf.js

package-lock.json

package.json

README.md

tsconfig.app.json // 应用专属的 TypeScript 配置,包括 TypeScript 和 Angular 模板编译器的选项

tsconfig.json

tsconfig.spec.json //应用测试的 TypeScript 配置

tslint.json //应用专属的 TSLint 配置。


Case2: 单独创建应用

Step1: 命令: ng generate application my-app // 需要进入一个已有的工作空间,才可以使用该命令

//会在顶层创建一个projects目录,目录下创建my-app应用

Step2: projects/my-app下的文件项有:

e2e

src // is same as src in the Case1

browserslist

karma.conf.js

tsconfig.app.json

tsconfig.spec.json

tslint.json

3、创建库

Step1:命令:ng generate library my-library // 需要进入一个已有的工作空间,才可以使用该命令

//若顶层不存在projects目录,则会自动创建一个projects目录,目录下创建my-library库

Step2: projects/my-library下的文件项有:

src
--lib // 包含库项目的逻辑和数据像应用项目一样,库项目也可以包含组件,服务,模块,指令和管道
-- my-library.component.spec.ts
-- my-library.component.ts
-- my-library.module.ts
-- my-library.service.spec.ts
-- my-library.service.ts
--public-api.ts // 指定从库中导出的所有文件

--test.ts //单元测试的主要入口点是一些库专属的配置。你通常不用编辑这个文件。

karma.conf.js // 库专属的 Karma 配置。

ng-package.json // 构建库时,ng-packagr 用到的配置文件。

package.json //配置这个库所需的 npm 包依赖。

README.md

tsconfig.lib.json //库专属的 TypeScript 配置,包括 TypeScript 和 Angular 模板编译器选项。

tsconfig.spec.json //测试库时用到的 TypeScript 配置

tslint.json

 

 

 

原文地址:https://www.cnblogs.com/QQ-lala/p/11687333.html