Angular Universal Firebase：没有 InjectionToken MODULE_MAP 的提供者答案

【问题标题】：Angular Universal Firebase: no provider for InjectionToken MODULE_MAPAngular Universal Firebase：没有 InjectionToken MODULE_MAP 的提供者
【发布时间】：2018-09-01 01:30:40
【问题描述】：

我为什么会得到

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 { }

main.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 有什么问题呢？它看起来像一个 string-route-to-factory map/js-object 并被导出。那么为什么provideModuleMap 不能正确解决它呢？ BlogModule 只有一个 Hello-World-Stub 组件的声明。

顺便说一句，这里有一个类似的问题，但没有回复：Angular5 Universal lazy loading on firebase hosting and seo

【问题讨论】：

嗨，您现在可能已经解决了这个问题，但如果没有，您能否发布整个服务器 JS 文件（包含行 provideModuleMap(LAZY_MODULE_MAP) 的那个）？我自己刚刚遇到了这个问题，并通过确保我只在生产模式下使用renderModuleFactory 和renderModule 来解决它。
你能提供你的代码吗？

标签： angular firebase google-cloud-functions angular-universal

【解决方案1】：

TLDR;

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

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

TSWM;

在 Angular @nguniversal/common 和 @nguniversal/module-map-ngfactory-loader 来处理延迟加载的模块。使用 Angular 9+，他们现在提供开箱即用的 ngExpressEngine 来处理这个问题。您只需要@nguniversal/express-engine 提及the docs。

【讨论】：

是的！刚刚将一个“旧”项目迁移到 Angular 10，并且效果很好。可能是我的“搜索技术”，但有很多地方都有相同的问题（或类似的 SSR 迁移问题），这几乎就是你所需要的。
它不起作用，错误仍然存在，如果没有这些模块，我如何使用延迟加载？
卸载依赖项后，您必须部署您的应用程序。再次通过运行命令 'ng build --prod && ng [ProjectName]:server:production' 和 'node dist/[ProjectName]/server/main.js'（当然是服务器上的最后一个命令 :-)）再试一次。我必须补充一点，我尚未升级到 Angular 11

【解决方案2】：

当我尝试添加 module-map-ngfactory-loader 以启用延迟加载时，我偶然发现了这个错误，但是在新版本的 Angular 中，您不需要手动添加此模块。 Ivy 不支持基于字符串的延迟加载语法，因此不再需要 @nguniversal/module-map-ngfactory-loader。

卸载模块（npm uninstall "package-name" ）。并删除 ModuleMapLoaderModule 对我有用。

see here for detail

【讨论】：