Component TasksComponent is standalone, and cannot be declared in an NgModule

Question

X [ERROR] TS-996008: Component TasksComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead? [plugin angular-compiler]

src/app/app.module.ts:13:4:
  13 │     TasksComponent
     ╵     ~~~~~~~~~~~~~~

I am getting this errr please resolve the issue

  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, // Add TasksComponent here
      ],
      imports: [
        BrowserModule,
        FormsModule, // Import FormsModule for two-way binding
      ],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule {}
// ----and 

Task.component.ts is like this-

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

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css'], // No `standalone: true` here
})
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));
  }
}

Please help me to resolve the issue

Answer 1

I think you are using angular 19, where all components are standalone by default.

You have two options:

Using component as standalone:

Standalone component should not be declared but imported.

If you do not need the module, just directly start using the standalone component, but make sure you have the necessary imports added for it to work.

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

Or you can move the component to the imports array (If you want to keep the module as is).

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule, // Import FormsModule for two-way binding
    TasksComponent, // <- notice!
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Using component as non standalone:

@Component({
  selector: 'app-tasks',
  templateUrl: './tasks.component.html',
  styleUrls: ['./tasks.component.css'], // No `standalone: true` here
  standalone: false // <- notice!
})
export class TasksComponent implements OnInit {
  tasks: { name: string; completed: boolean }[] = [];
  ...

Answer 2

In angular component make standalone as false.

@Component({
standalone: false })