Angular Routing Not Working After Upgrading to Angular 4

Question

I updated like this, found here

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

When I remove node_modules and then npm install I get this,

WARNING in ./~/@angular/core/@angular/core.es5.js 5889:15-36 Critical dependency: the request of a dependency is an expression

Maybe this will help someone help me. It appears to be an issue with ES5?

Current errors in console.

Background

My project was working fine till I upgraded to Angular 4 last night. Now when I click on a link instead of loading the module (I am lazy loading) it tells me it cannot find the module.

Eror

ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Cannot find module './benefits/benefits.module'. Error: Cannot ……}

Has anyone else shared this situation or have any clue how to fix this or even what to do to go about troubleshooting it? I thought there were no breaking changes in Angular 4?

Code Examples

package.json

{
  "name": "my-web-application",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
"private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular2-jwt": "^0.1.28",
    "angular2-signaturepad": "^2.2.0",
    "auth0-lock": "^10.5.0",
    "core-js": "^2.4.1",
    "ng2-bootstrap": "^1.3.3",
    "ng2-charts": "^1.5.0",
    "ng2-toasty": "^2.5.0",
    "rxjs": "^5.2.0",
    "typescript": "^2.2.1",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.32.3",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0-beta.4",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.2.1"
  }

Answer 1

I came across some of the errors that you have pictured while upgrading to Angular 4.0:

Critical dependency: The request of the dependency is an expression.

Updating angluar-cli to latest solved that for me:

1. Stop ng serve (if running).
2. npm install @angular/cli@latest --save-dev
3. ng serve

Hopefully, this fixes your zone.js issue as well (keep me posted, please).

The warning:

The <template> element is deprecated. Use <ng-template> instead...

is most likely caused by a library (possibly ng2-bootstrap, ng2-charts, or ng2-toasty?) that's using the deprecated template syntax (or you are in your code), so you may want to try to upgrade those as well -- if there is a newer version. I also got this deprecation warning, but I have a dependency that still hasn't been updated to 4.0, so I'm living with it for the next few days.

Note: I wasn't a big fan of those upgrade instructions as following them verbatim (like I originally did, without paying attention) on some projects gives you both dependencies and devDependencies that reference to different versions of the same lib. For example, you now have two versions of @angular/compiler-cli referenced in your package.json: 4.0 and 2.4.

Update for Completeness

Unfortunately, in wuno's case, to complete the upgrade, he had to go as far as:

1. Create a new project.
2. Update it.
3. Replace the src directory with the one from his existing project.
4. npm install and update package.json with his extra packages.

Per his final comment:

I had to create a new project, update it, replace the src directory with the one from my existing project then npm install and update package.json with my extra packages.

We never quite found out what was causing the issue that forced him to re-create the project in his particular case, but upgrading CLI ultimately fixed the issue in the original question.