CODEWITHSUNDEEP
angularnpmbuildproduction
Kay van Bree
Kay van Bree

Reputation: 2082

Building Angular for production without installing devDependencies

I am currently trying to create a Docker container to build my production Angular app. I am using npm. I want to install dependencies only (so no devDependencies), so I want to do this:

npm install --only=prod ng build project-name --prod

The only problem is that I am missing a lot of packages like @angular/cli and @angular-devkit/build-angular for my build. I couldn't find any good solutions on the internet, but I don't want my build to include all my devDependencies. Also, I don't want my production build to contain any of the packages required to build. Is there a good solution for this?

Upvotes: 14

Views: 16937

Answers (3)

Abhishek Nanarkar
Abhishek Nanarkar

Reputation: 11

This command will solve dependency problem :

ng build --configuration=production

Upvotes: 1

kauppfbi
kauppfbi

Reputation: 825

Don't worry about your dependencies.

When you trigger a production build with the @angular/cli via 

ng build --prod

Angular will treeshake unused packages and code out of your bundle! See https://github.com/angular/angular-cli/wiki/build for all the build options you can set.

The only thing you have to consider is, how you use your packages and if your dependencies support treeshaking as well. Avoid imports like:

import * as xy from 'packageXY';

Another hint is the npm package Webpack-Bundle-Analyzer Execute these commands in order to inspect/anlayze your bundle:

npm i webpack-bundle-analyzer

ng build --prod --stats-json

cd dist 

webpack-bundle-analyzer stats.json

enter image description here

Upvotes: 14

Jim P.
Jim P.

Reputation: 303

All the npm packages you use in development phase won't be included in your production build. It does not require any special command when installing your packages. You install all the packages you need or run npm install for an existing project as usual.

When deploying your Angular app with ng build prod it only includes critical packages to your app and dependencies you include in your angular.json file under the build section.

Try it yourself: take any angular project, run npm install or add npm packages then run ng build prod, navigate into the dist folder inside your project folder and look how there is less stuff compared to your project, especially inside node_modules folder.

Upvotes: 3

Related Questions