migrating from angular 5 to angular 19

I am migrating old angular project from version 5 to version 19. I have indentified all compatible and dependent libraries and able to migrate code. However I keep getting standanlone error.

The project is based on NgModule and I want to have as is, and not need standalone feature as now.

ng build
√ Browser application bundle generation complete.

Error: src/app/app.module.ts:7:5 - error NG6008: Component AppComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?

7 AppComponent // Declare AppComponent here


To drill down the issue, I created minimal project from actual and reproduded the issue. I added standalone false in the angular.json, clear cache, removed node-modules, verified ts for no standalone files. However this has become nightmare for me as from last two day I am not able to fix it.

angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"resource-planning": {
"projectType": "application",
"root": "src",
"sourceRoot": "src",
"prefix": "app",
"schematics": {
"@schematics/angular:component": {
"standalone": false
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/resource-planning",
"index": "src/index.html",
"main": "src/main.ts",
//"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/primeng/resources/themes/omega/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
"scripts": []
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "resource-planning:build"
},
"configurations": {
"production": {
"buildTarget": "resource-planning:buildroduction"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
//"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "./karma.conf.js",
"styles": [
"src/styles.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/primeng/resources/themes/omega/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
"scripts": [],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
}
}


package.json

{
"name": "resource-planning",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^19.0.5",
"@angular/common": "^19.0.5",
"@angular/compiler": "^19.0.5",
"@angular/core": "^19.0.5",
"@angular/forms": "^19.0.5",
"@angular/platform-browser": "^19.0.5",
"@angular/platform-browser-dynamic": "^19.0.5",
"@angular/router": "^19.0.5",
"@fortawesome/fontawesome-free": "^6.5.0",
"core-js": "^3.32.2",
"ngx-bootstrap": "^19.0.1",
"primeicons": "^7.0.0",
"primeng": "^19.0.1",
"rxjs": "^7.8.0",
"xlsx": "^0.18.5",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^19.0.6",
"@angular/cli": "^19.0.5",
"@angular/compiler-cli": "^19.0.5",
"@angular/language-service": "^19.0.5",
"@eslint/config-array": "^0.19.1",
"@eslint/object-schema": "^2.0.3",
"@types/jasmine": "^4.5.0",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^20.4.0",
"angular-eslint": "19.0.2",
"cypress": "^13.0.0",
"eslint": "^9.16.0",
"glob": "^9.0.0",
"rimraf": "^4.0.0",
"ts-node": "~10.9.1",
"typescript": "~5.6.0",
"typescript-eslint": "8.18.0"
}
}


app.module.ts

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

@NgModule({
declarations: [
AppComponent // Declare AppComponent here
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My Angular App';
}


app-routing.module.ts

import { Routes,RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

@NgModule({
imports: [

],
exports: [RouterModule]
})
export class AppRoutingModule {}


main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

/*platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
*/

console.log('App bootstrapping...');
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error('Error bootstrapping module:', err));

Continue reading...