Lazy loading about angular-universal-firebase

[StudioTOB]

Hi,

Thanks for this mini tutorial, it's working almost great ;-) . But I'm also having problems with lazy loaded routes. When I view my source I see that it is not rendering my content but instead it only shows

Do you have a solution for this. Because for SEO it's much needed. What I've did so far is:

index.js file inside functions folder:

require('zone.js/dist/zone-node');

const functions = require('firebase-functions');
const express = require('express');
const path = require('path');

const { enableProdMode } = require('@angular/core');
const { renderModuleFactory } = require('@angular/platform-server');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist-server/main.bundle');

enableProdMode();

const index = require('fs')
.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf8')
.toString();

let app = express();

app.get('**', function (req, res) {
renderModuleFactory(AppServerModuleNgFactory, {
url: req.path,
document: index,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => res.status(200).send(html));
});

exports.ssr = functions.https.onRequest(app);

the app.server.module file I have this:

import { NgModule } from '@angular/core';
import { ServerModule } 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,
ModuleMapLoaderModule
],
bootstrap: [AppComponent],
})
export class AppServerModule {}

And my routing module looks like this

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { AboutComponent } from './pages/about/about.component';
import { PortfoliosComponent } from './pages/portfolios/portfolios.component';
import { ExamplesComponent } from './pages/examples/examples.component';
import { ContactComponent } from './pages/contact/contact.component';
import { HomeComponent } from './pages/home/home.component';

const appRoutes: Routes = [
{ path: '', loadChildren: './pages/home/home.module#HomeModule', pathMatch: 'full' },
{ path: 'over-ons', loadChildren: './pages/about/about.module#AboutModule' },
{ path: 'portfolio', loadChildren: './pages/portfolios/portfolios.module#PortfoliosModule' },
{ path: 'voorbeelden', loadChildren: './pages/examples/examples.module#ExamplesModule' },
{ path: 'contact', loadChildren: './pages/contact/contact.module#ContactModule' }
];

export const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Thanks in advance

Brian

[stanleyeosakul]

Unfortunately, I have not yet experimented with lazy loaded routes so I don't have a solution at this time.

[StudioTOB]

Ok, thanks! This would be the last step for my project. If I figure it out I'll post it here.