Angular 路由器插座内的组件未知

Question

上下文

我使用此配置创建了一个 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 组件基本相同，但我用 Second 替换了 First。

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

    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 { }

问题

当我这样做时出现错误

error NG8001: 'app-second' is not a known element:

If 'app-second' is an Angular component, then verify that it is part of this module.

If 'app-second' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

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

这里有一个关于 stackblitz

的例子

Answer 1

如果您也将 FirstComponent 添加到 AppModule

中的 declarations 数组，则不会出现错误

declarations: [AppComponent, SecondeComponent, FirstComponent],

Angular 路由器插座内的组件未知

Angular Components not known inside router outlet

angular

router-outlet

上下文

我想做什么

问题