CODEWITHSUNDEEP
angularangular-ui-routerangular2-router
user1892775
user1892775

Reputation: 2111

CustomReuseStrategy not printing correct component names when using webpack for production mode in shouldReuseRoute implementation

I am using CustomReuseStrategy and was referring https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5

to implement shouldReuseRoute, I am using the concept as outlined:

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    let name = future.component && (<any>future.component).name;
    return super.shouldReuseRoute(future, curr) && name !== 'DetailSameComponent';
  }

This works pretty well in the development environment, however in the production environment, component names don't print correctly. When I say production environment, I mean the case, when I use the webpack and build the client and copy the build to server and run. In this case, all component names print as letter 't'.

why does it print as 't'? Is it doing some webpack compression? How do i get the correct component names when using webpack? If there is no way I can get correct component names using webpack, how else can I modify this condition so I can decide whether to resueRoute depending on the component?

Upvotes: 1

Views: 161

Answers (1)

Matthew Mullin
Matthew Mullin

Reputation: 7646

Following this guide also got me stuck for a while but doing this seemed to fix my problem. The reason it only prints "t" is because angular minifies the javascript as to drastically reduce the bundle size when shipping it over a network. Only problem is this seems to change class names as well, so things dependant on class names as text will not work anymore. The solution is this.

Instead of using 

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    let name = future.component && (<any>future.component).name;
    return super.shouldReuseRoute(future, curr) && name !== 'DetailSameComponent';
}

which uses the components name as text, rather use:

import DetailSameComponent from {...}

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return super.shouldReuseRoute(future, curr) && future.component !== DetailSameComponent;
}

which uses a reference to the component itself.

TLDR: Swap name = 'ComponentNameAsText' to future.component = Component

Upvotes: 1

Related Questions