Angular项目中'app-todos'组件无法识别的问题求助

问题场景 #

我在搭建Angular待办事项项目时遇到了组件无法识别的错误，以下是我的代码和报错信息：

1. todos.component.ts文件

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

@Component({
  selector: 'app-todos',
  standalone: true,
  imports: [],
  templateUrl: './todos.component.html',
  styleUrl: './todos.component.css'
})
export class TodosComponent implements OnInit{
  constructor(){
  }
  ngOnInit(): void {
  }
}

2. app.component.ts文件

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Todos List: Make Yourself Remind';
}

3. app.component.html文件

<div>
  <h1>{{title}}</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam doloribus omnis aspernatur?</p>
  <app-todos></app-todos>
</div>

报错信息

X [ERROR] NG8001: 'app-todos' is not a known element:
1. If 'app-todos' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'app-todos' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message. [plugin angular-compiler]

src/app/app.component.html:4:2:
4 │   <app-todos></app-todos>
╵   ~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:9:15:
9 │   templateUrl: './app.component.html',
╵                ~~~~~~~~~~~~~~~~~~~~~~

Application bundle generation failed. [6.155 seconds]
Watch mode enabled. Watching for file changes...

我完全不知道为什么会出现这个错误，求帮忙解决！

问题分析与解决方案 #

别担心，这是Angular独立组件模式下的典型问题，原因很明确：

你已经将TodosComponent标记为独立组件（standalone: true），这种组件不需要在NgModule中注册，但如果要在另一个组件（比如AppComponent）的模板里使用它，必须在使用方组件的imports数组中显式导入该组件。你的AppComponent模板里用了<app-todos>标签，但AppComponent的imports里并没有包含TodosComponent，所以Angular无法识别这个组件标签。

具体修复步骤：

修改app.component.ts文件，完成两个操作：

1. 导入TodosComponent类
2. 将TodosComponent添加到imports数组中

修改后的代码如下：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
// 新增：导入TodosComponent
import { TodosComponent } from './todos.component';

@Component({
  selector: 'app-root',
  standalone: true,
  // 新增：把TodosComponent加入imports数组
  imports: [CommonModule, RouterOutlet, TodosComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Todos List: Make Yourself Remind';
}

原理说明

在Angular的独立组件体系中，组件的依赖关系是显式声明的：如果组件A要使用组件B，组件A必须在自身的imports数组中导入组件B（无论组件B是否为独立组件）。这样Angular才能正确解析模板中的组件标签，避免出现NG8001这类未知元素错误。

修改完成后，重新运行ng serve，这个错误就会消失啦！

备注：内容来源于stack exchange，提问作者Piyush Pandita