angular - Angular2 : Omladdning av routad modul hämtar inte js- och css-filer

Jag lär mig Angular2 genom att göra ett enkelt projekt med hänvisning till Angulars webbplats. Beroenden är installerade med npm och en lätt-server används för publicering, som i handledningen.

Nu kodar allt i ett enda appmodul tillsammans med ett routningsmodul. Routing är konfigurerad som

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

<html>
  <head>
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <!-- include bootstrap -->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <base href="/">
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Allt fungerar bra:

  • localhost:3000 laddar inloggningssidan

  • Lyckad inloggning laddar Transaktionskomponenten som standard (Nu visar webbläsarens URL-flik localhost:3000/dashboard/transaction)

  • Vyn renderas med stilar inuti style.css

  • Kan navigera till profilkomponenten.

Förutom:

När man laddar om localhost:3000/dashboard/transaction-sidan genom att klicka på webbläsarens uppdateringsknapp visas "Laddar...". Webbläsarkonsolen visar felet

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

Jag ser att localhost:3000/dashboard/.. inte är den exakta platsen.

Varför händer detta?

Vad är lösningen?

Vid vidare forskning stötte jag på många scenarier där sidan inte laddades. Jag tror att sidan laddas för mig, men inte js- och css-filerna. Så ingen Systemjs-fil heller, det är därför sidan inte renderas.

Också hänvisade till detta.

Notera: lade till <base href="/"> i index.html

Svar #1

Du måste placera din <base href="/"> ovanför script- och link-taggarna i index.html, eftersom webbläsaren läser uppifrån och ner. Han närmar sig först script- och link-taggarna och börjar bearbeta dessa. Efter det hittar han base-taggen, men då är det redan för sent och det är då webbläsaren inser att han har varit en idiot som redan hämtade dessa filer, men skyller dig också lite för att inte ha meddelat honom tidigare om base-platsen. Det enda sättet att fixa detta för dig är att hjälpa honom och placera base-taggen ovanför alla taggar som hämtar resurser.

Relaterade artiklar