Angular2: Reloading geroutet Modul nicht holen js und CSS-Dateien

Question

Ich lerne angular2 durch ein einfaches Projekt verweisend angular website. Abhängigkeiten werden mit npm installiert und ein Lite-Server wird wie im Tutorial für die Veröffentlichung verwendet.

Jetzt Codierung alles in einem einzigen App-Modul zusammen mit einem Routing-Modul. Routing ist so konfiguriert, wie

RouterModule.forRoot([ 
    { 
     path: 'dashboard', 
     component: DashboardComponent, 
     children: [ 
     { path: 'profile', component: ProfileComponent }, 
     { path: 'transaction', component: TransactionFormComponent }, 
     { path: '', redirectTo: 'transaction', pathMatch: 'full' } 
     ] 
    }, 
    { path: 'login', component: LoginFormComponent }, 
    { path: '', redirectTo: 'login', pathMatch: 'full' } 
]) 

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule) 
    .then(success => console.log(`Bootstrap success`)) 
    .catch(err => console.error(err)); 

app.module.ts

@NgModule({ 
    imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule ], 
    declarations: [ AppComponent, LoginFormComponent, DashboardComponent, 
        ProfileComponent, TransactionFormComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

index.html

Alles funktioniert gut:

• localhost: 3000 lädt Login-Seite

• Erfolgreiche Login Lasten Transaktion Komponente standardmäßig (Now Browser url Registerkarte zeigt localhost: 3000/Armaturenbrett/Transaktion)

• Die Ansicht wird mit Stilen innerhalb style.css

gerendert 210

• Kann zu Profilkomponente navigieren.

Außer:

Auf Nachladen localhost: 3000/Armaturenbrett/Transaktions Seite von Browser Reload-Button klicken, zeigt es "Loading ...". Browser-Konsole zeigt den Fehler

GET 
http://localhost:3000/dashboard/node_modules/core-js/client/shim.min.js [HTTP/1.1 404 Not Found 1ms]  
GET 
http://localhost:3000/dashboard/node_modules/zone.js/dist/zone.js [HTTP/1.1 404 Not Found 17ms]  
GET 
http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 12ms]  
GET 
http://localhost:3000/dashboard/systemjs.config.js [HTTP/1.1 404 Not Found 12ms]  
GET 
http://localhost:3000/dashboard/node_modules/bootstrap/dist/css/bootstrap.min.css [HTTP/1.1 404 Not Found 13ms]  
GET 
http://localhost:3000/dashboard/style.css [HTTP/1.1 404 Not Found 13ms]  
GET 
http://localhost:3000/dashboard/node_modules/systemjs/dist/system.src.js [HTTP/1.1 404 Not Found 2ms]  
GET 
http://localhost:3000/dashboard/systemjs.config.js [HTTP/1.1 404 Not Found 0ms]  
ReferenceError: System is not defined 

Ich sehe localhost: 3000/Armaturenbrett/.. ist nicht die genaue Lage.

Warum das passiert?

Was ist die Lösung?

Auf weitere Forschung, erfüllt mit vielen Szenarien ohne Seite laden. Ich denke, Seite wird für mich geladen, aber nicht js und CSS-Dateien. Also keine Systemjs Datei auch, deshalb ist Seite nicht gerendert.

Auch bezeichnet this.

Hinweis: hinzugefügt <base href="/"> in index.html

Answer 1

Sie haben Ihre <base href="/"> über dem Skript und Link-Tags im index.html zu platzieren, da der Browser von oben nach unten gelesen.Er nähert sich zunächst den Tags script und link und beginnt mit der Verarbeitung dieser Tags. Danach findet er das base Tag, aber dann ist es schon zu spät und das ist, wenn der Browser merkt, dass er ein Idiot dafür ist, diese Dateien schon zu holen, aber auch dir die Schuld dafür gibt, dass er ihn nicht früher über den base Standort benachrichtigt hat. Nur eine Möglichkeit, dies für Sie zu beheben, besteht darin, ihm zu helfen und das Tag base über alle Ressourcen-Abruf-Tags zu setzen.