How to update Angular CLI project?

I am trying to upgrade my angular 2 project from 2.0.0 to 2.4.1 . I understand that semantic version control was adopted after release 2.0.0 and releases 2.xx should be a replacement. My experience seems to indicate otherwise. Maybe I just donโ€™t know what I'm doing, but I didnโ€™t find it simple ...

Attempt 1 - Manual Version Upgrade

My naive first approach was to manually update my @angular dependencies. You can refer to my package.json below (update 1). I made these changes, then npm install and received a few warnings, and then received the following error when trying to do ng serve .

Cannot read property 'AssetUrl' from undefined

And my warnings ...

 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.15: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN @angular/core@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed. npm WARN @angular/core@2.4.1 requires a peer of zone.js@^0.7.2 but none was installed. npm WARN @angular/http@2.4.1 requires a peer of rxjs@^5.0.1 but none was installed. npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/compiler@2.0.2 but none was installed. npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/platform-server@2.0.2 but none was installed. npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/core@2.0.2 but none was installed. npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/compiler-cli@^2.3.1 but none was installed. npm WARN @ngtools/webpack@1.2.1 requires a peer of @angular/tsc-wrapped@^0.5.0 but none was installed. npm WARN @ngtools/webpack@1.2.1 requires a peer of webpack@^2.1.0-beta.25 but none was installed. 

So I tried to fix these warnings, but I don't know how to fix all of them (e.g. @ ngtools / webpack), and some of them seem to conflict with each other. Therefore, I refused the manual approach to updating my angular version 2 ...

Original packaging .json

 { "name": "frontend", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor", "build": "ng build", "buildProd": "ng build --env=prod" }, "private": true, "dependencies": { "@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/material": "^2.0.0-alpha.9-experimental-pizza", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@types/google-libphonenumber": "^7.4.8", "angular2-datatable": "^0.4.2", "apollo-client": "^0.4.22", "core-js": "^2.4.1", "google-libphonenumber": "^2.0.4", "graphql-tag": "^0.1.15", "hammerjs": "^2.0.8", "ng2-bootstrap": "^1.1.16", "rxjs": "5.0.0-beta.12", "ts-helpers": "^1.1.2", "zone.js": "^0.6.26" }, "devDependencies": { "@types/hammerjs": "^2.0.33", "@types/jasmine": "^2.2.30", "@types/lodash": "^4.14.39", "angular-cli": "1.0.0-beta.16", "codelyzer": "~0.0.26", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "2.0.2", "typings": "1.4.0" } } 

Update 1 package.json file

 { "name": "frontend", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", "e2e": "protractor", "build": "ng build", "buildProd": "ng build --env=prod" }, "private": true, "dependencies": { "@angular/common": "2.4.1", "@angular/compiler": "2.4.1", "@angular/core": "2.4.1", "@angular/forms": "2.4.1", "@angular/http": "2.4.1", "@angular/material": "^2.0.0-alpha.9-experimental-pizza", "@angular/platform-browser": "2.4.1", "@angular/platform-browser-dynamic": "2.4.1", "@angular/router": "3.0.0", "@types/google-libphonenumber": "^7.4.8", "angular2-datatable": "^0.4.2", "apollo-client": "^0.4.22", "core-js": "^2.4.1", "google-libphonenumber": "^2.0.4", "graphql-tag": "^0.1.15", "hammerjs": "^2.0.8", "ng2-bootstrap": "^1.1.16", "rxjs": "5.0.1", "ts-helpers": "^1.1.2", "zone.js": "^0.7.2" }, "devDependencies": { "@types/hammerjs": "^2.0.33", "@types/jasmine": "^2.2.30", "@types/lodash": "^4.14.39", "angular-cli": "1.0.0-beta.16", "codelyzer": "~0.0.26", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "4.0.9", "ts-node": "1.2.1", "tslint": "3.13.0", "typescript": "2.0.2", "typings": "1.4.0" } } 

Attempt 2 - use npm-check-updates

Because when I tried to select my angular dependencies for updates, I got into a web of other dependencies that needed to be updated, then I just tried to update everything.

Based on this answer, I tried the following:

 npm i -g npm-check-updates npm-check-updates -u npm install 

This went fine, but when I tried ng serve, I got the following error:

ERROR in AppModule is not NgModule

Using the information collected here , I downgraded my typescript, this error disappeared, but a new error appeared.

ERROR in error detected during static resolution of character values. Link to an unexported function (position 29:10 in the source .ts file), resolution of the restPaths symbol in rest-paths.ts, resolution of the AppModule symbol in app.module.ts, resolution of the AppModule symbol in app.module.ts

I struggled with these errors, but the fact that I have so many problems raises red flags.

Can anybody help? Am I taking the wrong approach?

Note that I saw some suggestions for updating angular-cli projects that recommend removing angular-cli and reinstalling it, then initializing ng and overwriting your configuration files. This did not work for me because I already had the latest version.

Edit: the assertion of having the latest angular-cli was incorrect. I had angular-cli version 1.0.0-beta.16 whereas the last one at the time of this editing was 1.0.0-beta.24 . However, I tried updating my angular-cli and running ng init for my existing project. Now I notice that I have not followed the exact steps described on the angular-cli github page. I skipped npm install --save-dev angular-cli@latest and destroyed all of my node_modules instead of using the rm command they threw.

+64
angular angular-cli
Dec 30 '16 at 23:06
source share
7 answers

USEFUL:

In the official Angular Upgrade Guide, select your current version and the version you want to upgrade for the appropriate upgrade guide. https://update.angular.io/

See the GitHub Angular CLI diff repository for a comparison of Angular CLI changes. https://github.com/cexbrayat/angular-cli-diff/

UPDATED 12/26/2018:

Use the official Angular update guide mentioned in the helpful section above. It provides the latest information with links to other resources that may be useful during the update.

UPDATED 05/05/2018:

In angular ng update CLI 1.7 ng update .

ng update

New Angular CLI team to simplify updating your projects to the latest versions. Packages can determine the logic that will be applied to your projects to ensure that the latest features are used, as well as to make changes to reduce or eliminate the impact of critical changes.

Configuration information for ng update can be found here.

1.7 to 6 updates

CLI 1.7 does not support automatic update v6. Manually install @ angular / cli through the package manager, then run the update migration scheme to complete the process.

 npm install @angular/cli@^6.0.0 ng update @angular/cli --migrate-only --from=1 



UPDATED 04/30/2017:

1.0 update

You should now follow the Angular CLI migration guide




UPDATED 03/03/2017:

RC Update

You must follow the Angular CLI RC migration guide




UPDATED 02/20/2017:

Please keep in mind that 1.0.0 beta .32 contains critical changes and removed ng init and ng update

The request for receipt here states the following:

BREAKING CHANGE: Removing the ng init & ng update commands because their current implementation causes more problems than it solves. The update function will return to the CLI until a manual application update is required.

The angular- cli file CHANGELOG.md reads as follows:

BREAKING CHANGES - @ angular / cli: Removing the ng init & ng update commands because their current implementation causes more problems than it solves. As soon as RC is released, we will no longer need to use them for updating, as this step will be as simple as installing the latest version of the CLI.




UPDATED 02/17/2017:

Angular-cli is now added to the NPM @angular package. Now you should replace the above command with the following:

Global Package:

 npm uninstall -g angular-cli @angular/cli npm cache clean npm install -g @angular/cli@latest 

Local project package:

 rm -rf node_modules dist # On Windows use rmdir /s /q node_modules dist npm install --save-dev @angular/cli@latest npm install ng init 



ORIGINAL RESPONSE

You must follow the steps from README.md on GitHub to update angular via angular-cli .

Here they are:

Angular-cli update

To upgrade angular-cli to the new version, you must upgrade both the global package and the local package of your project.

Global Package:

 npm uninstall -g angular-cli npm cache clean npm install -g angular-cli@latest 

Local project package:

 rm -rf node_modules dist tmp # On Windows use rmdir /s /q node_modules dist tmp npm install --save-dev angular-cli@latest npm install ng init 

Running ng init will check for changes in all automatically generated files created by ng new and allow you to update yours. You are offered four options for each changed file: y (overwrite), n (do not overwrite), d (show the difference between your file and the updated file) and h (help).

Carefully read the differences for each code file and either accept the changes, or turn them on manually after ng init completes.

+80
Dec 30 '16 at 23:22
source share

JJB's answer got me on the right track, but the update didn't go very smoothly. My process is described in detail below. Hopefully the process will become easier in the future and the JJB answer could be used or something even more straightforward.

Solution Details

I followed the steps captured in the JJB answer to accurately update angular-cli. However, after running npm install angular-cli was broken. Even trying to make an ng version will result in an error. Therefore, I could not execute the ng init command. See the error below:

 $ ng init core_1.Version is not a constructor TypeError: core_1.Version is not a constructor at Object.<anonymous> (C:\_git\my-project\code\src\main\frontend\node_modules\@angular\compiler-cli\src\version.js:18:19) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) ... 

To be able to use any angular-cli commands, I had to manually update the package.json file and put @angular bindings on 2.4.1, and then do another npm install .

After that, I was able to do ng init . I updated my configuration files, but none of my application files / *. When this was done, I was still getting errors. The first of them is described in detail below, the second is the same type of error, but in a different file.

Error in error. Function calls are not supported. Consider replacing a function or lambda with a reference to the exported function (position 62: 9 in the .ts file), allowing the AppModule character in C: / _ bastard / my-project / code / SRC / main / interface / SRC / application / app .module.ts

This error is tied to the next factory provider in my AppModule

 { provide: Http, useFactory: (backend: XHRBackend, options: RequestOptions, router: Router, navigationService: NavigationService, errorService: ErrorService) => { return new HttpRerouteProvider(backend, options, router, navigationService, errorService); }, deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService] } 

To fix this error, I used the exported function and made the following change to the provider.

  { provide: Http, useFactory: httpFactory, deps: [XHRBackend, RequestOptions, Router, NavigationService, ErrorService] } ... // elsewhere in AppModule export function httpFactory(backend: XHRBackend, options: RequestOptions, router: Router, navigationService: NavigationService, errorService: ErrorService) { return new HttpRerouteProvider(backend, options, router, navigationService, errorService); } 

Summary

To summarize what I understand, to be the most important details, the following changes were required:

  • Upgrade your angular-cli version using the steps described in the JJB answer (and on their github page).

  • Manually updating @ angular version, 2.0.0 does not seem to be supported by angular-cli version 1.0.0-beta.24

  • Using the angular-cli and ng init commands, I updated the configuration files. I think the critical changes were in angular-cli.json and package.json. See File Configuration Changes below.

  • Make code changes to the export functions before referencing them, as shown in the details of the solution.

Key configuration changes

angular -cli.json changes

 { "project": { "version": "1.0.0-beta.16", "name": "frontend" }, "apps": [ { "root": "src", "outDir": "dist", "assets": "assets", ... 

changed to ...

 { "project": { "version": "1.0.0-beta.24", "name": "frontend" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], ... 

My package.json looks like this after a manual merge, which examines the versions used by ng-init. Please note that my version of angular is not 2.4.1, but the change I received after was the inheritance of the component that was introduced in 2.3, so I was fine with these versions. The original package.json is in the question.

 { "name": "frontend", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor", "build": "ng build", "buildProd": "ng build --env=prod" }, "private": true, "dependencies": { "@angular/common": "^2.3.1", "@angular/compiler": "^2.3.1", "@angular/core": "^2.3.1", "@angular/forms": "^2.3.1", "@angular/http": "^2.3.1", "@angular/platform-browser": "^2.3.1", "@angular/platform-browser-dynamic": "^2.3.1", "@angular/router": "^3.3.1", "@angular/material": "^2.0.0-beta.1", "@types/google-libphonenumber": "^7.4.8", "angular2-datatable": "^0.4.2", "apollo-client": "^0.4.22", "core-js": "^2.4.1", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", "zone.js": "^0.7.2", "google-libphonenumber": "^2.0.4", "graphql-tag": "^0.1.15", "hammerjs": "^2.0.8", "ng2-bootstrap": "^1.1.16" }, "devDependencies": { "@types/hammerjs": "^2.0.33", "@angular/compiler-cli": "^2.3.1", "@types/jasmine": "2.5.38", "@types/lodash": "^4.14.39", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.24", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.0.2", "typescript": "~2.0.3", "typings": "1.4.0" } } 
+4
Dec 31 '16 at 19:16
source share

Just use the built-in Angular CLI function

 ng update 

upgrade to the latest version.

+3
Mar 24 '18 at 10:35
source share

According to the documentation here http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html you should "just be able to run ...

npm install @ angular / {common, compiler, compiler-cli, core, forms, http, platform-browser, platform-browser-dynamic, platform-server, router, animations} @latest typescript @latest --save

I tried this and got a couple of errors due to the fact that my zone.js and ngrx / store libraries were older versions.

Updating these versions to the latest versions of npm install zone.js@latest --save and npm install @ngrx/store@latest -save , after which working with the angular installation worked again for me.

+1
Apr 20 '17 at 7:47
source share

Delete:

 npm uninstall -g angular-cli 

Reinstall (with yarn)

 # npm install --global yarn yarn global add @angular/cli@latest ng set --global packageManager=yarn # This will help ng-cli to use yarn 

Reinstall (with npm number)

 npm install --global @angular/cli@latest 

Another way is to not use the global installation and add the /node_modules/.bin folder to PATH or use npm scripts. It will be softer to update.

0
May 15 '17 at 19:53
source share

Solution that worked for me:

  • Delete node_modules and dist folder
  • (in cmd) >> ng update --all --force
  • (in cmd) >> npm install typescript @ "> = 3.4.0 and <3.5.0" --save -dev --save -exact
  • (in cmd) >> npm install --save core-js
  • Commenting on import 'core-js / es7 / refle'; in polyfill.ts
  • (in cmd) >> ng feed
0
Jul 02 '19 at 12:48
source share

To upgrade the Angular CLI to a new version, you must upgrade the global package and the local project package.

Global Package:

 npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest 

Local project package:

 rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell npm install --save-dev @angular/cli@latest npm install 

See the link https://github.com/angular/angular-cli

-one
Jul 29 '17 at 5:45
source share



All Articles