Angular2 lazy loading module error 'cannot find module'

For newer Angular versions (10+?) lazy loading is done using the following syntax:

{ path: "foos", loadChildren: () => import ("./foos/foo.module").then(m => m.FooModule) },

I met a similar issue when working with Angular 4.4.5 and webpack and managed to fix it without using strings, but module type reference (much easier to write and less error prone):

const routes: Routes = [
  { path: '', loadChildren: () => TestModule }
];

I could not find the minimum version for Angular (loader) the supports this syntax.

A way that might work with AOT is to replace lambda syntax with a regular one:

export function getTestModule() { return TestModule; }

const routes: Routes = [
  { path: '', loadChildren: getTestModule }
];

Also check this issue (thanks to rey_coder).

I have faced this same issue. I solved it by doing following 2 things:

In root module's route configuration, use loadChildren with a relative path to the lazy loaded angular module. The string is delimited with a # where the right side of split is the lazy loaded module's class name.

I have added ./ as prefix to the loadChildren string.

{ path:'user', loadChildren:'./app/user/user.module#UserModule'}

I am using webpack 2 and it needs a loader for Angular 2 that enables string-based module loading with the Angular Router. Add this to the project

yarn add angular-router-loader -D

then add the angular-router-loader to typescript loaders

loaders: [
  {
    test: /\.ts$/,
    loaders: [
    'awesome-typescript-loader',
    'angular-router-loader'
    ]
  }
]

and its working for me.

For people who are using a recent Angular version (v9 in my case), you can setup your route with the following syntax declaration:

import { TestModule } from './modules/test.module';
const appRoutes: Routes = [
  { path: 'blogs', loadChildren: () => import('./modules/test.module').then(m => m.TestModule) },
];

// NgModule
// declarations
// imports
// providers
// bootstrap

export class AppModule { }

Another way (without making the import at the top):

    const appRoutes: Routes = [
      { path: 'blogs', loadChildren: () => import('./modules/test.module').then(m => m.TestModule) },
    ];

Finally I found out that I need to import lazy loaded module in routing config this way:

const routes: Routes = [
   { path: '', loadChildren: 'app/test.module' }
];

without any / or ./in front of module path.

In Angular 9 I did this and it worked for me: loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)

You can have a look on official documentation

I change this

{
            path: 'test',
            loadChildren: 'app/tests/test.module#TestModule'

}

for this

   {
        path: 'test', loadChildren: () => new Promise(resolve => {
            (require as any).ensure([], require => {
                resolve(require('app/tests/test.module').TestModule);
            })
        })
    },

And solved my problem.

It was worked for me by using.

../app/

I solved this issue by using the suggestion popup in VS code. You can also follow that. No need to go anywhere. (I Think, the path may vary in every project.)

I've been troubleshooting this for a a couple of hours on a project I've just taken over from. None of the above solutions were working, but then I realised that all the lazy-loaded modules had the .ts extension.

If anyone else is having issues, check if you need to change loadChildren: 'app/example.module.ts' to loadChildren: 'app/example.module'.

In a use-case scenario to segregate a distinct feature (e.g. test.module.ts) from its root application (i.e. app.module.ts) through a lazily-loaded module, we could create the test module and it's components in a sub-folder (e.g. src/app/test/). The test-routing.module could be configured this way:

//test-routing.module.ts
//routes to test.component.ts as an example

import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';

const feature_test_routes: Routes = [

    { 
        path: '',
        component: TestComponent
    }

];

export const TestRoutingModule = RouterModule.forChild(feature_test_routes);

The "parent" module (app-routing.module.ts), would have a route that looks like this:

//app-routing.module.ts
//routes to http://localhost:4200/test

import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
const root_routes: Routes = [

    { 
        path: '',
        component: AppComponent, 
        children: [
            {
                path: 'test',
                loadChildren: './test/test.module#TestModule'
            }
        ]
    }

];

export const AppRoutingModule = RouterModule.forChild(root_routes);

This allows the root application and entry component, imperatively loaded, to subsequently lazy-load features from test.module.ts as a child when needed.

make sure to include import { Routes, RouterModule } from '@angular/router'; in the module to load lazely

I had a similar issue. I just restarted the server and it worked. :)

I have solved my own issue. Don't put the .ts in the path name. Rather than using 'path/to/my/module.ts#MyModuleClass', use 'path/to/my/module#MyModuleClass'

In my case the path shared the same route as one I declared elsewhere, assuming they would be relative paths. e.g like below in the

Not Working

Admin Module

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: './organisation/organisation.module#AdminOrganisationModule',
    },

User Module

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: './organisation/organisation.module#UserOrganisationModule',
    },

individually, when only one was declared, these were working fine, but not together as it complained about the ./organisation/organisation.module path , I changed both to the pattern below and it was ok.

Working

Admin Module

    {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: '../admin/organisation/organisation.module#AdminOrganisationModule',
    },

User Module

        {
    path: 'organisation',
    canActivate: [AuthGuard],
      loadChildren: '../user/organisation/organisation.module#UserOrganisationModule',
    },

You need to change

export default class TestModule { }

to

export class TestModule { }

That should fix your problems

in my project i resolved the issue by changing the relative path to start from src

so instead of

loadChildren: () => import('./user/user.module') .then(m => m.UserModule)

I changed to:

loadChildren: () => import('./src/app/user/user.module') .then(m => m.UserModule)

Folder structure was: