Angular独立组件导入异常及页面空白问题求助

问题根源 #

你遇到的两个报错核心是：AppComponent被标记为独立组件（standalone: true），但同时又被放到了NgModule的declarations和bootstrap数组中——这两种方式在Angular中互斥，独立组件无需依赖NgModule即可运行，传统组件则需要NgModule来声明和启动。

之前移除AppComponent后页面空白，是因为你的AppModule没有指定任何要启动的根组件，Angular没有渲染入口。

方案一：将AppComponent改为非独立组件（适合熟悉NgModule的新手） #

这种方式保留原有NgModule结构，修改成本低：

1. 修改app.component.ts，移除独立组件配置：

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

@Component({
  selector: 'app-root',
  // 移除 standalone: true 和 imports 数组
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'zomato-clone';
}

2. 修复app.module.ts的语法错误（补上@NgModule的闭合括号），并保留AppComponent在declarations和bootstrap中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { MatFormFieldModule } from "@angular/material/form-field";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    provideFirebaseApp(() => initializeApp({
      apiKey: "YOUR API KEY",
      authDomain: "YOUR AUTH DOMAIN",
      databaseURL: "YOUR DATABASE URL",
      projectId: "YOUR PROJECT ID",
      storageBucket: "YOUR STORAGE BUCKET",
      messagingSenderId: "YOUR SENDER ID",
      appId: "YOUR APP ID",
      measurementId: "YOUR MEASUREMENT ID"
    })),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore())
  ],
  providers: [],
  bootstrap: [AppComponent]
}) // 补上缺失的闭合括号
export class AppModule { }

3. 确保main.ts仍用NgModule启动：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

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

方案二：使用bootstrapApplication启动独立组件（Angular 14+推荐方式） #

这种方式完全抛弃NgModule，使用Angular最新的独立组件模式：

1. 删除app.module.ts文件（无需再用）。

2. 修改main.ts，用bootstrapApplication启动AppComponent，并注入所有依赖：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app-routing.module'; // 导入路由配置
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { importProvidersFrom } from '@angular/core';
import { MatFormFieldModule } from "@angular/material/form-field";

bootstrapApplication(AppComponent, {
  providers: [
    // 配置路由
    provideRouter(routes),
    // 启用动画支持
    provideAnimations(),
    // 配置Firebase
    provideFirebaseApp(() => initializeApp({
      apiKey: "YOUR API KEY",
      authDomain: "YOUR AUTH DOMAIN",
      databaseURL: "YOUR DATABASE URL",
      projectId: "YOUR PROJECT ID",
      storageBucket: "YOUR STORAGE BUCKET",
      messagingSenderId: "YOUR SENDER ID",
      appId: "YOUR APP ID",
      measurementId: "YOUR MEASUREMENT ID"
    })),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    // 导入Material模块（供Login组件使用）
    importProvidersFrom(MatFormFieldModule)
  ]
}).catch(err => console.error(err));

3. 将LoginComponentComponent改为独立组件，以便在AppComponent中导入：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatFormFieldModule } from "@angular/material/form-field";
// 按需导入其他Material模块（如MatInputModule等）

@Component({
  selector: 'app-login-component',
  standalone: true,
  imports: [CommonModule, MatFormFieldModule], // 添加依赖模块
  templateUrl: './login-component.component.html',
  styleUrls: ['./login-component.component.css']
})
export class LoginComponentComponent {
  // 组件逻辑
}

4. 在AppComponent的imports数组中添加LoginComponentComponent：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLinkActive, RouterOutlet, RouterLink } from '@angular/router';
import { LoginComponentComponent } from './login-component/login-component.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule, 
    RouterOutlet,
    RouterLink, 
    RouterLinkActive,
    LoginComponentComponent // 导入Login组件
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'zomato-clone';
}

内容的提问来源于stack exchange，提问作者Nimish Godbole