Angular 5 lazy loading Error: Cannot find module

Question

I would like to use lazy loading but I can not understand why it does not work, it gives me error "Cannot find module".
This is my environment:
- Angular 5.2.1
- .NET Core 2
- Webpack 3.10.0
- angular-router-loader 0.8.2
- @angular/cli 1.6.5
I tried different path in loadChildren always without success, i also temporarily disabled all the guards and the children routing. What did I do wrong?

FOLDERS

ClientApp
  app
    components
      users
        users-routing.module.ts
        users.module.ts
  app-routing.module.ts
  app.module.shared.ts

app-routing.module.ts

const appRoutes: Routes = [
    {
        path: 'users',
        loadChildren: './components/users/users.module#UsersModule'/* ,
        canLoad: [AuthGuard] */
    },
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/login'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes,
            { enableTracing: false }
        )
    ],
    exports: [
        RouterModule
    ],
    providers: [
        CanDeactivateGuard
    ]
})
export class AppRoutingModule { }

users-routing.module.ts

const usersRoutes: Routes = [
    {
        path: '',
        component: UsersComponent/* ,
        //canActivate: [AuthGuard],
        children: [
            {
                path: 'detail',
                canActivateChild: [AuthGuard],
                children: [
                    {
                        path: ':id',
                        component: UserViewComponent
                    },
                    {
                        path: 'edit/:id',
                        component: UserFormComponent,
                        canDeactivate: [CanDeactivateGuard],
                        resolve: {
                            user: UsersResolver
                          }
                    },
                    {
                        path: '',
                        component: UserFormComponent,
                        canDeactivate: [CanDeactivateGuard]
                    }
                ]
            },
            {
                path: '',
                component: UsersListComponent
            }
        ] */
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(
            usersRoutes
        )
    ],
    exports: [
        RouterModule
    ]
})
export class UsersRoutingModule { }

users.module.ts

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        UsersRoutingModule,
        RouterModule
    ],
    declarations: [
        UsersComponent,
        UserFormComponent,
        UsersListComponent,
        UserViewComponent
    ],
    providers: [
        UsersResolver,
        RouterModule
    ]
})
export class UsersModule { }

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: {
            modules: false
        },
        context: __dirname,
        resolve: {
            extensions: ['.js', '.ts']
        },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [{
                    test: /\.ts$/,
                    include: /ClientApp/,
                    use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack'
                },
                {
                    test: /\.html$/,
                    use: 'html-loader?minimize=false'
                },
                {
                    test: /\.css$/,
                    use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize']
                },
                {
                    test: /\.(png|jpg|jpeg|gif|svg)$/,
                    use: 'url-loader?limit=25000'
                }
            ],
            loaders: [
                {
                  test: /\.ts$/,
                  loaders: [
                    'awesome-typescript-loader'
                  ]
                },
                {
                  test: /\.(ts|js)$/,
                  loaders: [
                    'angular-router-loader'
                  ]
                }
              ]
        },
        plugins: [new CheckerPlugin()]
    };

    // Configuration for client-side bundle suitable for running in browsers
    const clientBundleOutputDir = './wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig, {
        entry: {
            'main-client': './ClientApp/boot.browser.ts'
        },
        output: {
            path: path.join(__dirname, clientBundleOutputDir)
        },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new AngularCompilerPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
                exclude: ['./**/*.server.ts']
            })
        ])
    });

    // Configuration for server-side (prerendering) bundle suitable for running in Node
    const serverBundleConfig = merge(sharedConfig, {
        resolve: {
            mainFields: ['main']
        },
        entry: {
            'main-server': './ClientApp/boot.server.ts'
        },
        plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./ClientApp/dist/vendor-manifest.json'),
                sourceType: 'commonjs2',
                name: './vendor'
            })
        ].concat(isDevBuild ? [] : [
            // Plugins that apply in production builds only
            new AngularCompilerPlugin({
                tsConfigPath: './tsconfig.json',
                entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
                exclude: ['./**/*.browser.ts']
            })
        ]),
        output: {
            libraryTarget: 'commonjs',
            path: path.join(__dirname, './ClientApp/dist')
        },
        target: 'node',
        devtool: 'inline-source-map'
    });

    return [clientBundleConfig, serverBundleConfig];
};

