版权声明：本文为博主原创文章，转载请注明原文链接。 https://blog.csdn.net/crf_moonlight/article/details/81978367
环境
- os : windows 10.0.16299 x64
- nodejs : 9.4.0
- npm : 6.4.0
使用CLI创建项目
1. 更新npm至最新版本
执行
npm install -g npm@latest来将npm更新到最新版本，以防止在使用angularCli新建项目时报漏洞错误
2. 安装angular cli
执行
npm install -g @angular/cli3. 使用Cli创建新项目
执行
ng new my-app第一次大概会运行半小时时间，成功的话文件夹my-app中会包含诸多依赖项，文件大小达到200M+
注意：
1. 路径中有中文可能会导致安装错误
2. 可能会提示npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump，即推荐使用旧版本的istanbul(代码覆盖率测试工具)，暂时不用管它
3. 在ng安装集成的node-sass时，可能会因网络超时，本应该直接下载针对windows的二进制包，但使用源码进行编译，从而产生python2有关的错误(比如安装了python3而没有python2)
项目创建最后一条输出是
Successfully initialized git.要修复安装依赖方面的漏洞，可能需要执行
cd my-app
npm install --save-dev node-sass
npm audit fix
npm install --save-dev karma@3.0.0之后就可以运行开发服务器了
ng serve编译完成后，在浏览器中通过http:\\localhost:4200\打开页面如下
4. 项目结构
.\src 源代码目录
该目录包含web应用代码，包含Angular组件、模板、样式、图片等等应用需要的所有内容。在此文件夹外的是用于构建应用的文件
| 文件 | 目的 |
|---|---|
| app/app.component.{ts,html,css,spec.ts} | 定义组件“AppComponent”及其模板、样式、单元测试。它将成为嵌套的组件树的根组件 |
| app/app.module.ts | 定义根模块“AppModule”，告诉Angular如何组装应用程序。它目前只声明了“AppComponent” |
| assets/* | 用于存放要在构建时复制的资源文件（如图片） |
| environment/* | 此文件夹为每个目标环境包含一个文件，用于导出在应用程序中使用的简单配置变量。在构建程序是文件会被替换。可以使用与生产环境不同的API端点进行开发，也可以使用不同的令牌，甚至一些模拟服务 |
| browserlist | 在不同的前段工具中共享目标浏览器 |
| favicon.ico | 网站图标 |
| index.html | 主要HTML页面， 大部分情况下不需要修改，CLI会在构建时自动将js和css文件添加进去 |
| karma.conf.js | 单元测试配置文件 |
| main.ts | 程序入口点。使用JIT编译，并引导根模块在浏览器中运行 |
| polyfills.ts | 不同的浏览器对web标准的支持程度不同，Pollyfills用于规范这些差异。使用core-js和zone.js应该非常安全，但请务必查看浏览器支持指南来获取更多信息 |
| styles.css | 用于存放全局样式 |
| test.ts | 单元测试的主要入口点，配置可能会很陌生，但大多数情况下不需要修改 |
| tsconfig.{app | spec}.json |
| tslint.json | TSLint的附加配置和用于运行ng lint时使用的Codelyzer |
根目录
src/目录外的文件用于帮助构建、测试、维护、文档和部署应用
| 文件 | 目的 |
|---|---|
| e2e/ | 端对端测试，这是另外的应用，所以不存放到src/中，这也是有独立的tsconfig.e2e.json的原因 |
| node_modules | package.json中列出的第三方包 |
| .editorconfig | 编辑器配置文件，以确保使用项目的每个人都具有相同的基本配置 |
| .gitignore | 略 |
| angular.json | CLI的配置。在此文件中可以设置多个默认值，还可以配置构建项目时包含的文件 |
| package.json | npm包列表 |
| protractor.conf.js | 运行ng e2e时使用的Protractor配置 |
| README.md | 项目的基本文档，预填写了一些基本的CLI命令 |
| tsconfig.json | 略 |
| tslint.json | 略 |
上述完整结构几乎包含了合作开发所需的所有东西，比如共用的编辑器设置、单元测试等等配置文件
通过git创建基本项目
git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q
npm install
npm start然而这个quickstart项目已经一年多没更新了……结构和上面的删掉一部分还是不同的
(npm start在windows秋季创意者更新前的版本会失败）