Angular 2 Anwendung mit Webpack

Question

Earilier Ich hatte eine Probe Angular 2-Anwendung mit System JS zum Laden von Modulen entwickelt, und es war in Ordnung.

Jetzt möchte ich Webpack Modul Bundler anstelle von System JS verwenden, und ich habe entsprechende Änderungen vorgenommen.

Jetzt, wenn ich Anwendung im Browser ausführen, zeigt es unten Fehler in der Konsole an.

"Cannot find primary outlet to load 'HomeComponent' Error: Cannot find primary outlet to load 'HomeComponent'"

unter meinem Root-Modul-Code-Routing

RouterModule.forRoot([ 
       {path:'' , component:HomeComponent}, 
       {path:'acategories/:id/products/:pid' , component:ProductComponent}, 
       //{path:'acategories/productsx/:pid' , component:ProductComponent}, 
       {path:'acategories/:id/products' , component:ProductsComponent},     
       {path:'acart' , component:CartComponent}, 
       {path:'about' , component:AboutComponent}, 
       {path:'aorders' , component:OrderDetailsComponent}, 
       {path:'asearch' , component: ProductSearchComponent}, 
       {path:'**',component:PageNotFoundComponent} 
      ]), 

Im Folgenden meine Wurzel-Code-Komponente verwandt ist

@Component({  
    selector:'my-app', 
    templateUrl: './app.component.html' 

}) 

app.component.html hat

... 
<router-outlet></router-outlet> 
... 

und das ist mein Home-Komponentencode

@Component({ 
selector:'', 
templateUrl:'./home.component.html' 
}) 

Alle diese Dateien befinden sich im selben Ordner. Irgendeine Idee, was geändert werden muss.

Answer 1

Halten Sie den Selektor der Home-Komponente nicht leer und versuchen Sie ihn irgendwo im Html zu verwenden.

Answer 2

Es war in meinen Komponenten templateUrl Pfad Problem, hatte

@Component({  
selector:'my-app', 
templateUrl: './app.component.html' 

}) 

zu

@Component({  
selector:'my-app', 
templateUrl: './app/app.component.html' 

}) 

Nach der Verwendung von Fiedler zu ändern, um zu überprüfen, was vom Server zurückgegeben wurde, war in der Lage, das Problem zu identifizieren.