Move Angular's dependencies to devDependencies

user_11798560 0
Viewed 1592

I've generated a project with the Angular CLI ng new my-dream-app and I've noticed that I get the following dependency structure in package.json

{
  "dependencies": {
    "@angular/animations": "~8.2.11",
    "@angular/common": "~8.2.11",
    "@angular/compiler": "~8.2.11",
    "@angular/core": "~8.2.11",
    "@angular/forms": "~8.2.11",
    "@angular/platform-browser": "~8.2.11",
    "@angular/platform-browser-dynamic": "~8.2.11",
    "@angular/router": "~8.2.11",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.14",
    "@angular/cli": "~8.3.14",
    "@angular/compiler-cli": "~8.2.11",
    "@angular/language-service": "~8.2.11",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Now imagine that I'm using the CLI generated project with a backend framework (e.g., expressjs) that handles static assets. Furthermore, imagine that I want to deploy my app at some cloud service.

I can build locally the static assets and then move the entire project to the cloud where I would run npm i --production to install only the dependencies and then run npm start However, I don't want to install any Angular-related libs at cloud. I only want to install strictly what's necessary to run my app (express, body-parser, cookie-parser etc.).

Now the actual question: will CLI still work properly if I manually move Angular's dependencies to devDependencies? Things like ng update? Would it move back some dependencies from devDependencies to dependencies? Would it create duplicate entries?

angular-cli angular
1 Answers

Angular CLI creates a package.json file that lists the packages needed at runtime in your Angular project under dependencies, and the packages needed to build it using the CLI under devDependencies. I wouldn't really recommend moving the dependencies to devDependencies, but I get the general idea of doing so since at runtime the packages are already packed into your app using Webpack.

To answer your question: To build Angular 2+ using the CLI you will definitely need Angular's core packages (such as @angular/core, @angular/compiler-cli, etc...) installed, so moving these packages to devDependencies and using npm i --production will make you unable to build your app. Therefore, I wouldn't recommend using npm i --production in your case.

What I can suggest is to use npm prune --production which will remove the packages specified in your devDependencies if you don't want them installed later on (e.g. after your build, if you're deploying your app). This is what my team does.

Also, to answer the last of your questions, ng update uses the npm CLI to install the packages; AFAIK, NPM doesn't allow duplicates in its package.json, so no worries.

user_29282330
Related