@angular/cli 工程 项目 配置

如果你创建工程项目用angular-cli 你的样式文件想使用scss, 并且让ng serve自动编译它们

你可以在创建项目的时候用 ng new sassy-project --style=sass

或者通过ng set defaults.styleExt scss 来修改你现有的项目

然后修改.angular-cli.json的

"styles": [
    "styles.css" // "styles.scss"
]

和component里面使用到的scss

 

创建带路由的项目

ng new my-routing --routing

 

或者在原有的项目上添加路由

ng generate module app-routing --flat --module=app

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。

--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中

Angular6+ webpack自定义扩展

使用工具：ngx-build-plus，不需要改很多东西就能在现有项目进行集成

1.运行 ng add ngx-build-plus，在angular7版本会自动一键配置好，但是6版本中可能会出现安装不成功，这时候请直接npm install ngx-build-plus --save-dev，然后angular.json文件中更改以下两处地方:

"build": {
      - "builder": "@angular-devkit/build-angular:browser"
      + "builder": "ngx-build-plus:build"
      ...
},
"serve": {
      - "builder": "@angular-devkit/build-angular:dev-server"
      + "builder": "ngx-build-plus:dev-server"
      ...
}

2.接下来根目录下新建webpack.extra.js文件

module.exports = {
   // 这里添加webpack配置对象
};

3.进行生产环境编译

ng build --extraWebpackConfig webpack.extra.js --prod