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

Question

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

Answer 1

Your project is configured to start the Angular application with a standalone component (in server.ts). Hence, you don't need to bootstrap the application with AppModule (bootstrapModule) in main.ts.

main.ts: Remove whole platformBrowserDynamic().bootstrapModule(AppModule) line

As you bootstrap the application with the standalone component, you can import AppModule (to import non-standalone component(s)) in the appConfig as below:

app.module.ts

@NgModule({
  declarations: [
    GifComponent,
    GifDetailComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    RouterModule, // Add RouterModule to imports array
  ],
  providers: []
})
export class AppModule { }

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { AppModule } from './app.module';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(),
  importProvidersFrom(AppModule)]
};

Besides, you should import these standalone components in AppComponent too.

app.component.ts

import { NgFor } from '@angular/common';
import { Component } from '@angular/core';
import { Router, RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true, // Add this line
  imports: [RouterLink, RouterOutlet, NgFor]
})
export class AppComponent { ... }