Angular路由加载的组件内无法识别已声明自定义组件如何解决

首先排查两个核心问题：

1. 组件名拼写错误
   你在app.module.ts的declarations中写的组件名是SecondeComponent，多了一个字母e，正确名称应为SecondComponent，拼写错误会导致组件未被正确注册到模块中。
2. FirstComponent未注册到根模块
   你配置了路由指向FirstComponent，但没有将该组件添加到AppModule的declarations数组中。未被模块注册的组件，其模板内的自定义组件标签无法被Angular正常识别。

修正代码 #

修正后的AppModule代码如下，注意补全组件的导入路径：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// 补全两个组件的导入路径
import { FirstComponent } from './components/first/first.component';
import { SecondComponent } from './components/second/second.component';

@NgModule({
  declarations: [
    AppComponent,
    FirstComponent, // 补加FirstComponent的声明
    SecondComponent // 修正组件名拼写错误
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修改完成后重启项目即可正常在FirstComponent模板中嵌入SecondComponent。

补充说明 #

你直接把<app-second>添加到app.component.html中不报错，是因为AppComponent已经正确注册到AppModule中，在根模块声明过的组件可以访问同模块下其他已声明的组件。

如果你使用的是Angular14+的独立组件（@Component配置中带有standalone: true），则不需要在NgModule中声明组件，只需要在FirstComponent的imports数组中引入SecondComponent即可：

import { Component } from '@angular/core';
import { SecondComponent } from '../second/second.component';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  standalone: true,
  imports: [SecondComponent] // 引入要使用的独立组件
})
export class FirstComponent { }

内容的提问来源于stack exchange，提问作者Gregory Boutte