@angular-builders/dev-server

dev-server:generic

Enhanced @angular-devkit/build-angular:dev-server builder that leverages the custom webpack builder to get webpack configuration. Unlike the default @angular-devkit/build-angular:dev-server it doesn't use @angular-devkit/build-angular:browser configuration to run the dev server. Instead it uses a builder that is specified in browserTarget as long as it provides buildWebpackConfig method.
Thus, if you use @angular-builders/dev-server:generic along with @angular-builders/custom-webpack:browser, ng serve will run with custom configuration provided in the latter.

Prerequisites:

• Angular CLI 6
• @angular-devkit/architect >= 0.7.0
• @angular-devkit/build-angular >= 0.7.0
• @angular-devkit/core >= 0.7.0

Usage

1. npm i -D @angular-builders/dev-server
2. In your angular.json:

   "projects": {
       ...
       "[project]": {
            ...
            "architect": {
                   ...
                   "[architect-target]": {
                             "builder": "@angular-builders/dev-server:generic"
                             "options": {
                                   ...
                             }
   

   Where:
   • [project] is the name of the project to which you want to add the builder
   • [architect-target] is the name of build target you want to run (build, serve, test etc. or any custom target)
3. If [architect-target] is not one of the predefined targets (like build, serve etc.) then run it like this:
   ng run [project]:[architect-target]
   If it is one of the predefined targets, you can run it by ng [architect-target]

Example

angular.json:

"architect": {
    ...
    "build": {
        "builder": "@angular-builders/custom-webpack:browser"
        "options": {
                     "customWebpackConfig": {
                        path: "./extra-webpack.config.js"
                     }
            ...
        },
    "serve": {
        "builder": "@angular-builders/dev-server:generic",
        "options": {
            "browserTarget": "my-project:build"
        }
    }

In this example dev-server will use custom-webpack:browser builder, hence modified webpack config, when invoking the serve target.

Further reading

• Customizing Angular CLI 6 build  -  an alternative to ng eject