How to fix AppComponent is standalone, and cannot be declared in an NgModule?

Sharing my app.module code:

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { GifComponent } from '../gif/gif.component';
import { GifDetailComponent } from '../gif/gif-detail.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { app } from '../../server';

@NgModule({
declarations: [
AppComponent,
GifComponent,
GifDetailComponent,
],
imports: [
BrowserModule,
CommonModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent] // Bootstrap AppComponent
})
export class AppModule { }


app.component:

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
standalone: true, // Add this line
})
export class AppComponent {
title = 'compiled';
gifs = [
{ title: 'GIF1', src: 'assets/gif1.gif' },
{ title: 'GIF2', src: 'assets/gif2.gif' },
// Gifs
];

constructor(private router: Router) {}

redirectToGif(gif: { title: string, src: string }) {
this.router.navigate(['/gif', gif.title]);
}
}


main.ts:

import { enableProdMode, ApplicationRef } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component'; // Import AppComponent
import { environment } from './environment';

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

platformBrowserDynamic().bootstrapModule(AppModule)
.then(moduleRef => {
const applicationRef = moduleRef.injector.get(ApplicationRef);
const componentRef = applicationRef.bootstrap(AppComponent); // Bootstrap AppComponent
})
.catch(err => console.error(err));


If I delete the standalone component, I'm getting this error message:

The AppComponent component is not marked as standalone
​

Any options what should I do?

I tried to remove the standalone component but I'm getting another error message.

Here is a GitHub link: https://github.com/BekaEn/GifApp

Continue reading...