Fehler beim Aktualisieren der Kinderkomponente Angular2

Question

Hier ist mein Modulcode. Also geht meine App so: login (drücke die Taste um zum Dashboard zu gelangen) -> Dashboard (drücke den Link um zur Kinderkomponente zu gelangen) -> online/offline Komponente.

Sie sind alle auf der gleichen Seite.

Die Art und Weise ich sie navigieren:

this.router.navigate(['/dashboard'] 

routerLink= '/dashboard/online 

routerLink= '/dashboard/offline 

app.module.ts

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     JsonpModule, 
     RouterModule.forRoot([ 
     { 
      path: 'login', 
      component: LoginComponent 

     },{ 
      path: 'dashboard', 
      component: DashboardComponent, 
      children: [ 
       { 
        path: 'online', 
        component: OnlineComponent 
       },{ 
        path: 'offline', 
        component: OfflineComponent 
       },{ 
        path: '', 
        redirectTo: 'online', 
        pathMatch: 'full' 

       } 
      ] 
     },{ 
      path: '', 
      redirectTo: '/login', 
      pathMatch: 'full' 
     } 
     ]) 
    ], 

Es funktioniert für das Routing in Ordnung. Aber wenn ich die Seite aktualisiert habe, zeigt die URL-Leiste localhost: 3000/dashboard/online an. Die Seite wird nach dem Aktualisieren nicht geladen. Die Konsole zeigt einen solchen Fehler:

error at GET http://localhost:3000/dashboard/node_modules/core-js/client/shim.min.js 
error at GET http://localhost:3000/dashboard/node_modules/zone.js/dist/zone.js 
error at GET 
http://localhost:3000/dashboard/node_modules/reflect-metadata/Reflect.js 
error at GET http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js 
Uncaught ReferenceError, system is not defined. 

Ich denke, es ist die Art und Weise zu tun hat, ich die Kinder Komponente gesetzt oder ich könnte brauchen base href in Dashboard-Komponente hinzuzufügen, da es Kinder Komponenten.

Bitte helfen Sie mir dabei.

Vielen Dank.

Answer 1

Dies könnte mit dem angularen Router-Problem im Zusammenhang mit Vor-/Zurückpfeilen und Auffrischen zu tun haben. Ich hatte ein sehr ähnliches Problem.

Ich weiß zwar nicht, ob das geht, aber probiere das in deinem app.module, es schaltet die Strategie für den Standort zurück auf die gute alte Hashtag-Sache (so sehen URLs wie http://foo/#/bar statt nur http://foo/bar aus). Sobald ich dies getan hatte, verschwanden alle Auffrischungs- und Vorwärts-/Rückwärts-Nav-Probleme (zum Beispiel, wenn ich von meiner Site zu www.amazon.com ging und dann den Zurück-Pfeil drückte, würde der Server mit Tonnen von "Nicht-Funds" und antworten so weiter):

// other imports 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 

@NgModule({ 
    declarations: [ ... ], 
    imports: [ ... ], 
    providers: [ 
    {provide: LocationStrategy, useClass: HashLocationStrategy} 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }