选择器在路由器中使用组件时不匹配任何元素

我不太习惯Angular 2路由器。我写了一个HomeComponent，它对我来说工作正常。现在，当我在路由器中使用它时，它显示在组件名称（而不是选择器）中。因此，我的页面输出具有Homecomponent，因为它不使用其装饰器中定义的选择器。选择器在路由器中使用组件时不匹配任何元素

现在我收到一条警告，说明选择器“main-home”与任何元素都不匹配。

请建议我如何消除此错误。我应该改变我的页面组件结构吗？

app.module.ts

import { RouterModule, Routes } from '@angular/router'; 

const routes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'about-us', component: LoginComponent}

app.component.html

<app-header></app-header> 
<main> 
    <router-outlet></router-outlet> 
</main>

home.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'main-home', 
    templateUrl: './home.compoment.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class HomeComponent {}

错误/警告

EXCEPTION: Error in :0:0 caused by: The selector "main-home" did not match any elements 
ErrorHandler.handleError 
ORIGINAL EXCEPTION: The selector "main-home" did not match any elements

/*更新*/

现在我测试了SystemJS设置和没有错误快到了一样。这个问题只与webpack安装有关。请建议如何消除/避免此错误。

检查这个代码在plnkr： https://plnkr.co/edit/MasUPOPbakYULpWIOX6w?p=preview

来源

2016-12-21 Rajan471

您可以将所有的代码发布到某个地方吗？ – Everett

此问题仅限于webpack请参阅下面的链接： https://plnkr.co/edit/MasUPOPbakYULpWIOX6w?p=preview – Rajan471