【问题标题】：Angular Components not known inside router outlet路由器插座内未知的角度组件
【发布时间】：2021-11-07 15:46:46
【问题描述】：

上下文

我用这个配置创建了一个 Angular 应用程序：

? What name would you like to use for the new workspace and initial project? test-route
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss

我创建了两个组件，非常简单

    import { Component } from '@angular/core';
    
    @Component({
        selector: 'app-first',
        templateUrl: './first.component.html',
    })
    export class FirstComponent { }

在 html 里面只有一个简单的文本

First Component

seconde 组件基本相同，但我将 First 替换为 Second。

我为我的第一个组件创建了一条路线。

    const routes: Routes = [
      { path: 'first-component', component: FirstComponent },
    ];

我想做什么

然后我想在第一个的 html 中添加我的第二个组件

    First Component
    <app-second></app-second>

我还在 app.module.ts 中添加了我的第二个组件

    @NgModule({
      declarations: [
        AppComponent,
        SecondeComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

问题

当我这样做时，我有一个错误

错误 NG8001：'app-second' 不是已知元素：

如果“app-second”是一个 Angular 组件，则验证它是该模块的一部分。

如果“app-second”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中禁止显示此消息。

我还尝试将第二个组件直接添加到我的app.component.html 中，并且没有错误。如何使用路由中的自定义组件？

这是stackblitz的一个例子

【问题讨论】：

标签： angular router-outlet

【解决方案1】：

如果您还在AppModule 中的declarations 数组中添加FirstComponent，则不会出现错误

declarations: [AppComponent, SecondeComponent, FirstComponent],

【讨论】：