There are two aspects of my question. The error to solve is, when I use custom route reuse strategy the strategy does not get triggerred when I use implements to override angular router class RouteReuseStrategy and when I use extends keyword I get the below exception,
UMSClient:32 Error: TypeError: Object prototype may only be an Object or null: undefined at 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) Error loading 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 ;
}
}
I have a feeling this is related to my compilation and build strategy. I use a framework developed before me in gulp and system js. When I copy the app to webpack based angular cli, there is no issue and route strategy gets triggered properly.
Details of my build setup:
using gulp to compile
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")); });
the package json is,
"dependencies": { "@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-browser": "~4.3.1",
"@angular/platform-browser-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",
"underscore": "^1.8.3",
"zone.js": "^0.8.5"
},
"devDependencies": {
"concurrently": "^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",
"typescript": "~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"
] }
My specific question is, I dont know what related dependency is causing this run time exception. Somebody with knowledge of gulp build procedure, please guide me to get the issue sorted out.
I browsed stack overflow for the solution to this exception. Every discussion indicates that there is some issue in the order of class hierarchy and in my case, I am using the angular framework class which 100% works fine in webpack angular cli project.
Thanks for your time.
