fix(lazy-loading): fix an issue with webpack and lazy loader. by hansl · Pull Request #11387 · angular/angular

hansl · 2016-09-06T17:39:33Z

Please check if the PR fulfills these requirements

Tests for the changes have been added (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x")

[X] Bugfix

What is the current behavior? (You can also link to an open issue here)
Webpack will not recognize the call to System.import() following PR #11049.

What is the new behavior?
Webpack will recognize the call to System.import() and properly inject its logic to load the bundle.

The issue was introduced in PR#11049.

Fixes angular#4756 style(dom_renderer): use const (angular#11229) build: update the symlinks scripts for Windows to new packaging (angular#11192) docs(CHANGELOG): fix provider syntax (angular#11258) fixes angular#11256 fix typo (angular#11265) meesage => message refactor(EventManager): remove ListWrapper (angular#11363) fix(compiler): correctly type event handler proxy functions fix(compiler): error when `NgModule.bootstrap` contains `undefined` or `null` fix(lazy-loading): fix an issue with webpack and lazy loader. (angular#11387) The issue was introduced in PR#11049. feat(benchmarks): add targetable benchmarks back refactor(benchmarks): align tree benchmark with largetable benchmark - add ng2_switch benchmark to track `ngFor` over `ngSwitch` - measure create only, createDestroy and update - simplify the created dom - always add a style binding ci: update SauceLabs badge when running CI on master (angular#11352) build(test.sh): clear dist directory when the script starts This is to prevent stale files causing the tests to fail when we run them locally after checking out a new revision. build: remove obsolete presubmit.sh script test: cleanup playground/src/bootstrap.ts file docs: misc fixes. docs(common_module): Fix macro format docs(number_pipe): Add missing period sign docs(date_pipe): Fix suffix consistency docs(date_pipe): Fix missing quote docs(number_pipe): Fix incorrect article Looks like the word "Polyfill" does not start with a vowel pronunciation. docs(location_strategy): Fix code format Add missing \`\`\` at start. docs(i18n_plural_pipe): Fix code format docs(location): Add missing period sign refactor(ngSwitch): fix typo on parameter docs(di): Add missing quote docs(compiler): Fix typo docs(compiler): Add missing period sign docs(directives): Fix description for styles parameter docs(location_strategy): Add code language Revert for misunderstanding. Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe test: reactivate the remaining disabled tests in Edge (angular#11188) Fixes angular#4756 style(dom_renderer): use const (angular#11229) build: update the symlinks scripts for Windows to new packaging (angular#11192) docs(CHANGELOG): fix provider syntax (angular#11258) fixes angular#11256 fix typo (angular#11265) meesage => message refactor(EventManager): remove ListWrapper (angular#11363) fix(compiler): correctly type event handler proxy functions fix(compiler): error when `NgModule.bootstrap` contains `undefined` or `null` fix(lazy-loading): fix an issue with webpack and lazy loader. (angular#11387) The issue was introduced in PR#11049. feat(benchmarks): add targetable benchmarks back refactor(benchmarks): align tree benchmark with largetable benchmark - add ng2_switch benchmark to track `ngFor` over `ngSwitch` - measure create only, createDestroy and update - simplify the created dom - always add a style binding ci: update SauceLabs badge when running CI on master (angular#11352) build(test.sh): clear dist directory when the script starts This is to prevent stale files causing the tests to fail when we run them locally after checking out a new revision. build: remove obsolete presubmit.sh script test: cleanup playground/src/bootstrap.ts file docs: misc fixes. docs(common_module): Fix macro format docs(number_pipe): Add missing period sign docs(date_pipe): Fix suffix consistency docs(date_pipe): Fix missing quote docs(number_pipe): Fix incorrect article Looks like the word "Polyfill" does not start with a vowel pronunciation. docs(location_strategy): Fix code format Add missing \`\`\` at start. docs(i18n_plural_pipe): Fix code format docs(location): Add missing period sign refactor(ngSwitch): fix typo on parameter docs(di): Add missing quote docs(compiler): Fix typo docs(compiler): Add missing period sign docs(directives): Fix description for styles parameter docs(location_strategy): Add code language Revert for misunderstanding.

Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe test: reactivate the remaining disabled tests in Edge (angular#11188) Fixes angular#4756 style(dom_renderer): use const (angular#11229) build: update the symlinks scripts for Windows to new packaging (angular#11192) docs(CHANGELOG): fix provider syntax (angular#11258) fixes angular#11256 fix typo (angular#11265) meesage => message refactor(EventManager): remove ListWrapper (angular#11363) fix(compiler): correctly type event handler proxy functions fix(compiler): error when `NgModule.bootstrap` contains `undefined` or `null` fix(lazy-loading): fix an issue with webpack and lazy loader. (angular#11387) The issue was introduced in PR#11049. feat(benchmarks): add targetable benchmarks back refactor(benchmarks): align tree benchmark with largetable benchmark - add ng2_switch benchmark to track `ngFor` over `ngSwitch` - measure create only, createDestroy and update - simplify the created dom - always add a style binding ci: update SauceLabs badge when running CI on master (angular#11352) build(test.sh): clear dist directory when the script starts This is to prevent stale files causing the tests to fail when we run them locally after checking out a new revision. build: remove obsolete presubmit.sh script test: cleanup playground/src/bootstrap.ts file docs: misc fixes. docs(common_module): Fix macro format docs(number_pipe): Add missing period sign docs(date_pipe): Fix suffix consistency docs(date_pipe): Fix missing quote docs(number_pipe): Fix incorrect article Looks like the word "Polyfill" does not start with a vowel pronunciation. docs(location_strategy): Fix code format Add missing \`\`\` at start. docs(i18n_plural_pipe): Fix code format docs(location): Add missing period sign refactor(ngSwitch): fix typo on parameter docs(di): Add missing quote docs(compiler): Fix typo docs(compiler): Add missing period sign docs(directives): Fix description for styles parameter docs(location_strategy): Add code language Revert for misunderstanding. Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe Proper case pipe test: reactivate the remaining disabled tests in Edge (angular#11188) Fixes angular#4756 style(dom_renderer): use const (angular#11229) build: update the symlinks scripts for Windows to new packaging (angular#11192) docs(CHANGELOG): fix provider syntax (angular#11258) fixes angular#11256 fix typo (angular#11265) meesage => message refactor(EventManager): remove ListWrapper (angular#11363) fix(compiler): correctly type event handler proxy functions fix(compiler): error when `NgModule.bootstrap` contains `undefined` or `null` fix(lazy-loading): fix an issue with webpack and lazy loader. (angular#11387) The issue was introduced in PR#11049. feat(benchmarks): add targetable benchmarks back refactor(benchmarks): align tree benchmark with largetable benchmark - add ng2_switch benchmark to track `ngFor` over `ngSwitch` - measure create only, createDestroy and update - simplify the created dom - always add a style binding ci: update SauceLabs badge when running CI on master (angular#11352) build(test.sh): clear dist directory when the script starts This is to prevent stale files causing the tests to fail when we run them locally after checking out a new revision. build: remove obsolete presubmit.sh script test: cleanup playground/src/bootstrap.ts file docs: misc fixes. docs(common_module): Fix macro format docs(number_pipe): Add missing period sign docs(date_pipe): Fix suffix consistency docs(date_pipe): Fix missing quote docs(number_pipe): Fix incorrect article Looks like the word "Polyfill" does not start with a vowel pronunciation. docs(location_strategy): Fix code format Add missing \`\`\` at start. docs(i18n_plural_pipe): Fix code format docs(location): Add missing period sign refactor(ngSwitch): fix typo on parameter docs(di): Add missing quote docs(compiler): Fix typo docs(compiler): Add missing period sign docs(directives): Fix description for styles parameter docs(location_strategy): Add code language Revert for misunderstanding.

haseeb200 · 2016-09-14T15:14:42Z

This is still not working after updating to Angular 2 rc7. Still gives me error module not found. This is what I am doing

app.routing.ts

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

const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    {
        path: 'strategies',
        loadChildren:  './strategies/strategies.module#StrategiesModule'
    }
]

export const appRoutingProviders: any[] = []; 

export const routing = RouterModule.forRoot(appRoutes);

strategies.module.ts

//angular
import { NgModule } from "@angular/core";

//strategies routing
import {
    StrategiesCenterComponent,
    StrategiesComponent,
    StrategiesFormComponent,
    StrategiesNewComponent,
    routing
} from "./";


@NgModule({..})

export default class StrategiesModule { 

}

strategies.routing.ts

//angular
import {Routes, RouterModule} from "@angular/router";

//strategy component
import {
    StrategiesCenterComponent,
    StrategiesComponent,
    StrategiesNewComponent
} from "./";

const appRoutes: Routes = [
    { 
        path: '', 
        component: StrategiesCenterComponent,
        children:[
            { path: '', component: StrategiesComponent },
            { path: 'new-strategy', component: StrategiesNewComponent },
            { path: 'new-strategy/:id', component: StrategiesNewComponent }

        ] 
    },
]

export const routing = RouterModule.forChild(appRoutes);

Error:

kamarouski · 2016-09-14T20:27:23Z

@haseeb200 It may require the full file name including extension. Try adding *.ts extension to your module file reference
loadChildren: './strategies/strategies.module.ts#StrategiesModule'

kamarouski · 2016-09-14T20:51:30Z

I've just updated to RC7 and trying to setup lazy loading with webpack and have the following error:

Do I still need to reference SystemJS while using webpack?

andyrue · 2016-09-14T20:55:44Z

Check your typings.d.ts file, in mine there is declare var System: any; which I believe would cause that error if it was missing.

kamarouski · 2016-09-14T21:25:20Z

@andyrue I probably don't have something set up correctly. What typings.d.ts are you referring to?

I have the following typings configuration (typings.json) so far in my project:

{ 
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
     "require": "registry:dt/require#2.1.20+20160316155526"
   } 
}

andyrue · 2016-09-14T21:34:53Z

@kamarouski Sorry...was jumping between different threads related to lazy loading and just realized this one wasn't related to angular-cli which comes with a typings.d.ts file already. I'm not familiar enough with how it all works to guide you on setting one up though. That's the only line in my typings.d.ts file but not sure how you might get your project to use it.

DaveMBush · 2016-09-15T11:23:16Z

I'm still seeing the same problem in the 2.0 Final as well. I'm assuming we must be missing some key step, but I can't find any documentation on what that might be.

haseeb200 · 2016-09-15T11:35:58Z

@DaveMBush use this code it will solve the issue for now.

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

DaveMBush · 2016-09-16T10:59:39Z

@haseeb200 Yes, of course, but this is exactly what this bug was suppose to fix.

MauroMS · 2016-09-18T22:32:05Z

Hi @haseeb200
I tried to use the coded provided, but I get this error message below:
error TS7006: Parameter 'require' implicitly has an 'any' type.

Could you please take a look in the code below and check if I'm missing something? I'm using Angular v2.0

`
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'login',
loadChildren: () => new Promise(resolve => {
(require as any).ensure([], require => {
resolve(require('./ss-login/ss-login.module').LoginModule);
})
})
}
// { path: 'login', loadChildren: './ss-login/ss-login.module.ts#LoginModule' },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
`

Thanks,
Mauro

haseeb200 · 2016-09-19T10:06:13Z

@MauroMS use this
https://www.npmjs.com/package/angular2-router-loader

MauroMS · 2016-09-20T09:01:51Z

Thanks @haseeb200 ! But I figured out yesterday that my problem was a configuration on the tsconfig file...
I had this entry set to true as I got the default file from the angular website.
"noImplicitAny"

After setting it to false, worked as a charm.

angular-automatic-lock-bot · 2019-09-09T16:22:42Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

googlebot added the cla: yes label Sep 6, 2016

fix(lazy-loading): fix an issue with webpack and lazy loader.

3b74657

The issue was introduced in PR#11049.

hansl force-pushed the system-import branch from 469c3ea to 3b74657 Compare September 6, 2016 18:01

hansl added the action: review The PR is still awaiting reviews from at least one requested reviewer label Sep 6, 2016

IgorMinar added pr_state: LGTM action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Sep 6, 2016

IgorMinar self-assigned this Sep 6, 2016

hansl mentioned this pull request Sep 6, 2016

(bug)router/AOT Unable to use feature-modules in routing when doing AOT compilation #11075

Closed

mprobst merged commit d26a827 into angular:master Sep 6, 2016

slubowsky mentioned this pull request Sep 9, 2016

Error with lazy loading modules routing : Error: Uncaught (in promise): ReferenceError: System is not defined(…) angular/angular-cli#2033

Closed

angular-automatic-lock-bot Bot locked and limited conversation to collaborators Sep 9, 2019

Conversation

hansl commented Sep 6, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

haseeb200 commented Sep 14, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kamarouski commented Sep 14, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kamarouski commented Sep 14, 2016

Uh oh!

andyrue commented Sep 14, 2016

Uh oh!

kamarouski commented Sep 14, 2016

Uh oh!

andyrue commented Sep 14, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DaveMBush commented Sep 15, 2016

Uh oh!

haseeb200 commented Sep 15, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DaveMBush commented Sep 16, 2016

Uh oh!

MauroMS commented Sep 18, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

haseeb200 commented Sep 19, 2016

Uh oh!

MauroMS commented Sep 20, 2016

Uh oh!

angular-automatic-lock-bot Bot commented Sep 9, 2019

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

hansl commented Sep 6, 2016 •

edited

Loading

haseeb200 commented Sep 14, 2016 •

edited

Loading

kamarouski commented Sep 14, 2016 •

edited

Loading

andyrue commented Sep 14, 2016 •

edited

Loading

haseeb200 commented Sep 15, 2016 •

edited

Loading

MauroMS commented Sep 18, 2016 •

edited

Loading