CustomReuseStrategy nicht korrekt Komponentennamen Druck, wenn webpack für Produktionsbetrieb in shouldReuseRoute Implementierung mit

Question

ich CustomReuseStrategy verwende und bezog https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5

shouldReuseRoute umzusetzen, habe ich das Konzept bin mit so skizzierte:

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

Diese funktioniert in der Entwicklungsumgebung sehr gut, in der Produktionsumgebung werden Komponentennamen jedoch nicht korrekt gedruckt. Wenn ich Produktionsumgebung sage, meine ich den Fall, wenn ich das Webpack benutze und den Client erstelle und den Build auf den Server kopiere und laufe. In diesem Fall werden alle Komponentennamen als Buchstabe 't' gedruckt.

Warum wird als 't' gedruckt? Machst du eine Webpack-Komprimierung? Wie erhalte ich die korrekten Komponentennamen bei der Verwendung von Webpack? Wenn es keine Möglichkeit gibt, mit webpack korrekte Komponentennamen zu erhalten, wie sonst kann ich diese Bedingung ändern, so dass ich entscheiden kann, ob resueRoute abhängig von der Komponente?

Answer 1

Das Folgen dieses Handbuchs brachte mich auch für eine Weile fest, aber dies zu tun schien mein Problem zu lösen. Der Grund, warum nur "t" gedruckt wird, ist, dass eckle das Javascript verkleinert, um die Bundle-Größe beim Versand über ein Netzwerk drastisch zu reduzieren. Das einzige Problem ist, dass dies auch Klassennamen zu ändern scheint, so dass Dinge, die von Klassennamen als Text abhängig sind, nicht mehr funktionieren. Die Lösung ist das.

Statt mit

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

, die den Komponenten Namen als Text verwendet, und nicht verwenden:

import DetailSameComponent from {...} 

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

, die einen Verweis auf die Komponente selbst nutzt.

TLDR: Swap name = 'ComponentNameAsText'-future.component = Komponente