Angular Universal Firebase：InjectionToken MODULE_MAP没有提供程序。

Question

为什么我会得到

Error: StaticInjectorError(AppServerModule)[NgModuleFactoryLoader -> InjectionToken MODULE_MAP]: 

  StaticInjectorError(Platform: core)[NgModuleFactoryLoader -> InjectionToken MODULE_MAP]: 

    NullInjectorError: No provider for InjectionToken MODULE_MAP!

尝试使用Firebase进行部署时？

我确实使用了

extraProviders: [

  provideModuleMap(LAZY_MODULE_MAP)

]

在我的app-server.module中，我导入了ModuleMapLoaderModule（顺便说一下，我尝试过以不同的顺序导入ServerModule和AppModule，有人告诉我这可能是问题所在，但它没有起作用）：

@NgModule({

  imports: [

    ServerModule,

    AppModule,

    ModuleMapLoaderModule,

  ],

  bootstrap: [AppComponent],

})

export class AppServerModule { }

主要的bundle.js包含了这个内容：

Object.defineProperty(exports, "__esModule", { value: true });

var app_server_module_ngfactory_1 = __webpack_require__("./src/app/app.server.module.ngfactory.js");

exports.AppServerModuleNgFactory = app_server_module_ngfactory_1.AppServerModuleNgFactory;

var __lazy_0__ = __webpack_require__("./src/app/features/blog/blog.module.ngfactory.js");

var app_server_module_1 = __webpack_require__("./src/app/app.server.module.ts");

exports.AppServerModule = app_server_module_1.AppServerModule;

exports.LAZY_MODULE_MAP = { "app/features/blog/blog.module#BlogModule": __lazy_0__.BlogModuleNgFactory };

main.bundle.js被正确地导入到Firebase脚本中，因为如果我更改require（...）中的一些字母，就会收到文件未知的错误。那么LAZY_MODULE_MAP有什么问题？它看起来像是一个字符串路由到工厂映射/ JS对象，并且被导出。那么为什么provideModuleMap不能正确解决它呢？BlogModule只有一个Hello-World-Stub组件的声明。

顺便说一句，这里有一个类似的问题，但没有回复：Angular5在Firebase托管和SEO上实现Universal懒加载

- Phil

---

嗨，也许你现在已经解决了这个问题，但如果没有，请发布完整的服务器JS文件（其中包括“provideModuleMap（LAZY_MODULE_MAP）”行）。我遇到了这个问题，并通过确保我仅在生产模式下使用“renderModuleFactory”，以及在其他情况下使用“renderModule”来解决它。 - Ben Elliott

请提供您的代码，好吗？ - ismaestro

Answer 1

简而言之；

npm uninstall @nguniversal/common
npm uninstall @nguniversal/module-map-ngfactory-loader

并且从你的app.server.module.ts中删除ModuleMapLoaderModule。

TSWM;

在Angular < 9中，Universal依赖于@nguniversal/common和@nguniversal/module-map-ngfactory-loader来处理延迟加载的模块。随着Angular 9+的到来，他们现在提供了ngExpressEngine，用于处理这个问题。你所需要的就是按照文档提到的，引入@nguniversal/express-engine即可。

- user5365075

---

是的！我刚将一个“旧”项目迁移到了Angular 10，这个过程非常完美。可能是我的“搜索技巧”不够好，但有很多地方都有相同的问题（或类似的SSR迁移问题），而这基本上就是你需要的全部。 - dNurb

它没有起作用，错误仍然存在，我如何在没有这些模块的情况下使用惰性加载？ - Tito

卸载依赖项后，您必须通过运行命令'ng build --prod && ng [ProjectName]:server:production'和'node dist/[ProjectName]/server/main.js'(当然是在您的服务器上执行最后一个命令 :-) )重新部署应用程序，然后再尝试。我必须补充说明，我已经升级到Angular 11。 - Lycone

Answer 2

我在尝试添加module-map-ngfactory-loader以启用延迟加载时遇到了这个错误，但在新版本的Angular中，您不需要手动添加此模块。 基于字符串的延迟加载语法在Ivy中不受支持，因此@nguniversal/module-map-ngfactory-loader不再需要。 对我有用的方法是卸载该模块（npm uninstall "package-name"），并删除ModuleMapLoaderModule。 详见此处。

- Abel