Angular 15编译正常但浏览器空白，资源404问题求助

核心问题分析 #

你的项目存在两个直接导致故障的致命问题：

1. 重复定义AppModule：app.module.ts和app.component.ts中各有一个AppModule，Angular编译时混淆了入口模块，导致打包后资源路径错乱、根组件无法正常启动。
2. 根模块未配置启动组件：app.module.ts的@NgModule中bootstrap是空数组，Angular不知道要启动哪个根组件，完全无法渲染页面。

具体修复步骤 #

1. 删除app.component.ts中的冗余AppModule #

app.component.ts只需要保留AppComponent的定义即可，多余的模块定义完全不必要，修改后代码如下：

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

@Component({  
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

2. 修复app.module.ts的bootstrap配置 #

在app.module.ts的@NgModule中，将bootstrap数组改为[AppComponent]，确保Angular知道要启动的根组件，修改后代码：

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { ContactComponent } from './pages/contact/contact.component';
import { NavigationComponent } from './components/navigation/navigation.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { FooterComponent } from './components/footer/footer.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ContactComponent,
    NavigationComponent,
    DashboardComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    NgbCollapseModule
  ],
  providers: [],
  bootstrap: [AppComponent] // 必须指定根组件
})
export class AppModule { }

3. 验证main.ts的入口配置 #

确保src/main.ts正确导入并启动app.module.ts中的AppModule，标准代码如下：

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

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

4. 清理并重新编译项目 #

执行以下命令清理缓存并重新构建：

# 清理旧构建文件
rm -rf dist
# 重新安装依赖（可选，若存在依赖冲突）
npm install
# 启动开发服务器
ng serve

资源404的原因说明 #

当Angular无法确定正确的入口模块时，打包过程会生成错误的资源引用路径，甚至无法生成必要的启动代码，导致浏览器请求的config.js、styles.css等资源不存在，返回404状态码。修复模块定义后，Angular会正确生成所有资源并配置正确的引用路径。

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