Angular Universal部署Firebase时MODULE_MAP注入令牌无提供者错误

这种NullInjectorError: No provider for InjectionToken MODULE_MAP!的问题我之前在部署Angular SSR到Firebase的时候也踩过坑，给你几个亲测有效的排查和解决步骤：

1. 核对app.server.module.ts的完整配置 #

确保ModuleMapLoaderModule正确导入，并且整个模块的结构没有问题，示例配置如下：

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ServerTransferStateModule,
    ModuleMapLoaderModule // 必须放在这里，不要遗漏
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

2. 确认main.server.ts的extraProviders配置 #

provideModuleMap(LAZY_MODULE_MAP)必须正确传入渲染配置的extraProviders数组里，注意不要写错变量名：

import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppServerModuleNgFactory } from './dist/server/main';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { LAZY_MODULE_MAP } from './app/main.server';

if (environment.production) {
  enableProdMode();
}

export default (params: any) => {
  const options = {
    document: params.data.originalHtml,
    url: params.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP) // 这里是关键，确保LAZY_MODULE_MAP正确导入
    ]
  };

  return renderModuleFactory(AppServerModuleNgFactory, options);
};

3. 检查依赖版本兼容性 #

Angular和@nguniversal系列包的版本必须严格对应，版本不匹配很容易导致注入错误。你可以先卸载现有包，再安装对应版本：

npm uninstall @nguniversal/module-map-ngfactory-loader
npm install @nguniversal/module-map-ngfactory-loader@<你的Angular主版本号>

比如你用的是Angular 14，就安装@nguniversal/module-map-ngfactory-loader@14。

4. 清理构建缓存并重新构建 #

旧的构建文件可能残留错误配置，执行以下命令彻底清理后重新构建部署：

rm -rf dist node_modules
npm install
npm run build:ssr
firebase deploy

5. 检查Firebase配置文件 #

确保firebase.json里的SSR重写规则和函数配置正确，示例如下：

{
  "hosting": {
    "public": "dist/browser",
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  },
  "functions": {
    "source": "functions",
    "runtime": "nodejs18" // 选择和你的Angular项目兼容的Node版本
  }
}

如果以上步骤都试过还是不行，可以检查main.server.ts里的LAZY_MODULE_MAP是否正确导出，有没有拼写错误，或者AppServerModule里是否有重复导入的模块导致冲突。

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