我该如何修复组件AppComponent是独立的，并且不能在NgModule中声明？

Question

分享我的app.module代码：

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 { }

应用程序组件

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));

如果我删除独立组件，我会收到此错误消息：_AppComponent 组件未标记为独立

有什么选择我应该做什么？

我尝试删除独立组件，但收到另一条错误消息。

这里还有一个 github 链接：https://github.com/BekaEn/GifApp

Answer 1

您的项目配置为使用独立组件（在 server.ts 中）启动 Angular 应用程序。因此，您不需要使用

main.ts

中的

AppModule

(bootstrapModule) 来引导应用程序。我建议删除 main.ts 文件。

当您使用独立组件引导应用程序时，您可以在

AppModule

中导入

appConfig

（以导入非独立组件），如下所示：

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

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

此外，您也应该在

AppComponent

中导入这些独立组件。

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 { ... }