Angular5 Universal lazy loading on firebase hostin

Question

Does anyone know howto get lazyloading on firebase hosting working? It all works but when I view the source code of my site, I only see the router-outlet and not the text and so on. I've added the code below to my index.js inside the functions folder:

extraProviders: [
  provideModuleMap(LAZY_MODULE_MAP)
]

My app.server.module file looks like this:

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

But when I use firebase deploy in my console, it has deployed succesfully. However when I visit my site after that, I get an error and a blank page.

So if anyone can point me to the right direction, that would be awesome !

Answer 1

It may be because you are missing the ModuleMapLoaderModule module in your imports

app.server.module.ts

import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader'

@NgModule({
imports: [
AppModule,
ServerModule,
ModuleMapLoaderModule
],

It seems to be needed for lazy loaded routes:

The ModuleMapLoaderModule is a server-side module that allows lazy-loading of routes.

https://angular.io/guide/universal#app-server-module