Angular router issue when upgrading from angular 2 to angular 4.4

I have followed the same steps as mentioned in the official migrating_documentation of the angular.

Unfortunately, I am facing an issue when I am migrating my code from angular 2 to angular 4.4. The issue might be related to the @angular/router.

However, code seems to be working fine but I am not able to make the build. Any suggestion will be appreciated.

Error shown in Terminal:

ERROR in [at-loader] src/app/app.component.ts:60:16 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'

ERROR in [at-loader] src/app/app.component.ts:60:39 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'.

ERROR in [at-loader] src/app/app.component.ts:60:68 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'.

Package.json

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^4.4.7",
    "@angular/common": "^4.4.7",
    "@angular/compiler": "^4.4.7",
    "@angular/compiler-cli": "^4.4.7",
    "@angular/core": "^4.4.7",
    "@angular/forms": "^4.4.7",
    "@angular/http": "^4.4.7",
    "@angular/platform-browser": "^4.4.7",
    "@angular/platform-browser-dynamic": "^4.4.7",
    "@angular/platform-server": "^4.4.7",
    "@angular/router": "^4.4.7",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "dragula": "^3.7.2",
    "fullcalendar": "^3.0.1",
    "highcharts": "^5.0.9",
    "jquery": "^3.1.1",
    "jquery-mousewheel": "^3.1.13",
    "jquery-ui": "^1.12.1",
    "moment": "^2.17.1",
    "ng2-dragula": "^1.3.0",
    "primeng": "^2.0.2",
    "rxjs": "5.0.1",
    "webpack-strip": "^0.1.0",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/google-maps": "^3.2.0",
    "@types/jasmine": "2.5.36",
    "@types/jquery": "^2.0.41",
    "@types/node": "^6.0.45",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.3.4",
    "url-loader": "^0.5.9",
    "webpack": "2.2.1",
    "webpack-bundle-size-analyzer": "^2.6.0",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

After a long search on google, I am able to find the solution of the problem.Both the answer mentioned above are correct for angular 4, However , in Angular 6 you need to use below mentioned code

Angular 6

import below mentioned module

import { filter,pairwise} from 'rxjs/operators'

and use pipe

this.router.events.pipe(
   filter((val:Event) => val instanceof NavigationStart)).subscribe((val:any) => {
      console.log(val,'check val function' , typeof val , val.url);
      var patt     = new RegExp("/reset-password/");
      var found_rp = false;
      if(patt.test(window.location.pathname))
      {
         found_rp = true;
      }

      if(val.url == '/login' || val.url == '/please-help' || val.url == '/reset-password' || found_rp){
        this.hideHeader = false;
      } else{
        this.hideHeader = true;
      }

});

How to Update Angular Projects to the Latest Version, This article is part 6 of the SitePoint Angular 2+ Tutorial on how to create a CRUD In part 4, we introduced Angular Router and learned how the router updates our Get 'PHP & MySQL: Novice to Ninja, 6th Edition' for free. Upgrading from Angular 2 to Angular 4 I recently updated this Angular example from Angular 2.4.9 to Angular 4.1.0 and was pleasantly surprised at how simple it was, no code changes were required, all I had to do was update the package.json and tsconfig.json files.


When you subscribe to router Events different types of events will be emitted: NavigationStart, RouteConfigLoadStart, RouteConfigLoadEnd, RoutesRecognized, GuardsCheckStart...

Apparently they do not have all the same properties and property url is not available on RouteConfigLoadStart, but on NavigationStart or NavigationEnd for example.

So what you can do is filter and subscribe the type of event like this:

this.router.events
  .filter((event: any) => event instanceof NavigationEnd)
  .subscribe((event: any) => {
    // access event.url;
  });

You already did this in your second subscription, you filtered on NavigationStart.

ng update @angular/core fails · Issue #10621 · angular/angular-cli , Versions Angular CLI: 6.0.0 Node: 8.9.1 OS: win32 x64 Angular: 5.2.10 ng update @angular/material rxjs 5.5.2 -> 6.1.0 ng update rxjs There might be to "​@angular/router" (requires ">=7.0.0-rc.0 <8.0.0||>=4.4.0 <=6.0.0",  Hello everyone, So, with the release of the new version of angular, with the new http module, i upgrade my angular version from 4.2.4 (angular-cli 1.2.1) to 4.3.1 (angular-cli 1.2.5) to be able to use the new httpclient module.


From your code it looks like you are trying to access the url during lazy loading. But in Angular 4+ the property url does not exists on event of type RouteConfigLoadStart and RouteConfigLoadEnd. Instead you can filter the event to use NavigationStart event which extends the RouterEvent class and has the url property. You can use it like below -

router.events.filter((e: Event) => e instanceof NavigationStart)
             .subscribe((val:NavigationStart) => {
                var patt = new RegExp("/reset-password/");
                var found_rp = false;
                if(patt.test(window.location.pathname))
                {
                  found_rp = true;
                }

               if(val.url == '/login' || val.url == '/please-help' || val.url == '/reset-password' || found_rp){
                   this.hideHeader = false;
                } 
                else
               {    
                this.hideHeader = true;
               }
         });

Here is a similar kind of issue - https://github.com/angular/angular/issues/14976 and documentation on router events

  1. https://angular.io/api/router/RouteConfigLoadStart
  2. https://angular.io/api/router/NavigationStart

Angular CLI compiler requires older Typescript · Issue #7625 , request Versions. @angular/cli: 1.4.0 node: 8.4.0 os: darwin x64 @angular/​animations: 4.3.6 @angular/cdk: 2.0.0-beta. @angular/router: 4.3.6 @angular​/cli: 1.4.0 Having the same issue with @angular/compiler-cli@4.4.3. Node: 8.4.​0 chore: update dependency typescript to ~2.5.0 #156. Closed. 1. It is Smaller than Angular 2 . AngularJS 4 has minimized the AOT (ahead-of-time) generated code. This change reduces 60% code generation for your components. The more complex your templates are, the higher the savings. 2. It is faster than Angular 2 . AngularJS 4 has enhanced the code compiling speed. 3. It has enhanced *ngFor and *ngIf


Keeping your Angular projects up-to-date, If you are currently using AngularJS, see Upgrading from AngularJS. AngularJS is the name for all v1.x versions of Angular. Getting notified of new releaseslink. To  @MarkPieszak The release of rxjs 5.4.2 only means that there are no more errors about rxjs when using Typescript 2.4.1. It does not mean that the issue with angular 4.2.5<->TS 2.4.1 is magically fixed! :-) 👍


Workspace npm dependencies, Upgrading from AngularJS See Local Environment Setup for information about the required versions and installation of Node.js and npm . If you already have projects running on your machine that use other versions of Node.js and npm, @angular/router, The router module navigates among your app pages when the​  ngForward is not a real upgrade framework for Angular 2 but instead we can use it to create Angular 1 apps that look like Angular 2. If you still feel uncomfortable upgrading your existing application to Angular 2, you can fall to ngForward to feel the taste and sweetness of the good tidings Angular 2 brings but still remain in your comfort zone.


Browser support, Safari, 2 most recent major versions The npm packages for the mandatory polyfills (such as zone.js ) are installed Router when using hash-based routing. FYI it's best to avoid force fixing with npx npm-force-resolutions because there are some packages (in a v8 project at least) that have minimist 0.x, so it would be a breaking upgrade.