1

Webpack has trouble finding a module that I am trying to lazy load with angular-router-loader.

I am using the following:
Webpack 2.2.1
Angular 5.2
angular-router-loader 0.8.2

Installed the angular-router-loader via npm, and added the loader to my webpack config::

       {
            test: /\.ts$/,
            use: ['awesome-typescript-loader', 'angular2-template-loader'],
            exclude: [/\.(spec|e2e)\.ts$/]
        },
        {
            test: /\.(ts|js)$/,
            loaders: [
              'angular-router-loader'
            ]
        },

The project layout looks like this:

app/
  - app.routing.ts
  authenticated/
    property/
      - property.module.ts
      setup/
         - propertysetup.component.ts

In app.routing.ts:

const appRoutes: Routes = [
  {path: 'property', canActivate: [AuthGuard],
    loadChildren: './authenticated/property/property.module#PropertyModule'
  }
];

property.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { PropertySetupComponent } from './setup/propertysetup.component';

const routes: Routes = [
  {
    path: 'setup',
    component: PropertySetupComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    CommonModule
  ],
  exports: [
    RouterModule
  ],
  declarations: [
    PropertySetupComponent
  ]
})
export class PropertyModule { }

When I start webpack dev server, I can see in the console that angular-router-loader is replacing the string defined in loadChildren section of app.routing.ts:

[angular-router-loader]: --DEBUG--
[angular-router-loader]: File: e:\eclipse_workspace\projectNG\projectFrontend\src\app\app.routing.ts
[angular-router-loader]: Original: loadChildren: './authenticated/property/property.module#PropertyModule'
[angular-router-loader]: Replacement: loadChildren: function() { return new Promise(function (resolve, reject) {  (require as any).ensure([], function (require:
any) {    resolve(require('.\\authenticated\\property\\property.module')

But I get the following warning from webpack:

WARNING in ./src/app/app.routing.ts
44:84-91 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Then when I try to go to the path (http://localhost:3000/#/property/setup) in a browser, I get the following stack trace error from the browser console:

 ERROR Error: Uncaught (in promise): Error: Cannot find module "."
    Error: Cannot find module "."
        at webpackMissingModule (eval at 903 (app.js:1618), <anonymous>:44:129)
        at eval (eval at 903 (app.js:1618), <anonymous>:44:208)
        at new ZoneAwarePromise (eval at <anonymous> (polyfills.js:4031), <anonymous>:875:29)
        at loadChildren (eval at 903 (app.js:1618), <anonymous>:44:44)
        at RouterConfigLoader.loadModuleFactory (eval at <anonymous> (vendor.js:156), <anonymous>:4647:109)

I have tried replacing the module path in loadChildren with an absolute path as well. E.g.

loadChildren: 'app/authenticated/property/property.module#PropertyModule'

But I get exactly the same warning from webpack, and error in the browser console as above.
I think I have followed the installation / usage instructions correctly from here: https://github.com/brandonroberts/angular-router-loader

Any suggestions / help much appreciated.

2
  • does this file exist: e:\eclipse_workspace\projectNG\projectFrontend\src\app\authenticated/property/property.module.ts? Commented Mar 14, 2018 at 7:11
  • Hi @pixelbits Yes the <b>property.module.ts</b> file exists at the location detailed above (app/authenticated/property), with the contents as listed. Commented Mar 15, 2018 at 13:49

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.