Angular项目出现NG8001错误：'app-welcome'不是已知元素求助

你的AppComponent设置了standalone: true，属于独立组件，这种组件不依赖NgModule的配置，所以你手动添加的app.module.ts里的declarations对它无效，导致它无法识别app-welcome组件。以下是两种可行的解决方案：

方案一：继续使用独立组件模式 #

1. 将WelcomeComponent改为独立组件，在其@Component装饰器中添加standalone: true并导入必要模块：

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './welcome.component.html',
  styleUrl: './welcome.component.css'
})
export class WelcomeComponent {
  car = 'toyota';
}

2. 在AppComponent的imports数组中引入WelcomeComponent：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';

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

3. 此时app.module.ts可以直接删除，独立组件模式无需依赖NgModule。

方案二：切换回NgModule模式 #

如果想通过app.module.ts管理组件，需要禁用AppComponent的独立模式：

1. 修改app.component.ts，移除standalone: true和imports数组：

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

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

2. 检查main.ts的引导代码，确保是引导AppModule而非AppComponent：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3. 保持welcome.component.ts现有代码不变（不要设置standalone: true）。

额外检查 #

• 确认WelcomeComponent的文件路径正确，AppComponent中导入的./welcome/welcome.component路径无误。
• 执行ng serve重启项目，确保修改生效。

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