javascript - 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/appponent.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/appponent.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/appponent.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/mon": "^4.4.7",
    "@angular/piler": "^4.4.7",
    "@angular/piler-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"
  }
}

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.ponent.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.ponent.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.ponent.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/mon": "^4.4.7",
    "@angular/piler": "^4.4.7",
    "@angular/piler-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"
  }
}

app.ponent.ts

import { Component,AfterContentInit,AfterViewInit,AfterViewChecked } from '@angular/core';
import { Location,PopStateEvent} from '@angular/mon';
import * as myGlobals from './global_variable';
import { headerComponent } from './ponents/header/header.ponent';
import { footerComponent }   from './ponents/footer/footer.ponent';
import { sidebarComponent }   from './ponents/sidebar/sidebar.ponent';
import { mainPageComponent }   from './ponents/main/mainpage.ponent';
import { Routes, RouterModule ,ActivatedRoute,Router,NavigationEnd,NavigationStart , ExtraOptions} from '@angular/router';
import {AuthService} from './services/auth.service';


@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html'
})
export class AppComponent { 
public hideHeader:any = false;
public showHeader:any;
public showSidebarTrial:any = false;
public param_id:any;
headerTrialEmitter(e:any)
{
    this.showSidebarTrial = e.value;
}
    onActivate(e){
       //alert(1.5);
    }
 
    onDeactivate(e)
    {
     // alert(1);
      if(myGlobals.getCookie(window.location.pathname) == ''){
            document.body.scrollTop = 0;
           
        }else{
           setTimeout(()=>{
         //    alert(2);
            document.documentElement.scrollTop = Number(myGlobals.getCookie(window.location.pathname));
             if(document.documentElement.scrollTop == 0){
               document.body.scrollTop = Number(myGlobals.getCookie(window.location.pathname));

             }
           },2500);
            
        }
       
    }

constructor(private route:ActivatedRoute,private cons:RouterModule,public Location:Location,private router: Router,private AuthService:AuthService){


 router.events.subscribe((val) => {
          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;
        }
    });
 
  this.router.events
        .filter(e => e instanceof NavigationStart)
        .pairwise().subscribe((e:any) => {
            console.log(e,'pairwise');
        //    alert(window.location.pathname);
          //  alert(document.body.scrollTop);
            if(e[0].url == '/login'){

            }else if(e[0].url == e[1].url){

            }else{

              var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
              myGlobals.setCookie(e[0].url,scrollTop);
              var cookies = document.cookie.split(";");
              if(cookies.length > 2){
                for(var i = 0;i < cookies.length;i++){
                  myGlobals.deleteCookie('')
                }
              }
            }
        });

if(window.location.pathname == "/login" || window.location.pathname == "/please-help"){

    this.hideHeader = false;
//    console.log("hideHeader1 true");

}else{

this.hideHeader = true;

}
}

}

Share Improve this question edited Aug 13, 2018 at 6:25 asked Aug 10, 2018 at 14:16 Gaurav Rathee 4774 silver badges12 bronze badges

1 can you post the app.ponent.ts please – Sepultura Commented Aug 10, 2018 at 14:18
The error is in src/app/app.ponent.ts line 60 can you post it here – Reza Commented Aug 10, 2018 at 14:28
I Have added the app.ponent.ts in the question. – Gaurav Rathee Commented Aug 13, 2018 at 6:26
@GauravRathee chec my answer if it resolves your issue. – Niladri Commented Aug 13, 2018 at 7:00

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

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;
      }

});

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.

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./angular/angular/issues/14976 and documentation on router events

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angular router issue when upgrading from angular 2 to angular 4.4 - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)