ルータでコンポーネントを使用しているときに、セレクタが要素と一致しませんでした

Question

私はそれほど角度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

Answer 1

私も
最後に私は私がからこれらの成分を除去することにより、エラーを修正したindex.html
に使用していなかったいくつかのコンポーネントをブートストラップことが判明し、このエラーを得ましたAppModuleのブートストラップリスト