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

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

Continue reading...