tsconfig.json

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular.
    "strict": true,
    "lib": [ "es6", "dom" ],
    "types": [ "webpack-env" ], 
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [ "bin", "node_modules" ],
  "atom": { "rewriteTsconfig": false }
}

ERROR MESSAGE

Unhandled Promise rejection: Cannot find module './ClientApp/app/components/users/users.module'. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module './ClientApp/app/components/users/users.module'. at vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:34015 at ZoneDelegate.invoke (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117428) at Object.onInvoke (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:5604) at ZoneDelegate.invoke (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117427) at Zone.run (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117178) at vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117898 at ZoneDelegate.invokeTask (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117461) at Object.onInvokeTask (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:5595) at ZoneDelegate.invokeTask (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117460) at Zone.runTask (vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:117228) Error: Cannot find module './ClientApp/app/components/users/users.module'. at http://localhost:5000/dist/vendor.js?v=AdjSBPSITyauSY4VQBBoZmJ6NdWqor7MEuHgdi2Dgko:34015:9 ... [truncated]

EDIT

link to stackblitz for testing

@Luciano Do not edit your question with how you solved it. Instead, answer it below and accept it. — Blue
– Blue, Commented Jan 26, 2018 at 16:34
If you have an answer, please post it as an answer. Do not edit your question for this purpose. — GrumpyCrouton
– GrumpyCrouton, Commented Jan 26, 2018 at 16:36

2 revs, 2 users 93% · Accepted Answer · 2020-07-17 12:08:54Z

25

I have found two solutions (via the OP by edit):

Reference to the module, after it has already been resolved with an import statement:

import { UsersModule } from './components/users/users.module';

then referencing this way:

{
    path: 'users',
    loadChildren: () => UsersModule,
    canLoad: [AuthGuard]
}

I have added ng-router-loader to the application (npm install ng-router-loader --save-dev) and I set up Webpack like this:

     rules: [{
             test: /\.ts$/,
             include: /ClientApp/,
             //use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack'
             use: isDevBuild ? [{ loader: 'ng-router-loader' }, 'awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack'
         },
         {
             test: /\.html$/,
             use: 'html-loader?minimize=false'
         },
         {
             test: /\.css$/,
             use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize']
         },
         {
             test: /\.(png|jpg|jpeg|gif|svg)$/,
             use: 'url-loader?limit=25000'
         }
     ],

then referencing the module by path:

    {
        path: 'users',
        loadChildren: './components/users/users.module#UsersModule',
        canLoad: [AuthGuard]
    }

edited Jul 17, 2020 at 12:08

community wiki

2 revs, 2 users 93%
Goodbye StackExchange

Sign up to request clarification or add additional context in comments.

3 Comments

daisura99 Over a year ago

@wctiger same here, I wonder what was the reason. I've been working on my project for some time and one day it just stopped working.Yet I am certain the loadChildren path is correct. The first way saved my day as well, but it troubles me as to why it works.

Fang Liu Over a year ago

But with the first way, I can't enable AOT any more since AOT doesn't support arrow function in decorators.

Marcus Santodonato Over a year ago

I was having the same problem in Angular 9. Adding the import statement to my routing.ts file resolved it for me, even with the loadChildren property set to the path for the module.

Sinan Özata · Accepted Answer · 2020-07-13 22:59:31Z

4

You can use like this:

const rootRoutes: Routes = [
  { path: 'your-path', loadChildren: () => UsersModule }
];

answered Jul 13, 2020 at 22:59

Sinan Özata

494 bronze badges

Comments

Fredrik_Borgstrom · Accepted Answer · 2019-04-04 12:46:19Z

3

The currently accepted answer, which proposes to exchange the value of loadChildren from a string to a function, removes the possibility of AOT compilation when doing a production build.

What worked for me, was 1) use absolute paths 2) Add the lazy loaded modules as a string array in angular.json under projects > 'projectname' > architect > build > options > lazyModules. The paths should be the same as defined under loadChildren.

