Проблема с угловым маршрутизатором при обновлении с angular 2 до angular 4.4

Я выполнил те же шаги, что и в официальном migrating_documentation файла angular.

К сожалению, я столкнулся с проблемой при переносе кода с angular 2 на angular 4.4. Проблема может быть связана с @ angular / router.

Однако код, похоже, работает нормально, но я не могу выполнить сборку. Любое предложение будет оценено.

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

app.component.ts

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.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;

}
}

}

не могли бы вы опубликовать app.component.ts, пожалуйста

Sepultura 10.08.2018 16:18

Ошибка находится в src/app/app.component.ts, строка 60, вы можете опубликовать ее здесь

Reza 10.08.2018 16:28

Я добавил app.component.ts в вопрос.

Gaurav Rathee 13.08.2018 08:26

@GauravRathee проверьте мой ответ, если он решит вашу проблему.

Niladri 13.08.2018 09:00
3
4
1 265
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Когда вы подписываетесь на События маршрутизатора, будут генерироваться разные типы событий: NavigationStart, RouteConfigLoadStart, RouteConfigLoadEnd, RoutesRecognized, GuardsCheckStart ...

Очевидно, у них нет всех одинаковых свойств, и свойство url недоступно на RouteConfigLoadStart, но, например, на NavigationStart или NavigationEnd.

Итак, что вы можете сделать, это filter и subscribe типа событий вроде этого:

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

Вы уже сделали это во второй подписке, вы отфильтровали по NavigationStart.

Из вашего кода похоже, что вы пытаетесь получить доступ к URL-адресу во время ленивой загрузки. Но в Angular 4+ свойство url не существует для событий типа RouteConfigLoadStart и RouteConfigLoadEnd. Вместо этого вы можете отфильтровать событие, чтобы использовать событие NavigationStart, которое расширяет класс RouterEvent и имеет свойство url. Вы можете использовать его, как показано ниже -

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

Вот такая же проблема - https://github.com/angular/angular/issues/14976 и документация по событиям роутера

  1. https://angular.io/api/router/RouteConfigLoadStart
  2. https://angular.io/api/router/NavigationStart
Ответ принят как подходящий

После долгого поиска в google я смог найти решение проблемы. Оба упомянутых выше ответа верны для angular 4, однако в Angular 6 вам необходимо использовать приведенный ниже код

Угловой 6

импортировать ниже упомянутый модуль

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

и использовать трубу

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

});

Другие вопросы по теме