Nx: How to lazy load a module from libs?

[olakara]

I have a main app named myapp. I have configured my routes as below:

const routes: Routes = [
  { path: 'home', loadChildren: 'libs/home/home.module#HomeModule'},
  { path: 'admin', loadChildren: 'libs/admin/admin.module#AdminModule' },

  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

My home and admin are modules with its own routing and are placed in libs. When I run my application my modules are not getting loaded. I guess this is a path issue.. can someone please guide me how to properly configure the lazy loading modules from library?

Here is the error I get:

ERROR Error: Uncaught (in promise): Error: Cannot find module 'libs/home/home.module'.
Error: Cannot find module 'libs/home/home.module'.
    at eval (eval at ../../../../../apps/myapp/src/$$_lazy_route_resource lazy recursive (main.bundle.js:6), <anonymous>:5:9)
    at ZoneDelegate.invoke (webpack-internal:///../../../../zone.js/dist/zone.js:388)

Note: I updated my tsconfig.app.json and tslint.json as follows:
tslint.json

"nx-enforce-module-boundaries": [
      true,
      {
        "lazyLoad": [
          "home",
          "admin"
        ],
        "allow": []
      }
    ]

and tsconfig.app.json:

 "include": [
    "**/*.ts",
    /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
    "../../../libs/home/index.ts",
    "../../../libs/admin/index.ts"    
  ],

Thanks

[dereklin]

I think you can find discussions in some issues if do a search.

Here is how I do it in my repo:

{ path: 'not-found', loadChildren: '@nx-demo-jest/not-found/src/not-found.module#NotFoundModule' },

https://github.com/dereklin/nx-demo-jest/blob/lazy-5/apps/app1/src/app/core/core-routing.module.ts

[olakara]

@dereklin thanks! :)

[danieldanielecki]

Opening after some time, as had the same problem. The crucial thing is I didn't lazy load my lib by default, i.e. when creating it, but decided to add lazy routing when had an application architecture. Nevertheless, please remember to include path to the lib in your tsconfig.app.json, as it's here.

Without this I was getting errors like so:
ERROR in ./$$_lazy_route_resource lazy namespace object Module not found: Error: Can't resolve '<path>/libs/contact/src/lib/contact.module.ngfactory.js' in '<path>\apps\app_name\$$_lazy_route_resource'

Thought it's something with Angular/Angular CLI, looked for solutions like here, or here, but it wasn't a solution. In the first one simply confused terminology, as in Nx we have "libs", whilst the issue was about loading libraries directly from node_modules.

Ended up with a solution like so:

tsconfig.app.json inside apps/app_name

"include": [
"*/.ts",
"./../../libs/contact/src/index.ts",
"./../../libs/not-found/src/index.ts"
]

app-routing.module.ts inside apps/app_name/src/app/routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from '@libs/home/src/index';

const routes: Routes = [
 {
    path: '',
    component: HomeComponent,
    data: { animation: 'home' },
    pathMatch: 'full'
  },
  {
    data: { animation: 'contact' },
    loadChildren: '@libs/contact/src/index#ContactModule',
    path: 'contact'
  },
  {
    data: { animation: 'not-found' },
    loadChildren: '@libs/not-found/src/index#NotFoundModule',
    path: 'not-found'
  },
  // It's important that wildcard route has to be the last element in array of routes, because routes parses from top to bottom.
  {
    path: '**', // Wildcard path, which means to catch all other routes, not specified above.
    redirectTo: 'not-found', // Alternative to component in routes, which redirects to specific path.
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class RoutingModule {}

app.module.ts inside apps/app_name/src/app

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { NxModule } from '@nrwl/nx';
import { HomeModule } from '@libs/home/src/index';
import { AppComponent } from './app.component';
import { RoutingModule } from './routing/app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HomeModule,
    NxModule.forRoot(),
    RoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Root tsconfig.json

"paths": {
    "@libs/*": ["libs/*"]
},

index.ts inside libs/contact/src

export { ContactComponent } from './lib/contact/contact.component';
export { ContactModule } from './lib/contact.module';

contact.module.ts inside libs/contact/src/lib

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [ContactComponent],
  imports: [RouterModule.forChild([{ path: '', component: ContactComponent }])]
})
export class ContactModule {}

To finish this "tutorial" in 100%, let me add 2 more steps - let me explicit in every detail.

contact.component.ts inside libs/contact/src/lib/contact

import { Component } from '@angular/core';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.scss']
})
export class ContactComponent {}

contact.component.html inside libs/contact/src/lib/contact
<p>contact works!</p>

Excluding previous resources did it based on the following links:

• Demo of lazy routing
• @vsavkin post
• main.ts from this tutorial

Good answer addressing this problem was on StackOverflow. In the answer there's a link to old documentation, where possibly it was explained, or at least supposed to be. I think should be included in the new docs.

Edit: the same logic applies of course for the not-found component/module, I believe it was enough to proceed in the future for others.

[nitoloz]

Just a short note regarding angular update to version 8.x. Following new syntax the lazy loading module will be imported as follows:

      {
        path: 'lazy-loaded-path',
        loadChildren: () => import('@yourworkspace/lazy-loaded-module').then(m => m.LazyLoadedModule)
      },

[nhhockeyplayer]

why isnt module tags in the PATHS for tsconfig sufficient?
I import all my code reaching into libs area using tags

import { BizModule } from '@biz/biz.module'

even with dot dot slash notation for import
build and run fine but app refuses to hit feature lib back end routes
NgRX populates the state properly in resolvers though which tells me the router is navigating there

why is PATH insufficient? it seems to hold well for me though I thinkI got an outlet issue

cans someone explain?

[nhhockeyplayer]

then I get these warnings when I implement our solution

Warning: /Users/me/new/NX/energy/libs/biz/src/index.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

Warning: /Users/me/new/NX/energy/libs/collections/src/lib/collections.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.

do I need to include the lib module via import to the app as well?

I thought Nx was magically fixing all this for us