So, in your case, I think this should work in your routing module:

loadChildren: 'app/components/users/users.module#UsersModule'

And in angular.json, add this at the location specified above:

lazyModules: ["app/components/users/users.module"]

answered Apr 4, 2019 at 12:46

Fredrik_Borgstrom

3,3261 gold badge32 silver badges39 bronze badges

1 Comment

Harkal Over a year ago

the path in lazyModules must start with src/. i just tested. i m thankful for your answer as it lead me to know about that option in angular.json

Char · Accepted Answer · 2020-03-20 08:08:45Z

2

Supposing this is AppModule that handles lazyloading and the features of your system are of the same tree as it is:

routes: Routes = [
    {
        path: 'files-pannel',
        loadChildren: () => import('./module-folder/module-name.module').then(m => m.ModuleName)
    }
];

answered Mar 20, 2020 at 8:08

Char

2,1438 gold badges31 silver badges45 bronze badges

Comments

Vivek Doshi · Accepted Answer · 2018-01-25 11:14:13Z

0

Its typo folder name is Users not users :

Change

'./components/users/users.module#UsersModule'

to

'./components/Users/users.module#UsersModule'

answered Jan 25, 2018 at 11:14

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

8 Comments

Luciano Over a year ago

The folder name is user, i've edited the post. Sorry

Vivek Doshi Over a year ago

Will you please remove RouterModule from users.module.ts and try again ? @Luciano

Vivek Doshi Over a year ago

@Luciano , will you please create demo on stackblitz?

Luciano Over a year ago

I've added a link to stackblitz in the post

Vivek Doshi Over a year ago

@Luciano , please check this stackblitz.com/edit/angular-route-issue, Make it working click on the first link , you are getting 2 link because of userRooutingModule , there is no need to put path and component there , it will automatically point the userComponent.

|

federico scamuzzi · Accepted Answer · 2018-01-25 11:28:21Z

0

try to do n your user.module.ts:

import {UserRoutes } from './User.routing'

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        UsersRoutingModule.forChild(UserRoutes), //<-- for child
        RouterModule
    ],
    declarations: [
        UsersComponent,
        UserFormComponent,
        UsersListComponent,
        UserViewComponent
    ],
    providers: [
        UsersResolver,
        RouterModule
    ]
})
export class UsersModule { }

answered Jan 25, 2018 at 11:28

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

2 Comments

Luciano Over a year ago

Federico, i don't understand how to implement this, forChild is not a method of UserRoutingModule (it's inside the module)

federico scamuzzi Over a year ago

yes cause you' re exports: [ RouterModule ] from your user routing .... Give a try!!

Ishaan Javali · Accepted Answer · 2018-11-26 15:08:14Z

0

Usually, it is an error with the path. Change the path.

For example, this solution works for me::

loadChildren: '../changelog/changelog.module#ChangelogModule'

./folder or ../folder or folder

edited Nov 26, 2018 at 15:08

Ishaan Javali

1,7133 gold badges16 silver badges23 bronze badges

answered Nov 26, 2018 at 13:25

Maxim Savin

1

Comments

Rashi Goyal · Accepted Answer · 2020-07-16 14:25:05Z

0

I have also faced the same issue while loading my module I was getting this error Error: Cannot find module 'app/users/users.module' Then after figuring out it was error related to the path This solution works for me hope it help anyone In the route add this path

{
   path: 'users',
   loadChildren: '../app/users/users.module#UsersModule'
 }

Figure out the path of your module folder like folder or ./folder or ../folder

Happy Coding!!

answered Jul 16, 2020 at 14:25

Rashi Goyal

9519 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular 5 lazy loading Error: Cannot find module

8 Answers 8

3 Comments

Comments

1 Comment

Comments

8 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

1 Comment

Comments

8 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related