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.