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

Question

我不太习惯 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}

应用程序组件.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 的引导列表中删除这些组件来修复错误