angular2.0 笔记 - 02

tain335 发布于2019-08-23 16:49 / 2044人阅读

摘要：此属性包含了本项目中所有的子项目的配置信息。稍后多带带拿这个属性详细讲解其注意点。

angular2.0 笔记 1.angular-cli 之 angular.json 配置表参数说明

简单创建一个demo项目

ng new project-demo

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {},
        "lint": {}
      }
    },
    "project-name-test": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {},
        "lint": {}
      }
    }
  },
  "defaultProject": "project-demo"
}

上面的json是一个删除了部分内容的angular.json仅用于讲解使用，后面会给出完整json

参数	作用
$schema	关联了JSON Schema在angular CLI 的执行config.json文件
version	项目版本
newProjectRoot	这个属性定义了CLI创建的新的内部应用和库放置的位置，默认值为"projects"
projects	这个属性，个人觉得有必要认真讲一下。此属性包含了本项目中所有的子项目的配置信息。稍后多带带拿这个属性详细讲解其注意点。
defaultProject	属性表示该项目的名字

2.projects 下一级属性名是子项目的名称

子项目名称的作用，可以用于ng 命令执行
比如上面的json有一个子项目名字 project-name-test

如果想多带带运行某个子项目时，可以执行
ng serve project-name-test

如果子项目不在projects内，执行 ng serve [project-name] 就会包一个错
The serve command requires to be run in an Angular project, but a project definition could not be found.

创建一个子项目，可以执行
ng generate application project-name

而且，每创建一个子项目，都会有一个[project-name]-e2e的子项目在projects里面

3.projects 子项目里面的属性说明

属性	作用
root	指定了子项目文件的根文件夹，可能是空值
sourceRoot	子项目源文件目录位置
projectType	子项目类型， application 或 library
prefix	创建子项目时，用这个属性来区分当前子项目是 component、directive、lib,或其他,当cli创建时会确定
schematics	Schematics packages 配置(本人暂时还不知道其具体作用)
architect	此属性包含了项目的一些命令，比如 build/serve/test/lint 或者自定义命令 extract-i18n

以上部分属性内容参考自Alfred的 angular.json参数详解

项目例子 json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/project-demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "project-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-demo: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/**"
            ]
          }
        }
      }
    },
    "project-demo-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "project-demo:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project-demo:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "project-demo-two": {
      "root": "projects/project-demo-two/",
      "sourceRoot": "projects/project-demo-two/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/project-demo-two",
            "index": "projects/project-demo-two/src/index.html",
            "main": "projects/project-demo-two/src/main.ts",
            "polyfills": "projects/project-demo-two/src/polyfills.ts",
            "tsConfig": "projects/project-demo-two/tsconfig.app.json",
            "assets": [
              "projects/project-demo-two/src/favicon.ico",
              "projects/project-demo-two/src/assets"
            ],
            "styles": [
              "projects/project-demo-two/src/styles.css"
            ],
            "scripts": [],
            "es5BrowserSupport": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/project-demo-two/src/environments/environment.ts",
                  "with": "projects/project-demo-two/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "project-demo-two:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "project-demo-two:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "project-demo-two:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/project-demo-two/src/test.ts",
            "polyfills": "projects/project-demo-two/src/polyfills.ts",
            "tsConfig": "projects/project-demo-two/tsconfig.spec.json",
            "karmaConfig": "projects/project-demo-two/karma.conf.js",
            "styles": [
              "projects/project-demo-two/src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "projects/project-demo-two/src/favicon.ico",
              "projects/project-demo-two/src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/project-demo-two/tsconfig.app.json",
              "projects/project-demo-two/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "project-demo-two-e2e": {
      "root": "projects/project-demo-two-e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "projects/project-demo-two-e2e/protractor.conf.js",
            "devServerTarget": "project-demo-two:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project-demo-two:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "projects/project-demo-two-e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "project-demo"
}

GPU云服务器云服务器 02vps python 02 v02 Item02

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103355.html

angular2.0 笔记 - 01

angular2.0 学习笔记 ### 1.angular-cli 常用命令记录详细教程 angular cli官网有，这里不详细说明,感兴趣的可以自行到官网看，一下仅记录本人到学习过程常用到的命令 1.创建项目 ng new ng new project-name exp: ng new my-app 2.启动项目 ng serve 参数名类型默认值作用 exp ...

AnthonyHan 2019-08-23 16:48 评论0 收藏0
GridManager 开源历程

摘要：历程启动于年月日不曾想这一坚持已经多天了。每个午饭后晚饭前。期间对的认知与实践提升明显，并沉淀下名为的类库。每次发布前的，成为一种风险把控。在此之前从没有如此的认同单元测试，也相信这终将会成为一种大家都遵守的契约。 GridManager历程 GridManager 启动于2015年02月10日, 不曾想这一坚持已经1200多天了。总想为此记录些什么，但一直未曾动手。午饭后，公司很安静...

honhon 2019-08-22 18:48 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

chengjianhua 2019-08-29 12:35 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

Anonymous1 2019-08-20 16:31 评论0 收藏0