cannot find module in angular Lazy Loading

Question

I have an angular project successfully on the Mac environment

Angular CLI: 7.0.5
Node: 8.11.3
OS: darwin x64
Angular: 7.0.3

Now I am running the same code on ubuntu 18.04 with the setup

Angular CLI: 7.3.9
Node: 12.9.1
OS: linux x64
Angular: 7.2.15

however it is coming with a very weird issue when trying to lazy load another module, I keep getting this error Error: Cannot find module "app/website/site.module"

Here is my project structure

and app-routing.module.ts

 const routes: Routes = [    
      {
        path: 'site',
        loadChildren: 'app/website/site.module#SiteModule',
      }
    ]

the routing is used to work in mac but failed in ubuntu

I looked up a different solution

const rootRoutes: Routes = [
  { path: 'site', loadChildren: './website/site.module#SiteModule' }
];

but still it failed to work.

try this () => import('./orders/orders.module').then(mod => mod.OrdersModule) source: angular.io/guide/lazy-loading-ngmodules — Pavel B.
– Pavel B., Commented Sep 3, 2019 at 6:44
I will give you answer and complete guid in sec, it should be the same as in angular 7 — Pavel B.
– Pavel B., Commented Sep 3, 2019 at 16:52
Angular 9 : loadChildren: () => import('./app/order/orders.module').then(m => m.NewOrdersModule) — Manthan Devani
– Manthan Devani, Commented Jun 26, 2020 at 14:08

slipper13 · Accepted Answer · 2020-11-24 17:54:01Z

I created an example project on stackblitz

Explanation:

So first of all, you have to create your routes like this:

const routes: Routes = [
  // this will get lazy loaded
  { 
    path: 'lazyload',
    loadChildren: () => import('./module/module.module').then(mod => mod.ModuleModule) 
  },

  // default route
  { 
    path: '**',
    component: Component1Component
  }
];

Then add it to app module (root module):

@NgModule({
  imports:      [
    // your imports here ...
    // add your routes (forRoot() is only in the root module!)
    RouterModule.forRoot(routes)
  ],
  // your providers, declarations, etc.
})
export class AppModule { }

Then you have to add routes to the child module (in this case ModuleModule):

const routes: Routes = [
  { path: 'route1', component: Component2Component },
  { path: '', component: Component3Component }
];

@NgModule({
  imports: [
    // your imports here ... 
    RouterModule.forChild(routes)
  ],
  declarations: [Component2Component, Component3Component]
})
export class ModuleModule { }

now it should work, if you have any problems I will be here :)

Arthur Tsidkilov · Accepted Answer · 2020-03-01 05:47:20Z

10

I had a similar problem, in my code it was the same path like your

  {
      path: 'admin', loadChildren: './admin/admin.module#AdminModule'
  }

and after I changed file tsconfig.app.json

it began to work and find child route, on attached image you can see changes that i done

answered Mar 1, 2020 at 5:47

Arthur Tsidkilov

5,4212 gold badges24 silver badges18 bronze badges

3 Comments

Jeremy Thille Over a year ago

Changing "include": ["src/**/*.d.ts"] to "include": ["src/**/*.ts"] worked for me -_- I would never have found this by myself

sandy Over a year ago

This has worked for me too .... But I am getting now some other warning such as "...user-news.component.spec.ts is part of the TypeScript compilation but it's unused. Add only entry points to the 'files' or 'include' properties in your tsconfig." . I'm not sure whether I should worry about them or not at this point.

CRice Over a year ago

or add "src/**/*.module.ts" to not load as much

Frank_MCZ · Accepted Answer · 2020-05-27 08:15:03Z

In my particular case, Pavel B. solution worked best. No warnings at compilation or runtime!

  {
    path: 'users',
    loadChildren: () => import('./users/users.module').then(mod => mod.UsersModule)
  }

Using:

Angular CLI: 9.1.7 Node: 12.14.0 OS: darwin x64

Angular: 9.1.9 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router Ivy Workspace: Yes

Package and Versions

@angular-devkit/architect         0.901.7
@angular-devkit/build-angular     0.901.7
@angular-devkit/build-optimizer   0.901.7
@angular-devkit/build-webpack     0.901.7
@angular-devkit/core              9.1.7
@angular-devkit/schematics        9.1.7
@angular/cli                      9.1.7
@ngtools/webpack                  9.1.7
@schematics/angular               9.1.7
@schematics/update                0.901.7
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Sinan Özata · Accepted Answer · 2020-07-13 22:43:46Z

0

You can use like this:

const rootRoutes: Routes = [ { path: 'site', loadChildren: () => SiteModule } ];

answered Jul 13, 2020 at 22:43

Sinan Özata

494 bronze badges

1 Comment

Harkal Over a year ago

after using this approach your lazy-loading wont be lazy-loading anymore

Collectives™ on Stack Overflow

cannot find module in angular Lazy Loading

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related