Question

我遵循与官方migrating_documentation中提到的步骤相同的步骤。

不幸的是，当我将代码从角度2迁移到角度4.4时，我遇到了一个问题。该问题可能与@ angular / router有关。

但是，代码似乎运行良好，但是我无法进行构建。任何建议将不胜感激。

终端中显示错误：

@XmlRootElement
public class User {
   @XmlElement
   private int id;
}

Package.json

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'.

app.component.ts

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

Answer 1

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

});

Answer 2

当您订阅路由器事件时，将发出不同类型的事件：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上进行了过滤。

Answer 3

从您的代码来看，您似乎在尝试延迟加载期间访问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 和路由器事件的文档

从角度2升级到角度4.4时出现角度路由器问题

3 个答案: