angular: Lazy loading modules with the Router with webpack 2 still not work

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior A webpack 2 project as described here: https://angular.io/docs/ts/latest/guide/webpack.html

A lazy loading configuration as described here: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load

When clicking an anchor which leads to an lazy loaded module I get this error:

EXCEPTION: Uncaught (in promise): Error: Cannot find module ‘app/configuration/configuration.module’.

Error: Uncaught (in promise): Error: Cannot find module ‘app/configuration/configuration.module’.

zone.js?fad3:344 Unhandled Promise rejection: Cannot find module ‘app/configuration/configuration.module’. ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find module ‘app/configuration/configuration.module’.(…) Error: Cannot find module ‘app/configuration/configuration.module’.

I also see this warnings when the app is launching:

./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 45:15 Critical dependency: the request of a dependency is an expression CriticalDependencyWarning: Critical dependency: the request of a dependency is an expression

./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js 57:15 Critical dependency: the request of a dependency is an expression CriticalDependencyWarning: Critical dependency: the request of a dependency is an expression

Expected behavior That lazy loading modules works as described in the documentation in a webpack 2 infrastructure also described in the documentation.

Reproduction of the problem Follow the documentation.

A webpack 2 project as described here: https://angular.io/docs/ts/latest/guide/webpack.html

A lazy loading configuration as described here: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load

What is the motivation / use case for changing the behavior? As a user I want to follow the documentation with the result of a working application.

Please tell us about your environment: Linux

Angular version: 2.0.0 and webpack 2.1.0-beta.22
Browser: Chrome Version 53.0.2785.116 (64-bit)
Language: TypeScript 2.0.2
Node (for AoT issues): node --version = 6.5.0

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 5
Comments: 29 (13 by maintainers)

Most upvoted comments

update your cli@webpack to the latest https://github.com/angular/angular-cli#working-with-master
for your lazy route

{
        path: 'route_name', loadChildren: () => new Promise(resolve => {
            (require as any).ensure([], require => {
                resolve(require('./path/to/yourmodule').ModuleName);
            })
        })
    },

+12

ifaouibadi on Sep 15, 2016

You need https://github.com/brandonroberts/angular2-router-loader Here you can find usage example.

DzmitryShylovich on Sep 15, 2016

For anyone that couldn’t get angular2-router-loader to work, I had to upgrade angular2-template-loader from version 1.1.1 to version 2.2.4. After that, everything ran smoothly.

package.json

{
    "devDependencies": {
        "angular2-router-loader": "^0.3.3",
        "angular2-template-loader": "^0.6.0",
        "awesome-typescript-loader": "^2.2.4"
    }
}

webpack.config.js

module.exports = {
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular2-router-loader'
                ]
            }
        ]
    }
}

Blackbaud-SteveBrush on Nov 2, 2016

if you’re using webpack 2 you can just use System.import

    {
        path: 'route_name', loadChildren: () => System.import('./path/to/yourmodule').then(mod => mod.ModuleName)
    },

PatrickJS on Jan 14, 2018

everytime you create a module, kill ng serve and restart again 😉

moparlakci on Sep 26, 2016

It is not a tslint option! It is a tsconfig option: "noImplicitAny": true,

Martin-Luft on Sep 15, 2016

angular 2 router loader works fine and people have already use it in their prod apps. If u have some issues create a repo with reproduction so we can help u to setup it correctly.

DzmitryShylovich on Sep 15, 2016

Yes I am seeing the same error module not found. How ever this code solve the issue.

path: 'route_name', loadChildren: () => new Promise(resolve => {
            (require as any).ensure([], require => {
                resolve(require('./path/to/yourmodule').ModuleName);
            })
        })

but i dont think its the perfect solution. Its just the workaround with webpack

haseeb200 on Sep 15, 2016