Angular构建注册登录页面时NG8001错误排查求助

问题根源 #

你的AppComponent被标记为standalone: true（独立组件），而RegisterComponent仅在AppModule的declarations中注册。独立组件不会自动读取NgModule里的组件声明，所以模板里使用<app-register>时，Angular找不到这个组件，抛出NG8001错误。

两种解决方案 #

方案一：在独立组件中直接导入RegisterComponent #

修改app.component.ts，把RegisterComponent加入到imports数组中：

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

@Component({ 
    selector: 'app-root', 
    standalone: true, 
    imports: [CommonModule, RouterOutlet, RegisterComponent], // 加入RegisterComponent
    templateUrl: './app.component.html', 
    styleUrl: './app.component.css' 
}) 
export class AppComponent { title = 'frond-end'; } 

方案二：取消AppComponent的独立模式，用NgModule统一管理 #

修改app.component.ts，移除standalone: true和imports配置，让它完全由AppModule管理：

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrl: './app.component.css' 
}) 
export class AppComponent { title = 'frond-end'; } 

这样AppComponent就能识别到AppModule的declarations中注册的所有组件，包括RegisterComponent。

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