Question

Earilier我使用System JS为模块加载开发了一个示例Angular 2应用程序，它运行正常。

现在我想使用webpack模块捆绑器而不是系统JS，我已经做了相应的更改。

现在，当我在浏览器中运行应用程序时，它会在控制台中显示以下错误。

“无法找到加载'HomeComponent'的主要插座错误：找不到加载'HomeComponent'的主要插座“

以下是与路由

相关的根模块代码

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}
          ]),

以下是我的根组件代码

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

})

app.component.html有

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

这是我的Home组件代码

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

所有这些文件都在同一个文件夹中。知道需要修改什么。

Answer 1

不要将home组件的选择器保持为空，并尝试在Html中的某处使用它。

Answer 2

我的组件中是templateUrl路径问题，不得不修改

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

})

到

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

})

使用fiddler检查从服务器返回的内容后，能够识别问题。

使用webpack的Angular 2应用程序

2 个答案: