If you are looking to upgrade your Angular 13 project to Angular 14 (October 2022), here's a step-by-step guide:
To begin, navigate to your project directory and open the command prompt with Administrator privileges. Then, execute the following command:
ng update @angular/core@14 @angular/cli@14 --allow-dirty --force
After running the above command, you should see an output similar to the one below. Please note that the specifics may vary based on your current Angular version:
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 14.2.5 for updating purposes.
√ Package installation successful.
Repository contains changes. Update modifications will merge with existing alterations.
Using npm package manager.
Gathering installed dependencies...
Located 23 dependencies.
Retrieving dependency information from registry...
Updating package.json with dependency @angular-devkit/build-angular @ "14.2.5" (used to be "13.2.6")...
Updating package.json with dependency @angular/cli @ "14.2.5" (used to be "13.2.6")...
Updating package.json with dependency @angular/compiler-cli @ "14.2.5" (used to be "13.2.7")...
Updating package.json with dependency typescript @ "4.8.4" (used to be "4.5.5")...
Updating package.json with dependency @angular/animations @ "14.2.5" (used to be "13.2.7")...
Updating package.json with dependency @angular/common @ "14.2.5" (used to be "13.2.7")...
Updating package.json with dependency @angular/compiler @ "14.2.5" (used to be "13.2.7")...
Updating package.json with dependency @angular/core @ "14.2.5" (used to be "13.2.7")...
Updating package.json with dependency @angular/forms @ "14.2.5" (used to be "13.2.7")...
Updating package.json with dependency @angular/platform-browser @ "14.2.5" (used to be "13.2.7")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "14.2.5" (used to be "13.2.7")...
Updating package.json with dependency @angular/router @ "14.2.5" (used to be "13.2.7")...
UPDATE package.json (1068 bytes)
√ Packages successfully updated.
** Executing migrations for '@angular/cli' **
> Eliminate 'defaultProject' option from workspace configuration.
The project selection will now rely on the current working directory.
UPDATE angular.json (3177 bytes)
Migration complete.
> Discard 'showCircularDependencies' option from browser and server builders.
Migration complete.
> Swap out 'defaultCollection' option in workspace config with 'schematicCollections'.
Migration complete.
> Modify version prefixes of Angular packages 'dependencies' and 'devDependencies' to '^' instead of '~'.
UPDATE package.json (1068 bytes)
√ Packages installed without errors.
Migration complete.
> Delete 'package.json' files from library projects secondary entry points.
Migration complete.
> Adjust TypeScript compilation target to 'ES2020'.
UPDATE tsconfig.json (863 bytes)
Migration complete.
** Executing migrations for '@angular/core' **
> Starting Angular version 13, `entryComponents` are no longer necessary.
Migration complete.
> In Angular version 14, the `pathMatch` property of `Routes` was updated to a strict union of the two valid options: `'full'|'prefix'`.
Variables `Routes` and `Route` require explicit typing to prevent TypeScript inferring the property as a looser `string`.
Migration complete.
> As of Angular version 14, Forms model classes allow a type parameter, and existing instances must opt out to maintain backward compatibility.
Migration complete.
Below is the updated package.json file after completing the upgrade process:
{
"name": "custom-project-14",
"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.2.5",
"@angular/common": "^14.2.5",
"@angular/compiler": "^14.2.5",
"@angular/core": "^14.2.5",
"@angular/forms": "^14.2.5",
"@angular/platform-browser": "^14.2.5",
"@angular/platform-browser-dynamic": "^14.2.5",
"@angular/router": "^14.2.5",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.2.5",
"@angular/cli": "^14.2.5",
"@angular/compiler-cli": "^14.2.5",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.8.4"
}
}