扩展 Angular 框架类 RouteReuseStrategy 时出错

Posted 2023-03-13

【中文标题】扩展 Angular 框架类 RouteReuseStrategy 时出错

【英文标题】：Error when extending an angular framework class RouteReuseStrategy

【发布时间】：2018-05-11 02:15:28

【问题描述】：

我的问题有两个方面。要解决的错误是，当我使用自定义路由重用策略时，当我使用工具覆盖角度路由器类 RouteReuseStrategy 并且当我使用扩展关键字时，策略不会被触发，

UMSClient:32 错误：TypeError：对象原型可能只是一个对象或 null：未定义 在 setPrototypeOf() 在 __extends (http://localhost:8000/app/UMSClient/com/ipc/ums/modules/shared/CustomRouteReuse.service.js:8:13) 在评估 (http://localhost:8000/app/UMSClient/com/ipc/ums/modules/shared/CustomRouteReuse.service.js:35:17) 执行时 (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 和系统 js 框架。当我将应用程序复制到基于 webpack 的 angular cli 时，没有问题并且路由策略被正确触发。

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

使用gulp编译

gulp.task("编译", () => 让 tsResult = gulp.src("app/**/*.ts") .pipe(sourcemaps.init()) .pipe(tsc(tsProject)); 返回 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",

“引导程序”：“^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",

“反射元数据”：“^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",

“精简服务器”：“^2.2.2”，

"tslint": "~5.8.0",

“打字稿”：“~2.6.1”，

“打字”：“^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 构建过程的人指导我解决问题。

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

感谢您的宝贵时间。

【参考方案1】：

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

谢谢，