5

since newest Angular has deprecated 'ng eject' command, I've started my project with adding custom file with webpack.config named:

extra-webpack.config.js

I've followed this tutorial: https://codeburst.io/customizing-angular-cli-6-build-an-alternative-to-ng-eject-a48304cd3b21

I have configured everything and it seems to work fine. My problem is, that I would like to set my new file

extra-webpack.config.js

to work only when I start command

"npm run start:dev"

, I don't want to use it when I start

"npm run start:prod"

I've tried to make an if statement, to check if environment is not set to production on module.exports, but I can't gather environment from environment.ts file. I've tried with: import {environment} from './src/environments/environment';

Can anyone help me with proper configuration? Thanks a lot

Here is my extra-webpack.config.js file:

'use strict'; 
const path = require('path'); const ForkTsCheckerWebpackPlugin = 
require('fork-ts-checker-webpack-plugin');

module.exports = {
    optimization: {
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          name: true,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              priority: -10
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true
            }
          }
        }
      },
    context: __dirname,
    output: {
        pathinfo: false
    },
    mode: 'development',
    optimization: {
        removeAvailableModules: false,
        removeEmptyChunks: false,
        splitChunks: false
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                include: path.resolve(__dirname, 'src'),
                use: [{
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true,
                        experimentalWatchApi: true,
                    },
                }]
              }
        ]
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin({
            tslint: true
        })
    ]
};

this is my angular.json file:

{   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",   "version": 1,   "newProjectRoot": "projects",   "projects": {
    "my-portal": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
            "outputPath": "dist/my-portal",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/app/styles/style.scss"
            ],
            "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,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/dev-server:generic",
          "options": {
            "browserTarget": "my-portal:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-portal:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-portal: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": [
              "src/styles.scss"
            ],
            "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/**"
            ]
          }
        }
      }
    },
    "my-portal-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-portal:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-portal:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }   },   "defaultProject": "my-portal" }

I have also noticed that, if I removed:

plugins: [
        new ForkTsCheckerWebpackPlugin({
            tslint: true
        })
    ]

from webpack configuration, I'm able to run it with

npm run start:prod

3
  • How is your angular.json structured? What have you provided as the target? Commented Dec 13, 2018 at 19:04
  • Hello, angular.json file is added. Commented Dec 13, 2018 at 19:25
  • Is you ng serve command running fine?? Commented Jan 17, 2019 at 8:06

1 Answer 1

7

You just need to MOVE the config of

"customWebpackConfig": {
  "path": "./extra-webpack.config.js"
},

to under configurations:production to make it customized for that production configuration

"configurations": {
  "production": {
    "customWebpackConfig": {
      "path": "./extra-webpack.config.js"
    },
    "fileReplacements": [],
...

More details: https://github.com/meltedspark/angular-builders/issues/248#issuecomment-466650709

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.