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

我不太习惯这样做。我已经写了一个HomeComponent，它对我来说很好。 现在，当我在路由器中使用它时，它将通过组件名称（而不是选择器）显示在中。因此，我的页面输出通过不使用其装饰器中定义的选择器而具有Homecomponent

现在我得到一个警告，选择器“main home”与任何元素都不匹配

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

应用程序模块.ts

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

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

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

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

app.component.html

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

错误/警告

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安装程序测试了相同的设置，没有出现错误。此问题仅适用于网页包设置。请建议如何删除/避免此错误

在plnkr上检查此代码： 我也遇到了这个错误
最后，我发现我引导了index.html中没有使用的一些组件
我通过从AppModule的引导列表中删除这些组件修复了此错误

我也遇到了此错误
最后，我发现我引导了index.html中没有使用的一些组件

---

我通过从AppModule的引导列表中删除这些组件修复了此错误

是否可以将所有代码发布到某个位置？此问题仅适用于webpack请参见下面的链接：是否可以将所有代码发布到某个位置？此问题仅适用于webpack请参见下面的链接：