migration - How to resolve The _AppComponent component is not marked as standalone, but Angular expects to have a standalone com

admin管理员组

文章数量:1419223

I was migrating from standalone component to module based where I changed and even tried to remove standalone in the decorator in the appcomponent, and in main.ts file I imported platformdynamic and bootstrapModule to the main module and in module file I declared the appcomponent and bootstrap it still it's generating runtime error 'Internal server error: NG0907: The _AppComponent component is not marked as standalone, but Angular expects to have a standalone component here. Please make sure the _AppComponent component has the standalone: true flag in the decorator.'

Here is the relevant code:

app.module.ts file:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./appponent";
import { HeaderComponent } from "./header/headerponent";
import { UserComponent } from "./user/userponent";
import { TasksComponent } from "./tasks/tasksponent";

@NgModule({

declarations: [AppComponent],
bootstrap: [AppComponent],
imports:[BrowserModule, HeaderComponent, UserComponent, TasksComponent]
 })
 export class AppModule{

  }

appponent.ts file:

import { Component } from '@angular/core';
import { DUMMY_USERS } from "./dummy-users";

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrl: './appponent.css'
 
  })
 export class AppComponent {}

main.ts file

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

the runtime error which I'm getting is:

I was migrating from standalone component to module based where I changed and even tried to remove standalone in the decorator in the appcomponent, and in main.ts file I imported platformdynamic and bootstrapModule to the main module and in module file I declared the appcomponent and bootstrap it still it's generating runtime error 'Internal server error: NG0907: The _AppComponent component is not marked as standalone, but Angular expects to have a standalone component here. Please make sure the _AppComponent component has the standalone: true flag in the decorator.'

Here is the relevant code:

app.module.ts file:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./appponent";
import { HeaderComponent } from "./header/headerponent";
import { UserComponent } from "./user/userponent";
import { TasksComponent } from "./tasks/tasksponent";

@NgModule({

declarations: [AppComponent],
bootstrap: [AppComponent],
imports:[BrowserModule, HeaderComponent, UserComponent, TasksComponent]
 })
 export class AppModule{

  }

appponent.ts file:

import { Component } from '@angular/core';
import { DUMMY_USERS } from "./dummy-users";

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrl: './appponent.css'
 
  })
 export class AppComponent {}

main.ts file

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

the runtime error which I'm getting is:

• angular
• migration

Share Improve this question Follow edited Jan 30 at 3:09 Janvi asked Jan 29 at 11:40 JanviJanvi 2355 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I think i understood your problem.I guess your project is on angular 19.So by default the components are standalone and u need to refer false to make is not stand alone.

and along with that you must take care of the main.server.ts at the root. it's for ssr but I am sure u never touched it. Here is the problem .Solve it accordingly Goto angular.json file and

    // "server": "src/main.server.ts",
    // "outputMode": "server",
    // "ssr": {
    //   "entry": "src/server.ts"
    // }

comment out this section.

make AppComponent standalone to false.

the rest should be okay.Ur code is prefect. Now restart the app , and it should be okay now.

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-root',
  templateUrl: './appponent.html',
  styleUrl: './appponent.css'
  imports: [FormsModule, CommonModule] // <- notice!
})
export class App Component {
  ...

Then update the main.ts with this code:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/appponent';

bootstrapApplication(AppComponent)
  .catch((err) => console.error(err));

Using component as non standalone:

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrl: './appponent.css' // No `standalone: true` here
  standalone: false // <- notice!
})
export class AppComponent {
  ...

本文标签：