Customizing Angular CLI 6 build — an alternative to ng eject
source link: https://www.tuicool.com/articles/hit/MJ3YBbM
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
So your Angular 6 project just went a bit beyond TODO app and you have to customize your build configuration.
The question is how?
Angular CLI 1.x ng eject VS Angular CLI 6 builders
In Angular CLI 1.x (Angular 5) you had ng eject
command for this, which was ejecting the whole underlying webpack configuration and allowing you to modify it as you please.
In Angular CLI 6 this command has been temporarily disabled, and I suspect that it will be deprecated soon due to the new concept called Builders .
With the new Angular CLI you can customize the build process by defining your own builders as well as using one of the builders provided by the community.
Extending underlying webpack configuration
So lets go ahead and customize our build by extending the underlying webpack configuration:
-
Install angular-cli-builders :
npm i -D angular-cli-builders
.Note that it requires version >=0.7.0 of @angular-devkit/architect , @angular-devkit/core and @angular-devkit/build-angular so you might need to install them :
npm i -D @angular-devkit/architect @angular-devkit/build-angular @angular-devkit/core
-
In angular.json change the
@angular-devkit/build-angular:browser
builder toangular-cli-builders:custom-webpack-browser
:
"architect": { ... "build": { "builder": "angular-cli-builders:custom-webpack-browser" "options": { ... } ... }
-
If you build a universal app and would like to modify your server build configuration use
angular-cli-builders:custom-webpack-server
instead ofangular-cli-builders:custom-webpack-browser
-
Add
customWebpackConfig
to the build target options :
"architect": { ... "build": { "builder": "angular-cli-builders:custom-webpack-browser" "options": { "customWebpackConfig": { "path": "./extra-webpack.config.js" } ... } ... }
Check out the full description of customWebpackConfig
here .
- Create extra-webpack.config.js in the root of your application (or whatever path you specified in angular.json ).
- Fill it with extra configuration you need (plain webpack configuration).
- Note that in contrary to
ng eject
this configuration will be merged with the default Angular build configuration so you only have to configure the part you want to change/add.
For example, if you want to add another webpack loader, your webpack config will look like this:
module.exports = { module: { rules: [ { test: /\.cool$/, use: 'cool-loader' } ] } };
Additional sources
You can check out this electron-angular-native project for the example of Electron Angular application with node addons built with Angular CLI 6.
What is next
In the next article we will learn how to create your own builder.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK