Angular Universal Firebase: no provider for InjectionToken MODULE_MAP

Question

Why do I get

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

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

    NullInjectorError: No provider for InjectionToken MODULE_MAP!

when trying to deploy with firebase?

I do use

extraProviders: [

  provideModuleMap(LAZY_MODULE_MAP)

]

and in my app-server.module I do import ModuleMapLoaderModule (btw I tried importing ServerModule and AppModule in a different order, I was told it might be the problem, but it didnt work):

@NgModule({

  imports: [

    ServerModule,

    AppModule,

    ModuleMapLoaderModule,

  ],

  bootstrap: [AppComponent],

})

export class AppServerModule { }

The main.bundle.js contains this:

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 does get imported in the firebase script correctly, because if I change some letters in the require(...), I get an error that the file is not known. So what is wrong with the LAZY_MODULE_MAP? it looks like a string-route-to-factory map/js-object and it gets exported. so why does it not get resolved by provideModuleMap correctly? The BlogModule has only a declaration of a Hello-World-Stub component.

Btw, there is a similar question here but with no replies: Angular5 Universal lazy loading on firebase hosting and seo

Answer 1

TLDR;

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

and remove ModuleMapLoaderModule from your app.server.module.ts.

TSWM;

In Angular < 9, Universal was relying on @nguniversal/common and @nguniversal/module-map-ngfactory-loader to handle lazy loaded modules. With Angular 9+, they now provide out of the box the ngExpressEngine which handles this. All you need is @nguniversal/express-engine as the docs mention.

Answer 2

I stumbled on this error when I try to add module-map-ngfactory-loader to enable lazy loading but in the new version of Angular, you don't need to manually add this module. String-based lazy loading syntax is not supported with Ivy and hence @nguniversal/module-map-ngfactory-loader is no longer required.

uninstalling the module (npm uninstall "package-name" ). and removing ModuleMapLoaderModule worked for me.

see here for detail