扩展角度框架类RouteReuseStrategy时出错

Question

我的问题有两个方面。要解决的错误是，当我使用自定义路由重用策略时，当我使用implements来覆盖角度路由器类RouteReuseStrategy时，策略不会被触发，当我使用extends关键字时，我得到以下异常，

UMSClient：32错误：TypeError：对象原型可能只是一个Object或null：未定义在setPrototypeOf（）at__extends（http://localhost:8000/app/UMSClient/com/ipc/ums/modules/shared/CustomRouteReuse.service.js:8:13）at eval（http://localhost:8000/app/UMSClient/com/ipc/ums/modules/shared/CustomRouteReuse.service.js:35:17）at execute（http://localhost:8000/app/UMSClient/com/ipc/ums/modules/shared/CustomRouteReuse.service.js:54:14）加载http://localhost:8000/app/main.js时出错

import { RouteReuseStrategy,ActivatedRouteSnapshot,DetachedRouteHandler} 
from '@angular/router';

export class CustomRouteReuseStrategy extends RouteReuseStrategy {

shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }

store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}

shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null ; }

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    console.log("inside shouldReuseRoute...");
  return future.routeConfig === curr.routeConfig ;
}

}

我觉得这与我的编译和构建策略有关。我在gulp和system js中使用了我之前开发的框架。当我将应用程序复制到基于webpack的angular cli时，没有问题，并且路由策略被正确触发。

我的构建设置的详细信息：

• 用gulp编译 gulp.task（“compile”，（）=> {let tsResult = gulp.src（“app / ** / * .ts”）。pipe（sourcemaps.init（））。pipe（tsc（tsProject））; return tsResult.js .pipe（sourcemaps.write（“。”，{sourceRoot：'/ app'}））。pipe（gulp.dest（“build / app”））;}）;
• 包json是， “依赖”：{“@ angular / common”：“~4.3.1”， “@ angular / compiler”：“~4.3.1”， “@ angular / core”：“~4.3.1”， “@ angular / forms”：“~4.3.1”， “@ angular / http”：“~4.3.1”， “@ angular / platform-b​​rowser”：“~4.3.1”， “@ angular / platform-b​​rowser-dynamic”：“~4.3.1”， “@ angular / router”：“~4.3.1”， “@ angular / upgrade”：“~4.3.1”， “@ angular2-material / tabs”：“^ 2.0.0-alpha.8-2”， “@ ng-bootstrap / ng-bootstrap”：“^ 1.0.0-alpha.9”， “angular2-in-memory-web-api”：“0.0.20”， “bootstrap”：“^ 3.3.6”， “core-js”：“^ 2.4.1”， “ng2-bootstrap”：“^ 1.1.16-11”， “ng2-bs3-modal”：“^ 0.10.4”， “ng2-datetime-picker”：“^ 0.9.8”， “ngx-bootstrap”：“^ 2.0.0-beta.8”， “reflect-metadata”：“^ 0.1.3”， “rxjs”：“^ 5.2.0”， “systemjs”：“^ 0.20.19”， “tsd”：“^ 0.6.5”， “下划线”：“^ 1.8.3”， “zone.js”：“^ 0.8.5” }， “devDependencies”：{ “同时”：“^ 3.5.1”， “del”：“^ 3.0.0”， “gulp”：“^ 3.9.1”， “gulp-sourcemaps”：“^ 2.6.1”， “gulp-tslint”：“^ 8.1.2”， “gulp-typescript”：“^ 3.2.3”， “lite-server”：“^ 2.2.2”， “tslint”：“~5.8.0”， “打字稿”：“~2.6.1”， “typings”：“^ 2.1.1”， “ts-node”：“~3.3.0”

tsconfig.json：

{

"compilerOptions": {

"outDir": "build/app",

"target": "es5",

"module": "system",

"moduleResolution": "node",

"sourceMap": true,

"emitDecoratorMetadata": true,

"experimentalDecorators": true,

"removeComments": false,

"noImplicitAny": false

},

 "exclude": [

"gulpfile.ts",

"node_modules"

] }

我的具体问题是，我不知道相关的依赖是什么导致了这个运行时异常。有了gulp构建程序知识的人，请指导我解决问题。

我浏览了堆栈溢出以解决此异常的问题。每个讨论表明在类层次结构的顺序中存在一些问题，在我的例子中，我使用的是角度框架类，它在webpack angular cli项目中100％正常工作。

谢谢你的时间。

Answer 1

问题在于我的工作区结构。我更新了package.json以使用angular version 4.3.0并运行npm install将其下载到node_modules文件夹。但是gulp build正在从另一个node_modules文件夹读取，它正在读取导致问题的角度2版本。当我使用angular 4版本更新实际的node_modules文件夹时，customRouteReuseStrategy开始工作。

谢谢，