Angular6 angular-cli的命令和配置

Angular6 angular-cli的命令和配置

1. 常用命令

ng new project-name 创建一个新的项目;

ng generate (class | directive | pipe | service | component | interface | enum | module) 创建类，指令， 管道， 组件， 接口， 泛型， 模块

ng serve 启动应用 后面可以添加其他参数 比如–host 自定义ip; --open
启动后自动在浏览器上打开 --port 可以指定端口号，默认是4200

ng build 编译打包， 后面可以添加其他参数比如 --aot --prod --enviroment --output-path

ng set 设置 后面添加其他参数，ng set packageManagernpm | yarn | cnpm --global 表示是否全局设置

另外关于ng generate这个命令可以缩写的 ng g c是ng generate component 的缩写; ng g s是ng generate service；ng g d是ng generate directive
其他的类似

其他常见的命令

ng new project-name --skip-install --style (less, scss) --prefix app --no-spec 在项目第一次创建时不执行npm install, 样式文件(less或者scss), 前缀为app 不生成spec

ng generate component youcomponent --inline-style --inline-template --no-spec 使用inline template和inline-template不单独生成样式文件和html,不生成spec文件

2.angular.json文件的常用配置

在用ng new生成项目的时候项目的根目录会有有一个angular.json文件

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
  "smart-park": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "less"
      }
    },
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/smart-park",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "src/tsconfig.app.json",
          "assets": [
            "src/favicon.ico",
            "src/assets",
            {
              "glob": "**/*",
              "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
              "output": "/assets/"
            }
          ],
          "styles": [
            "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
            "src/styles.less"
          ],
          "scripts": []
        },
        "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
          }
        }
      },
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": "smart-park:build"
        },
        "configurations": {
          "production": {
            "browserTarget": "smart-park:build:production"
          }
        }
      },
      "extract-i18n": {
        "builder": "@angular-devkit/build-angular:extract-i18n",
        "options": {
          "browserTarget": "smart-park: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": [
            "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
            "src/styles.less"
          ],
          "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/**"
          ]
        }
      }
    }
  },
  "smart-park-e2e": {
    "root": "e2e/",
    "projectType": "application",
    "architect": {
      "e2e": {
        "builder": "@angular-devkit/build-angular:protractor",
        "options": {
          "protractorConfig": "e2e/protractor.conf.js",
          "devServerTarget": "smart-park:serve"
        },
        "configurations": {
          "production": {
            "devServerTarget": "smart-park:serve:production"
          }
        }
      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        "options": {
          "tsConfig": "e2e/tsconfig.e2e.json",
          "exclude": [
            "**/node_modules/**"
          ]
        }
      }
    }
  }
},
"defaultProject": "smart-park"
}

主要介绍schematics配置，主要是一个对象，里面可以配置组件，指令，模块，服务，管道，类

"schematics": {
    "@schematics/angular:component": {
      "styleext": "less"
    },
    "@schematics/angular:directive": {
        
    },
     "@schematics/angular:module": {
        
    },
     "@schematics/angular:service": {
        
    },
     "@schematics/angular:pipe": {
        
    },
     "@schematics/angular:class": {
        
    },
  }