版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sunxiaoju/article/details/84652575
1、要安装CLI命令必须首先安装Nodejs和npm包，npm包在装好nodejs后自带的。
2、首先创建一个目录，用来创建Angular项目，如下图所示：
3、打开dos窗口，然后进入到此目录中，如下图所示：
4、安装 Angular CLI，使用：npm install -g @angular/cli 命令全局安装 Angular CLI，如下图所示：
5、安装完之后如果没有错误，说明cli命令安装成功，如下图所示：
6、安装好之后还要加入环境变量，否则无法识别ng命令，全局安装的路径为：C:\Users\Administrator\AppData\Roaming\npm，然后将此目录添加到path中，如下图所示：
8、打开dos窗口，然后输入：ng --version查看版本号，如果没有出现错误，说明cli命令配置成功，如下图所示：
9、然后输入ng new my-app命令来创建项目，如下图所示：
10、如果创建成功，就会出现Successfully，如下图所示：
11、创建好的目录结构如下图所示：
12、进入到my-app目录，然后输入ng serve --open或者npm start，用来启动服务，在启动之前会先编译模块，如下图所示：
13、编译完成之后就是启动web服务了，如下图所示：
14、启动之后会自动打开浏览器，然后显示出页面信息，如下图所示：
15、生成的文件目录为：
16、angular.json：使用ng命令时所使用的文件，当使用ng serve --open命令时，ng命令就会去读取该文件，内容如下：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",//JSON Schema 是一个允许我们注解和验证JSON数据格式的工具。Angular CLI使用它来强化对于Angular Workspace schema的解释说明，有了此说明，在书写json时会自动提示并且有校验正确性功能。
"version": 1,//指明了Angular 工作空间 概要的版本。
"newProjectRoot": "projects",//这个属性定义了由CLI创建的新的内部应用和库放置的位置。默认值为：projects
"projects": {//这个属性包含了工作空间中所有项目的配置信息。
"my-app": {
"root": "",//指定了项目文件的根文件夹，可能为空，但是它指定了一个特定的文件夹。
"sourceRoot": "src",//指定了项目源文件位置,就是当前文件所在目录下的src目录
"projectType": "application",//表明了 项目的状态 是 `appliaction`还是`library`。
"prefix": "app",//当CLI创建 自动为selector元数据的值添加的前缀名。
"schematics": {},//属性配置 `Schematics packages`。
"architect": {//任何项目都可以自定义 自动化命令，如 打包、serve、test、lint等等。这些都是基于prebuilt builders ，叫做Architect Targets。
"build": {
"builder": "@angular-devkit/build-angular:browser",//
"options": {//使用ng builid所需要的配置项
"outputPath": "dist/my-app",// 编译后的输出目录
"index": "src/index.html",//主页文件
"main": "src/main.ts",//程序入口文件
"polyfills": "src/polyfills.ts",// 指定polyfill文件
"tsConfig": "src/tsconfig.app.json",//指定tsconfig文件
"assets": [//记录资源文件夹，构建时复制到`outDir`指定的目录
"src/favicon.ico",
"src/assets"
],
"styles": [//引入全局样式，构建时会打包进来，常用于第三方库引入的样式
"src/styles.css"
],
"scripts": []// 引入全局脚本，构建时会打包进来，常用语第三方库引入的脚本
},
"configurations": {//build配置环境文件
"production": {//设置编译目录
"fileReplacements": [//决定使用哪个环境文件
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,//使用ng build时，相当于在命令行中使用ng build --optimization
"outputHashing": "all",//使用ng build时，相当于在命令行中使用ng build --outputHashing
"sourceMap": false,//使用ng build时，相当于在命令行中不使用ng build --sourceMap
"extractCss": true,//使用ng build时，相当于在命令行中使用ng build --extractCss
"namedChunks": false,//使用ng build时，相当于在命令行中不使用ng build --namedChunks
"aot": true,//使用ng build时，相当于在命令行中使用ng build --aot
"extractLicenses": true,//使用ng build时，相当于在命令行中使用ng build --extractLicenses
"vendorChunk": false,//使用ng build时，相当于在命令行中不使用ng build --vendorChunk
"buildOptimizer": true,//使用ng build时，相当于在命令行中使用ng build --build--optimizer
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",//
"options": {//当使用ng serve命令时，会读取配置项
"browserTarget": "my-app:build"//然后就会去执行my-app:build的配置
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production"//然后环境文件使用builid中的production
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"my-app-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "my-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "my-app:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "my-app"//当使用CLI命令时，`defaultProject`代表显示的名字。
}17、package.json：使用npm命令时所使用的文件，npm命令就会去读取该文件，内容如下：
{
"name": "my-app",//项目名称
"version": "0.0.0",//版本号
"scripts": {//定义npm选项，如：npm ng，npm start,npm build,npm test,npm lint,npm e2e
"ng": "ng",//npm ng相当于执行ng命令
"start": "ng serve",//npm start 相当于执行ng serve命令
"build": "ng build",//npm start 相当于执行ng build命令
"test": "ng test",//npm start 相当于执行ng test
"lint": "ng lint",//npm start 相当于执行ng lint命令
"e2e": "ng e2e"//npm start 相当于执行ng e2e命令
},
"private": true,//如果你在包的package.json中设置"private": true，则npm会拒绝发布它。
"dependencies": {//开发时所依赖的包，如果别人只是使用或下载你的npm包，就不需要安装这里面的,包含了npm包名字与版本范围(version range)的映射。版本范围是一个字符串,包含了一个或多个描述符。dependencies同样可以用一个tarball或git url来定义。
/*
>version 版本号必须比version大
>=version 大于等于
<version 小于
<=version 小于等于
~version "近似等价于version"
^version "与version相兼容"
*/
"@angular/animations": "~7.1.0",//@angular/animations属于包名，~7.1.0属于包的版本号
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {//开发时所依赖的包，如果别人只是使用或下载你的npm包，就不需要安装这里面的,测试和编译代码所需要的包
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "~7.1.0",
"@angular/compiler-cli": "~7.1.0",
"@angular/language-service": "~7.1.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}
18、tsconfig.json：
{
"compileOnSave": false,//在最顶层设置compileOnSave标记，可以让IDE在保存文件的时候根据tsconfig.json重新生成文件。
"compilerOptions": {//配置编译默认属性
"baseUrl": "./",//解析非相对模块名的基准目录
"outDir": "./dist/out-tsc",//输出目录
"sourceMap": true,//debug把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
"declaration": false,//是否生成相应的.d.ts文件。
"module": "es2015",//指定module 的版本，'none', 'commonjs', 'amd', 'system', 'umd', 'ES6', or 'es2015'
//只有 ‘amd' 和 'system’ 可以和 outFile 属性一起用
//当target 属性是 ES5或者更低版本的时候，'ES6'和'es2015' 这两个值可能不能生效，
"moduleResolution": "node",//模块的解析
"emitDecoratorMetadata": true,//给源码里的装饰器声明加上设计类型元数据
"experimentalDecorators": true,//启用实验性的ES装饰器。
"importHelpers": true,
"target": "es5",//编译目标平台（es3, es5, es2015）
"typeRoots": [//如果指定了typeRoots，只有typeRoots下面的包才会被包含进来
"node_modules/@types"//node_modules/@types文件夹下以及它们子文件夹下的所有包都是可见的
],
"lib": [ //编译过程中需要引入的库文件的列表
"es2018",
"dom"
]
}
}
19、src/tsconfig.app.json文件：
{
"extends": "../tsconfig.json",//从tsconfig.json文件继承过来
"compilerOptions": {
"outDir": "../out-tsc/app",//将tsconfig.json文件中的属性覆盖掉，然后使用此文件的属性
"types": []//如果指定了types，只有被列出来的包才会被包含进来
},
"exclude": [//不包含的编译目录
"test.ts",
"**/*.spec.ts"
]
}
20、执行顺序，当在命令行中输入npm start（会自动执行ng serve）或ng serve时，就会去找angular.json文件中"projects"->"my-app"->"architect"->"serve"，而在serve中又有"options"->"browserTarget":"my-app:build",则表明在此执行"projects"->"my-app"->"architect"->"build",然后在build中的options选项中设置了入口文件、主页文件、静态文件及目录、样式文件和使用TypeScript编译的配置文件（tsconfig.app.json）而tsconfig.app.json文件又继承与tsconfig.json文件，所以使用TypeScript编译后就可以执行，那么执行就是main.ts文件入口。
21、main.ts文件：
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {//是否启用enableProdMode模式
enableProdMode();
}
//动态引导，引导AppModule来启动应用程序platformBrowserDynamic().bootstrapModule相当于main函数，而AppModule是参数，
//此种方式是通过浏览器端编译
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
22、在装载AppModule时，会去找/app/app.module.ts装载，如下代码：
import { BrowserModule } from '@angular/platform-browser';//导入BrowserModule,导入 BrowserModule 是因为它提供了启动和运行浏览器应用的那些基本的服务提供商.
import { NgModule } from '@angular/core';//导入NgModule,NgModule是我们组织Angular应用所必须的
import { AppComponent } from './app.component';//导入AppComponent,AppComponent是我们要展现的一个最基本的组件
@NgModule({//我们在 @NgModule 的元数据中配置我们导入的模块,因为我们需要依赖 BrowserModule 所以我们在 imports 中添加了它,然后我们又在 declarations 和 bootstrap 选项中添加了 AppComponent 组件.
declarations: [
AppComponent//在 declarations添加了 AppComponent 组件
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]//bootstrap选项中添加了 AppComponent 组件
})
export class AppModule { }23、在/app/app.module.ts中加载了一个AppComponent组件，是从app/app.component.ts中导入的，如下代码:
import { Component } from '@angular/core';
@Component({//使用@Component装饰器来定义一个AppComponent组件，Component组件是创建用户界面的主要组件
selector: 'app-root',//组件标签，定义之后就可以在html文件中使用<app-root></app-root>直接使用该组件了
templateUrl: './app.component.html',//组件所使用的模板,即app.component.html文件,UI相关
styleUrls: ['./app.component.css']//组件所使用的样式,即app.component.css文件,UI相关
})
export class AppComponent {
title = 'my-app';//标题
}
24、首先查看app.component.html文件，文件内容如下，其中Welcome to {{ title }}!中的{{ title }}就是显示在AppComponent中的title值，由代码可以看出值为my-app，那么在浏览器中就会显示Welcome to my-app，请看第14步截图。
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>25、在定义好app-root标签后，就可以在主页index.html使用，如下代码所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
26、这就相当于将app.component.html内容填充到了index.html文件中的body标签中，然后在浏览器中显示
此例是根据：https://www.angular.cn/guide/quickstart来做的。