分享我的 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]);
}
}
主要.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
您的项目配置为使用独立组件(在server.ts中)启动 Angular 应用程序。因此,您不需要使用main.ts
AppModule
中的(bootstrapModule
)来引导应用程序。main.ts:删除整
platformBrowserDynamic().bootstrapModule(AppModule)
行当您使用独立组件引导应用程序时,您可以导入
AppModule
(导入非独立组件),如下appConfig
所示:应用程序模块.ts
应用程序配置.ts
此外,您也应该导入这些独立组件
AppComponent
。应用程序组件.ts