Angular with Webpack - loadChildren can't find the module

Question

I'm trying load an admin I bought that works with Angular4, however I'm having some trouble configuring the project to run with Webpack:

const routes: Routes = [
{
    "path": "",
    "component": ThemeComponent,
    "canActivate": [AuthGuard],
    "children": [
        {
            "path": "index",
            "loadChildren": './pages/default/index/index.module#IndexModule'
        }
    ],
    {
        "path": "**",
        "redirectTo": "404",
        "pathMatch": "full"
    }
];

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

when I run the app, I get this message in console:

NavigationError {id: 1, url: "/", error: Error: Cannot find module './pages/default/index/index.module'. at eval (eval at ./src/main/weba…} error : Error: Cannot find module './pages/default/index/index.module'. at eval (eval at ./src/main/webapp/admin/app lazy recursive (http://localhost:8080/admin/app/main.bundle.js:6:1), :5:9) at ZoneDelegate.invoke (webpack-internal:///./node_modules/zone.js/dist/zone.js:391:26) at Object.onInvoke (webpack-internal:///./node_modules/@angular/core/@angular/core.es5.js:4094:33) at ZoneDelegate.invoke (webpack-internal:///./node_modules/zone.js/dist/zone.js:390:32) at Zone.run (webpack-internal:///./node_modules/zone.js/dist/zone.js:141:43) at eval (webpack-internal:///./node_modules/zone.js/dist/zone.js:831:57) at ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:424:31) at Object.onInvokeTask (webpack-internal:///./node_modules/@angular/core/@angular/core.es5.js:4085:33) at ZoneDelegate.invokeTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:423:36) at Zone.runTask (webpack-internal:///./node_modules/zone.js/dist/zone.js:191:47) id : 1 url : "/"

I know the path to the module is correct, as I can import this module without problem in the same file:

import {IndexModule} from './pages/default/index/index.module';

My Webpack config is using this to proccess the typescript:

module: {
    rules: [{
        test: /\.ts$/,
        enforce: 'pre',
        loaders: 'tslint-loader',
        exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
    },
    {
        test: /\.ts$/,
        loaders: [
            'awesome-typescript-loader',
            'angular-router-loader?debug=true',
            'angular2-template-loader'
        ]
    }

Is there something wrong I'm doing I didn't notice?

You need something like this: npmjs.com/package/angular-router-loader — Michael Kang
– Michael Kang, Commented Oct 3, 2017 at 5:02
hi @brevleq. did you get ans for this? If yes, kindly update here. — Talha Junaid
– Talha Junaid, Commented Apr 5, 2018 at 23:57

brijmcq · Accepted Answer · 2017-10-02 23:58:51Z

0

The location of your lazy-loaded modules should start at the app folder. Try to add the app keyword to your string like this

loadChildren: 'app/theme/pages/default/index/index.module#IndexModule'},

Also I think you are missing a curly brace here

{
    "path": "",
    "component": ThemeComponent,
    "canActivate": [AuthGuard],
    "children": [
        {
            "path": "index",
             loadChildren: 'app/theme/pages/default/index/index.module#IndexModule'},\

        }
    ]
} <-------- ,

edited Oct 2, 2017 at 23:58

answered Oct 2, 2017 at 23:35

brijmcq

3,4182 gold badges19 silver badges34 bronze badges

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

6 Comments

brijmcq Over a year ago

can you show the path to your indexModule from the app folder?

brevleq Over a year ago

added a print of the path

brijmcq Over a year ago

of course it will not work! I just give you the idea to fix it. well i'll update my answer :)

brevleq Over a year ago

yes, I've already tried use full path: NavigationError {id: 1, url: "/", error: Error: Cannot find module 'app/theme/pages/default/index/index.module'

brijmcq Over a year ago

Don't use the indexmodule inside the children. Move it to its own path

|

brevleq · Accepted Answer · 2018-04-10 13:13:23Z

0

Instead of import using module path, I discovered I can import using function. This way it worked:

{
    "path": "index",
    "loadChildren": () => IndexModule
}

answered Apr 10, 2018 at 13:13

brevleq

1,94310 gold badges55 silver badges101 bronze badges

1 Comment

k102 Over a year ago

But this is not lazy loading. Is there a solution to still use loadChildren as a string?

Michael Kang · Accepted Answer · 2017-10-03 05:21:34Z

-1

If you're using webpack, you need the angular-router-loader:

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

Create a module which loads additional routes:

const routeModule:ModuleWithProviders = RouterModule.forChild(routes);
@NgModule({
    imports:      [ routeModule ],
    declarations: [ ... ]
})
export class InboxModule{ }

Create your routes and reference the lazy-loaded module (the path is relative):

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: 'index', loadChildren: './theme/pages/default/index/index.module#IndexModule' }
];

answered Oct 3, 2017 at 5:21

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

1 Comment

Michael Kang Over a year ago

the path to IndexModule is relative to AppModule, are you sure the path is correct? Try adding the 'theme' to the path like my example...

Collectives™ on Stack Overflow

Angular with Webpack - loadChildren can't find the module

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related