Lazy loading

[Sebastancho]

Hello, this method allows for lazy loaded modules to work? and prerenders them?

[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.