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

【问题标题】：The selector did not match any elements while using component in Router在路由器中使用组件时选择器不匹配任何元素
【发布时间】：2017-01-17 00:39:52
【问题描述】：

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

【问题讨论】：

你能把你所有的代码都贴在某个地方吗？
只有 webpack 才有这个问题，请看下面的链接：plnkr.co/edit/MasUPOPbakYULpWIOX6w?p=preview

标签： angular webpack

【解决方案1】：

我也遇到了这个错误
最后我发现我引导了一些在 index.html 中没有使用的组件
我通过从 AppModule 的引导列表中删除这些组件来修复错误

【讨论】：