node download https://nodejs.org/zh-cn/ 全局安装 npm install @angular/cli -g 指定版本 npm install @angular/cli@8.3.29 -g angular-cli versions https://www.npmjs.com/package/@angular/cli 检查安装版本 ng version 创建项目 ng new app-name 工程目录 ┌─ e2e ├─ src ├─ angular.json │ (Angular 应用程的配置文件) │ ├─ karma.conf.js │ (karmar 单元测试配置文件) │ ├─ package.json │ (npm包管理及项目命令配置文件) │ ├─ tsconfig.app.json │ (TypeScript 配置文件, 在 angular.json 中 architect/build/options/tsConfig) │ ├─ tsconfig.json │ (TypeScript 配置文件) │ │ tsconfig.json 和 tsconfig.app.json 的区别: │ 1. tsconfig.app.json 继承自 tsconfig.json │ 2. tsconfig 中配置的是 TypeScript 的基本配置 │ - 保存时编译 │ - 指定ES版本等 │ - ··· │ 3. tsconfig.app 中配置的是和项目有关的 │ - files 指定一些ts文件 │ - include/exclude 包含/排除一些文件 │ - ··· │ (具体配置信息参见: https://www.tslang.cn/docs/handbook/tsconfig-json.html) │ └─ tslint.json (TypeScript 代码约束配置文件) src 目录 ┌─ app │ (应用程序内容目录) │ ├─ assets │ (静态资源目录, 在 angular.json 中 architect/build/options/assets) │ ├─ environments │ (环境变量目录, 在 angular.json 中 architect/build/configurations) │ │ 在不同环境编译时指定 configuration 可以编译成不同的配置文件, 例如: │ - environments │ - environment.prod.ts -- 正式 │ ———————————————————————————————— │ - angular.json/.../architect/build/configurations │ "production": { │ "fileReplacements": [ │ { │ "replace": "src/environments/environment.ts", │ with: "src/environments/environment.prod.ts" │ } │ ] │ } │ ———————————————————————————————— │ - package.json/scripts │ "build-prod": "ng build --configuration=production" │ ———————————————————————————————— │ - npm run build-prod │ ├─ index.html │ (Angular 应用入口页面, 在 angular.json 中 architect/build/options/index) │ ├─ main.ts │ (Angular 应用启动入口, 在 angular.json 中 architect/build/options/main) │ ├─ polyfills.ts │ (腻子脚本, 兼容低版本浏览器, 在 angular.json 中 architect/build/options/polyfills) │ ├─ style.scss │ (全局样式, 在 angular.json 中 architect/build/options/styles) │ └─ test.ts (单元测试, 在 angular.json 中 architect/test/options/main) app 目录 ┌─ app.module.ts │ (根模块, 在 main.ts 中, platformBrowserDynamic().bootstrapModule(AppModule)) │ 在一个Angular应用中只能有一个根模块, 并且在 main.ts 中创建 │ ├─ app.component.ts │ (根组件, 在根模块中声明) │ └─ app-routing.module.ts (根路由, 在 app.module 中引入)