13

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?

Scuba Kay
  • 2,004
  • 3
  • 26
  • 48
  • 2
    People saying not to worry about dev dependencies being installed, note that it will increase build times and build server costs. Ideally each branch of your code automatically triggers a build pipeline, if successful, then it can merge to Dev, then to staging, then to prod etc. a 5 minute NPM install will slow down the team and slow down hot-fixes to production. Devs don't wanna have to wait 5 minutes. With npm ci, it's slightly faster, but npm install --only=prod is a lot faster! Also consider looking at npm-cache – Rusty Rob Apr 02 '19 at 21:53
  • Interesting note on production only install, but don't you need packages like `@angular-devkit/build-angular` and `typescript` for building Angular? Or would you pre-install these on a build container or something similar? – Scuba Kay Apr 03 '19 at 07:20
  • Yes i do need those, i'm not sure the best way TBH, hoping someone else can suggest a good way, although we do pre install angular-cli globally since some script commands use ng. Could easily pre install some of the dev dependancies i suppose. Would save us installing cypress etc everytime. devs don't like waiting for builds :) – Rusty Rob Apr 03 '19 at 09:50
  • Cypress takes a lot of time to install too, but it just crossed my mind that you do want to update stuff like Cypress etc based on the version in your package.json. Right now, we install the complete node_modules and just stash it in between build stages in Jenkins. This works for reducing build times if you use different containers/stages. – Scuba Kay Apr 03 '19 at 14:48
  • seems like npm-cache is the way to go – Rusty Rob Apr 03 '19 at 17:14

3 Answers3

14

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

kauppfbi
  • 805
  • 1
  • 8
  • 24
  • 5
    What about for continuous integration performance in build pipelines? npm install takes about 5 minutes to run, e.g. install things such as cypress. Perhaps i can try "npm ci" instead of "npm install", or I could make my dev dependancies into non-dev dependancies. edit: could also try npm-cache ? – Rusty Rob Apr 02 '19 at 00:33
  • 1
    I suggest to use a npm cache. Depnding on your build server it is quite easy to configure. In our case it only takes 15-20 sec to install the dependencies with activated cache (we also load cypress and a lot of other stuff) – kauppfbi Apr 03 '19 at 14:03
  • 1
    npm cache isnt an option when using Azure hosted ... which is the situation im in – Ricardo Saracino Jun 07 '19 at 16:34
  • Error: Unknown argument: prod. Today you need to use: ng build --configuration=production (and/or change the angular.json default configuration). – Melroy van den Berg May 19 '23 at 00:24
3

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.

Jim P.
  • 303
  • 1
  • 5
  • 15
1

This command will solve dependency problem :

ng build --configuration=production
Elikill58
  • 4,050
  • 24
  • 23
  • 45
Abhishek Nanarkar
  • 11
  • 1