Angular Universal+Spring生产环境报错：找不到function(){}的NgModule元数据

这问题我之前帮同事排查过类似的，核心是Angular Universal的服务端bundle在Spring环境加载时，NgModule的引用出现了异常，导致框架找不到正确的模块元数据。给你几个针对性的排查和解决步骤：

1. 检查Angular生产构建的配置与产物 #

首先要确保server bundle没有被错误优化导致模块丢失：

• 打开angular.json，检查server的生产构建配置，临时关闭optimization测试（有些情况下过度优化会把模块元数据摇掉）：

  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/server",
      "main": "src/main.server.ts",
      "tsConfig": "src/tsconfig.server.json"
    },
    "configurations": {
      "production": {
        "optimization": false, // 临时关闭验证
        "outputHashing": "media",
        "sourceMap": false,
        "namedChunks": false,
        "extractLicenses": true,
        "vendorChunk": false
      }
    }
  }
  

• 重新执行完整的生产构建命令：

  ng build --prod && ng run your-project-name:server:production
  

• 去生成的dist/server目录下，查看对应的主JS文件（比如main.xxx.js），搜索AppServerModule，确保它是正确的模块引用，而不是被替换成了空函数function(){}。

2. 验证Spring的资源加载配置 #

你已经替换了dist/server到../resources/templates/webapp，要确保Spring没有错误处理这些资源：

• 检查Spring的WebMvcConfigurer配置，确保资源映射正确，且没有对JS文件做额外压缩或修改：

  @Configuration
  public class WebConfig implements WebMvcConfigurer {
      @Override
      public void addResourceHandlers(ResourceHandlerRegistry registry) {
          registry.addResourceHandler("/**")
                  .addResourceLocations("classpath:/templates/webapp/")
                  .setCachePeriod(0); // 开发阶段关闭缓存，生产再调整缓存策略
      }
  }
  

• 启动Spring后，直接访问服务端bundle的URL（比如http://localhost:8080/main.xxx.js），确认返回的内容是完整的、未被篡改的Angular bundle代码。

3. 检查Angular Universal的启动逻辑 #

确保服务端bootstrap的是正确的模块：

• 打开src/main.server.ts，确认bootstrap函数里渲染的是AppServerModule：

  import { enableProdMode } from '@angular/core';
  import { environment } from './environments/environment';
  import { AppServerModule } from './app/app.server.module';
  import { renderModule } from '@angular/platform-server';
  
  if (environment.production) {
    enableProdMode();
  }
  
  export function bootstrap() {
    return renderModule(AppServerModule, {
      document: '<app-root></app-root>',
      url: '/'
    });
  }
  

• 同时检查app.server.module.ts，确保它正确导入了ServerModule和AppModule：

  import { NgModule } from '@angular/core';
  import { ServerModule } from '@angular/platform-server';
  import { AppModule } from './app.module';
  import { AppComponent } from './app.component';
  
  @NgModule({
    imports: [
      AppModule,
      ServerModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppServerModule {}
  

4. 排查依赖版本冲突 #

版本不匹配是这类元数据错误的常见诱因：

• 打开package.json，确保@angular/core、@angular/platform-server、@angular-devkit/build-angular等核心Angular包的版本完全一致（比如都是16.2.x）。
• 如果版本不一致，执行npm install更新到统一版本，然后清空dist和node_modules，重新构建。

如果以上步骤都试过还是不行，可以尝试删除node_modules、package-lock.json和dist目录，重新安装依赖后再构建，有时候缓存的旧文件会导致奇怪的问题。

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