Angular报错TS-996008：TasksComponent无法在NgModule中声明的解决求助

错误原因 #

TS-996008错误明确指出：被标记为独立组件（standalone）的TasksComponent，不能在NgModule的declarations数组中声明，必须改为导入方式，或者取消其独立组件标记。

解决方案 #

根据你的项目架构需求，选择以下任意一种方案：

方案1：将TasksComponent改为非独立组件 #

如果你的项目基于传统NgModule架构，不需要使用独立组件特性：

1. 确认TasksComponent的@Component装饰器中没有standalone: true配置（从你提供的代码看已满足，若实际代码误加则直接删除该配置）：

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

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css']
})
export class TasksComponent implements OnInit {
  tasks: { name: string; completed: boolean }[] = [];
  newTask: string = '';

  ngOnInit() {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      this.tasks = JSON.parse(savedTasks);
    }
  }

  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push({ name: this.newTask.trim(), completed: false });
      this.newTask = '';
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  }

  deleteTask(index: number) {
    this.tasks.splice(index, 1);
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
}

2. 保留AppModule的declarations配置不变，清理Angular缓存并重启项目：

ng cache clean
ng serve

方案2：保留TasksComponent为独立组件（Angular 14+推荐） #

如果你的项目使用Angular 14+，想要启用独立组件特性：

1. 更新TasksComponent，添加standalone: true标记，并导入组件依赖的FormsModule（因用到双向绑定）：

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

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css'],
  standalone: true,
  imports: [FormsModule] // 组件依赖的模块在此导入
})
export class TasksComponent implements OnInit {
  tasks: { name: string; completed: boolean }[] = [];
  newTask: string = '';

  ngOnInit() {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      this.tasks = JSON.parse(savedTasks);
    }
  }

  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push({ name: this.newTask.trim(), completed: false });
      this.newTask = '';
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  }

  deleteTask(index: number) {
    this.tasks.splice(index, 1);
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
}

2. 修改AppModule，从declarations中移除TasksComponent，并将其添加到imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TasksComponent } from './tasks/tasks.component';

@NgModule({
  declarations: [
    AppComponent
    // 移除TasksComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    TasksComponent // 导入独立组件
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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