CODEWITHSUNDEEP
angular
Remi Patriarche
Remi Patriarche

Reputation: 51

How to define a route with loadChildren property (lazy) inside an Angular library?

We have a large Angular 8 app that we want to split into several parts (libraries). We would like each library to define its own routes without losing lazy-loading ability. But we are facing compilation error.

Library routing module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'app1',
    loadChildren: () => import('./modules/demo/demo.module').then(m => m.DemoModule)
  },
  {
    path: '',
    redirectTo: 'app1',
    pathMatch: 'full',
  }
];

// @dynamic
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MyLibraryRoutingModule { }

Here is the first error we ran into:

Lambda not supported

This is the reason why we added the // @dynamic flag. But then we got the following error:

"ERROR: You must set "output.dir" instead of "output.file" when generating multiple chunks."

And we don't clearly understand the point.

I came across this post from Google staff which suggests that we are doing something wrong...

Could anyone confirm and ideally explain why that it is definitively no way to define lazy-routes from a library?

Upvotes: 2

Views: 1699

Answers (2)

Kuzenko Lubko
Kuzenko Lubko

Reputation: 2109

import { ApplicationModule } from './application.module';
...
export function getAppModule() {
    return ApplicationModule;
}
...
loadChildren: getAppModule

Upvotes: 2

Jaya Krishna
Jaya Krishna

Reputation: 313

The syntax that is mentioned for dynamic import, in the newer version of angular. But anyways the old syntax still works in the newer versions of angular too.

Try this..

{
    path: '',
    loadChildren: './pages/home/home.module#HomeModule',
},

If you would like to use the old syntax, then use this article --> https://www.techiediaries.com/angular-lazy-load-module-example/

Upvotes: 0

Related Questions