CODEWITHSUNDEEP
angularnpmwebpackangular-cli
Wortmann
Wortmann

Reputation: 19

Angular CLI ejected App - pass parameters

I'm currently using @angular/[email protected]. I used the new eject feature to edit the webpack config. Now I'm confused how I'm able to pass parameters to my build. For example: How would I do a ng build --prod or ng test --code-coverage?

How would I do those things with npm scripts.

Upvotes: 1

Views: 2356

Answers (1)

Christophe Van de Poel
Christophe Van de Poel

Reputation: 21

After ejecting, angular-cli disables the use of your ng-commands. It does however give you a basic setup for doing it yourself.

If you look into your package.json, you find the following:

"scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --port=4200",
    "build": "webpack",
    "test": "karma start ./karma.conf.js",
    "lint": "ng lint",
    "e2e": "protractor ./protractor.conf.js",
    "prepree2e": "npm start",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet" 
}

These are what the angular-cli folk have determined to be the minimum needed scripts to build your project from now on. They are run from your command-line, preceded by npm run or yarn run, depending on your preference.

So when you want to run a webpack build, in stead of running ng build, like you used to, you now run npm run build.

To build for production in webpack, you want to add a line to those scripts:

"scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --port=4200",
    "build": "webpack",
    "build:prod": "webpack -p",                        <-- add this line
    "test": "karma start ./karma.conf.js",
    "lint": "ng lint",
    "e2e": "protractor ./protractor.conf.js",
    "prepree2e": "npm start",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet" 
}

Now when you want to run a production build, just type npm run build:prod and webpack will run in production mode.

If you ejected with --prod, the above will not mean much will change, since I think webpack.config.js will automatically be put in production mode.

Some more info on what webpack -p does exactly, see https://webpack.js.org/guides/production-build/

Upvotes: 2

Related Questions