使用 Angular cli 创建新的 Angular 项目 - @angular/cli 和 @angular/core 在 package.json 中显示不同的版本

Question

Angular beginner here. Currently held assumption - when creating a new angular project, versions of packages in package.json should match those in npmjs website.

npm list -g shows the following

/usr/local/lib
├── @angular/cli@14.0.5
├── corepack@0.10.0
└── npm@8.13.2

Upon creating a new angular app using ng new demo , inside package.json, @angular/cli version is 14.0.5 - but @angular/core version is 14.0.0

package.json

{
  "name": "demo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.5",
    "@angular/cli": "~14.0.5",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.7.2"
  }
}

ng update @angular/core shows Package '@angular/core' is already up to date. But npm install @angular/core bumps the version to 14.0.5 in package.json file.

Why doesn't the latest cli install latest @angular/<other packages> ?

Answer 1

They are doing slightly different things though the outcome is similar. Basically ng update may also check for schematics to decide if based on compatibility, it would actually bump the version - or not. npm i will just do it, no checks. ng is done with Angular CLI and npm with npm CLI so their different in their behavior because they are different things. https://angular.io/guide/schematics#update-schematics

If you were on "@angular/core": "13.0.0" while everything else was at 14 and did ng update most likely you will be bumped to 14 with the core. But in your case, it was best decided to stay on 14.0.0 and ignore the minor version 14.0.5 .

Upgrading Angular stuff with ng update is a good idea, because of schematics. Other 3rd party packages probably don't have schematics so well have to make do with npm i .