Search code examples
angularwebpackangular-cli-v6

Angular CLI 6.0.1 how to control dev environment and webpack


This is part of angular.json:

"configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }

What I want to do is to control the development environment. For example change sourceMap to false and I do not want to do that by adding parameters to ng build. Is there any equivalent to production inside angular.json which will refer to development?

And something very important: In Angular-CLI 6 there is no ng eject! How then, is it possible to see and modify webpack.config.js ?


Solution

  • Default settings for all environments are configured in the architect > build > options property

     "projects": {
        "MyProject": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist",
                "index": "src/index.html",
                "main": "src/main.ts",
                "tsConfig": "src/tsconfig.app.json",
                "polyfills": "src/polyfills.ts",
    
                //Add settings here
                "sourceMap": false,
                 "fileReplacements": [
                    {
                        "replace": "src/environments/environment.ts",
                        "with": "src/environments/environment.anotherdevenv.ts"
                    }
                ]
    

    These settings are used as is for the dev env, so you can modify this (but this will impact other environments if they do not override the specified setting)

    You can also create your own "development" configuration (by copying the production conf for instance, and changing depending en your needs), and specify in that conf your setting specific to the dev environment. Then run the command below

    ng serve -c development
    

    The eject command is temporarily disabled, but it should be added back soon according to a comment by a core member of angular cli team (https://github.com/angular/angular-cli/issues/10945)