Creating a corner application 5. An application requires several alternative layouts.
My approach is to handle high-level routing in the routing file of the main application. The specified file will map routes to modules. Modules will be lazy loaded for non-essential pages, controlled by speed, and will not be lazy loaded for critical pages:
app-layout-router.module.ts file:
import {NgModule} from '@angular/core'; import {PreloadAllModules, RouterModule, Routes} from '@angular/router'; import {PublicLayoutModule} from '@modules/layouts/public/public-layout.module'; import {AuthenticatedLayoutModule} from '@modules/layouts/authenticated/authenticated-layout.module'; const routes: Routes = [{ path: '', loadChildren: () => PublicLayoutModule, },{ path: 'dashboard', loadChildren: () => AuthenticatedLayoutModule, }]; @NgModule({ imports: [RouterModule.forRoot( routes, { useHash: false, preloadingStrategy: PreloadAllModules } )], exports: [RouterModule], }) export class AppLayoutRouter { }
All routes that are not under the control panel will be pre-displayed for SEO reasons. However, in an authenticated layout, I can disable the application, lazy loading subsequent modules. For example, this is the contents of an authenticated module router file:
import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; import {AuthenticatedLayoutComponent} from './authenticated-layout.component'; const routes: Routes = [{ path: '', component: AuthenticatedLayoutComponent, children: [{ path: '', loadChildren: '../../dashboard/dashboard.module#DashboardModule' }] }]; @NgModule({ imports: [RouterModule.forChild( routes )], exports: [RouterModule], }) export class AuthenticatedLayoutRoutingModule { }
In theory, this works, but in practice, I find errors. Expected Result: the angular cli web package will create a slice for the control panel module, and the application will receive it through lazy loading. In fact, the result is that the router cannot load the dashboard module because it believes that the path to the module is incorrect.
Here is the error:
Error: Cannot find module '../../dashboard/dashboard.module'. at eval (eval at ../../../../../src/$$_lazy_route_resource lazy recursive (main.bundle.js:6), <anonymous>:5:9) at ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4733) at ZoneDelegate.invoke (zone.js:387) at Zone.run (zone.js:138) at eval (zone.js:858) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4724) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at eval (eval at ../../../../../src/$$_lazy_route_resource lazy recursive (main.bundle.js:6), <anonymous>:5:9) at ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:4733) at ZoneDelegate.invoke (zone.js:387) at Zone.run (zone.js:138) at eval (zone.js:858) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4724) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at resolvePromise (zone.js:809) at resolvePromise (zone.js:775) at eval (zone.js:858) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4724) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1517) defaultErrorLogger @ core.js:1440 ErrorHandler.handleError @ core.js:1501 next @ core.js:5481 schedulerFn @ core.js:4319 SafeSubscriber.__tryOrUnsub @ Subscriber.js:240 SafeSubscriber.next @ Subscriber.js:187 Subscriber._next @ Subscriber.js:128 Subscriber.next @ Subscriber.js:92 Subject.next @ Subject.js:56 EventEmitter.emit @ core.js:4299 (anonymous) @ core.js:4755 ZoneDelegate.invoke @ zone.js:388 Zone.run @ zone.js:138 NgZone.runOutsideAngular @ core.js:4681 onHandleError @ core.js:4755 ZoneDelegate.handleError @ zone.js:392 Zone.runGuarded @ zone.js:154 _loop_1 @ zone.js:684 api.microtaskDrainDone @ zone.js:693 drainMicroTaskQueue @ zone.js:602 ZoneTask.invokeTask @ zone.js:500 invokeTask @ zone.js:1517 globalZoneAwareCallback @ zone.js:1543
I can fix this by setting the entire routing of the module to lazy loading (i.e. lazy loading of everything) ... but I don’t want to do this for pages facing the public, such as the login page. I can pre-render the pages just fine, the user will receive a pre-processed index.html file for logging in ... but cannot interact with the page until the router extracts the module from the back-end via lazy loading ..
Has anyone else solved this problem? And if so, how?
Here is the code in question: https://github.com/jdcrecur/ang5ModuleRouting