Lazy loaded chunk not generated when lazy route is a child of non-lazy route. #9488

jdcrecur · 2018-02-02T14:16:10Z

Versions

Angular CLI: 1.6.6
Node: 8.9.4
OS: linux x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cdk: 5.1.0
@angular/cli: 1.6.6
@angular/material: 5.1.0
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack-bundle-analyzer: 2.9.2
webpack: 3.10.0

Repro steps

Create an angular 5 app
In the main root module load 2 routes by module, but not lazy loaded.
In one of the child modules, lazy load subsequent modules

Observed behavior

Error thrown when loading the lazy route. When search for the chunk expected in the filesystem it is not there.

Desired behavior

The lazy loaded route is loaded via a chunk create created by webpack

Mention any other details that might be useful (optional)

SO question raised, but nobody has an answer:
https://stackoverflow.com/questions/48523411/angular-5-with-angular-cli-non-lazy-loading-modules-in-the-router

Demo code of the exact issue on github:
https://github.com/jdcrecur/ang5ModuleRouting

The text was updated successfully, but these errors were encountered:

ZeevKatz · 2018-02-04T15:16:57Z

I have the same issue +1

denyo · 2018-02-27T13:23:32Z

I just noticed the same issue when upgrading to angular 5.2.6 and angular/cli 1.7.1.
My lazy route is defined like

const appRoutes: Routes = [
  {
    path: 'whatever',
    loadChildren: 'app/modules/whatever/whatever.module#WhatEverModule',
    canActivate: [AuthGuard],
  }
]

And then imported within RoutingModule like RouterModule.forRoot(appRoutes).
RoutingModule is then imported in AppModule.

Until the upgrade everything was working perfectly.
Since the update the app compiles with ng serve but when I access the lazy route I get this error

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:20), <anonymous>:10:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
...

However it still works with ng serve --aot.
So it seems to be a JIT problem.

ng -v just for a reference

Angular CLI: 1.7.1
Node: 7.10.0
OS: darwin x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

There is also this recent issue on stack overflow: https://stackoverflow.com/questions/48991372/angular-error-uncaught-in-promise-at-webpackasynccontext-eval-at-src

supergithubo · 2018-02-28T18:39:11Z

@denyo
Confirmed bug on cli 1.7.0 and 1.7.1.
Downgrading to 1.6.8 works fine.

denyo · 2018-03-01T11:03:57Z

@supergithubo thanks!
angular cli at 1.6.8 does the trick in deed.
I also tried the most recent 1.7.2. cli but the bug is still there.

FirassKoubaa · 2018-03-01T16:33:53Z

+1

chrisbbe · 2018-03-01T21:50:57Z

+1

RyanLynnWood · 2018-03-02T22:01:48Z

Finally solved. Im running angular/cli ~1.7.0

the cause for me was due to the fact that in app.module, I was importing a file from a barrel that was also exporting the module i was trying to lazy load.

In all, make sure all the following are done:

Remove lazy loaded module from any barrel files.
Do not import lazy loaded module, using es6 import statement.
Restart angular-cli app.

For some reason, I had to kill node process and restart the app before angular-cli would work.

FirassKoubaa · 2018-03-04T13:07:52Z

@RyanLynnWood that did not sole the issue for me , still struggling

jdcrecur · 2018-03-04T19:05:45Z

@RyanLynnWood is it still fixed from a cold start, and the build folder removed?

sennl · 2018-03-06T16:38:15Z

+1 still an issue with 1.7.2

devakone · 2018-03-07T14:29:56Z

Confirmed as still an issue in 1.7.2

denyo · 2018-03-08T06:17:37Z

Bug persists with 1.7.3.

charlesartbr · 2018-03-11T00:27:10Z

Confirmed bug on cli 1.7.2.
Downgrading to 1.6.8 works fine.

webcat12345 · 2018-03-13T15:36:42Z

Confirmed bug on CLI 1.7.3. with Angular 5.2.8
Downgrading to 1.6.8 works fine.

MALIK-0 · 2018-03-13T21:52:33Z

Confirmed bug on CLI 1.7.3. with Angular 5.2.8
Downgrading to 1.6.8 works fine.

changan712 · 2018-03-14T05:51:48Z

restart ng server && work fine #

i23591326 · 2018-03-14T15:41:03Z

The only workaround for me is to change "loadChildren" string while --watch process running.
(CLI 1.6.8, Core and Router 5.2.8)

PrashanthGowda · 2018-03-15T12:33:56Z

Angular Version: 5.2.8
Cli Version 1.7.3

Error on Lazy loading,

Console:
ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
at Array.map ()
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), :14:34)
at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
at SystemJsNgModuleLoader.load (core.js:6542)
at RouterConfigLoader.loadModuleFactory (router.js:4584)
at RouterConfigLoader.load (router.js:4564)
at eval (router.js:6981)
at PreloadAllModules.preload (router.js:6857)
at RouterPreloader.preloadConfig (router.js:6980)
at RouterPreloader.processRoutes (router.js:6959)
at Array.map ()
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), :14:34)
at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
at SystemJsNgModuleLoader.load (core.js:6542)
at RouterConfigLoader.loadModuleFactory (router.js:4584)
at RouterConfigLoader.load (router.js:4564)
at eval (router.js:6981)
at PreloadAllModules.preload (router.js:6857)
at RouterPreloader.preloadConfig (router.js:6980)
at RouterPreloader.processRoutes (router.js:6959)
at resolvePromise (zone.js:809)
at eval (zone.js:861)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)

Update
I was using typescript 2.7.2, i was getting some warning for using typescript 2.7.2 so i downgraded my typescript to version 2.6.2 that error is not showing up, lazy loading is working fine

fromage9747 · 2018-03-16T10:41:36Z

+1
Same problem here using Angular CLI 1.7.2.

I'm using ng serve --aot as a workaround

ashutoshagg · 2018-03-18T09:35:50Z

+1
same problem here using Angular Cli 1.7.3

Console:
TypeError: undefined is not a function
at Array.map ()
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), :10:34)
at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
at SystemJsNgModuleLoader.load (core.js:6542)
at RouterConfigLoader.loadModuleFactory (router.js:4584)
at RouterConfigLoader.load (router.js:4564)
at MergeMapSubscriber.eval [as project] (router.js:2056)
at MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
at Array.map ()
at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), :10:34)
at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
at SystemJsNgModuleLoader.load (core.js:6542)
at RouterConfigLoader.loadModuleFactory (router.js:4584)
at RouterConfigLoader.load (router.js:4564)
at MergeMapSubscriber.eval [as project] (router.js:2056)
at MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
at resolvePromise (zone.js:809)
at resolvePromise (zone.js:775)
at eval (zone.js:858)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
at ZoneDelegate.invokeTask (zone.js:420)
at Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at

mbrookson · 2018-03-18T11:00:34Z

Can confirm this is a JIT compiler issue. serve --aot works with @angular/cli 1.7.3

cha0s · 2018-03-18T19:10:37Z

I also ran into this issue on 1.7.3.

cha0s · 2018-03-18T19:34:29Z

Actually, disregard that. I was importing my lazy-loaded module from the app's NgModule. Once I removed that import, the lazy loading worked correctly.

Perhaps the error messaging itself could be improved, regardless.

icanit · 2018-03-19T09:10:35Z

Angular Version: 5.2.9
Cli Version 1.7.3

I have same error on Lazy loading (without --aot), it begins firing after some recompilation when ng serve running, and after that it shows always.
Restarting ng serve don't solve anything, but killing ALL node.exe from task manager helps for some period of time and everything works fine.

This seems like some issue with caching.

i23591326 · 2018-03-19T09:15:04Z

It seems 'ng update' with clean 'npm i' solved this problem for me. Have no idea why.

fromage9747 · 2018-03-20T10:15:48Z

@benmalek3601 just tried reordering as you suggested. Same issue as before. only using --aot makes it compile correctly at this stage. At least for me, that is.

BitTerminator · 2018-03-20T22:17:20Z

I also had to downgrade from 1.7.3 to 1.6.8 to work around this issue.

ceyhunn · 2019-05-12T09:55:51Z

Hi @filipesilva ,
I have strange issue, lazy loading doesn't work. It really drives me crazy.
Please take a look this, I don't know what I missed, or this is a bug.

"dependencies": {
    "@agm/core": "^1.0.0-beta.5",
    "@angular/animations": "^7.2.15",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.15",
    "@angular/compiler": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/flex-layout": "7.0.0-beta.22",
    "@angular/forms": "^7.2.15",
    "@angular/http": "^7.2.15",
    "@angular/material": "^7.3.7",
    "@angular/material-moment-adapter": "^7.3.7",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/router": "^7.2.15",
    "@ngrx/effects": "^7.4.0",
    "@ngrx/router-store": "^7.4.0",
    "@ngrx/store": "^7.4.0",
    "@ngrx/store-devtools": "^7.4.0",
    "@ngx-translate/core": "^11.0.1",
    "@swimlane/ngx-charts": "^10.1.0",
    "@swimlane/ngx-datatable": "^14.0.0",
    "@swimlane/ngx-dnd": "^7.0.0",
    "@types/date-fns": "^2.6.0",
    "angular-calendar": "^0.27.7",
    "angular-in-memory-web-api": "^0.8.0",
    "angular2-markdown": "^2.2.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.0.1",
    "d3": "^5.9.2",
    "date-fns": "^1.30.1",
    "file-saver": "^2.0.1",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.15.6",
    "intl": "^1.2.5",
    "moment": "^2.24.0",
    "ngrx-store-freeze": "^0.2.4",
    "ngx-color-picker": "^7.5.0",
    "ngx-cookie-service": "^2.1.0",
    "ngx-drag-drop": "^2.0.0-rc.6",
    "ngx-infinite-scroll": "^7.1.0",
    "perfect-scrollbar": "^1.4.0",
    "primeng": "^7.1.2",
    "rxjs": "^6.5.1",
    "rxjs-compat": "^6.5.1",
    "tslib": "^1.9.0",
    "web-animations-js": "2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular/cli": "^7.3.9",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/language-service": "^7.2.15",
    "@angularclass/hmr": "^2.1.3",
    "@types/file-saver": "^2.0.0",
    "@types/jasmine": "^3.3.12",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^12.0.0",
    "codelyzer": "^5.0.1",
    "jasmine-core": "^3.4.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "^5.4.2",
    "ts-node": "^8.1.0",
    "tslint": "^5.16.0",
    "typescript": "3.2.4"
  }

ceyhunn · 2019-05-13T09:38:40Z

@filipesilva , I solved the problem.

[IMPORTANT NOTICE]

"skipTemplateCodegen": true option prevents Angular 7 to build lazy loading modules, but lazy loading modules works in Angular 5 with this option.

ricardosaracino · 2019-06-10T12:42:16Z

Finally solved. Im running angular/cli ~1.7.0

the cause for me was due to the fact that in app.module, I was importing a file from a barrel that was also exporting the module i was trying to lazy load.

In all, make sure all the following are done:

Remove lazy loaded module from any barrel files.

Do not import lazy loaded module, using es6 import statement.

Restart angular-cli app.

For some reason, I had to kill node process and restart the app before angular-cli would work.

I forgot to remove the Module from app.modules 🤦‍♂️ dont be like me

filipesilva · 2019-10-08T17:37:59Z

Is this still a problem that people are experiencing with recent Angular CLI versions?

jimmykane · 2019-10-31T19:58:08Z

Yes I am still having this issue .

pascalspadone · 2019-11-06T13:38:10Z

I was having this issue with angular-cli 8.1.3, with the (not ideal) workaround to touch app-routing.module.ts while ng-serving the app, but solved it thanks to #10673 (comment) . I had a non-exported class in my app.module.ts, and exporting it solved the issue. Dunno if that's supposed to be normal, as ES modules are mostly black magic to me.

Before finding that solution, I had tracked the problem down to the generated main.js. After launching the command ng build --watch, the beginning of that file was the following, and the angular app was not starting:

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["main"],{

/***/ "./$$_lazy_route_resource lazy recursive":
/*!******************************************************!*\
  !*** ./$$_lazy_route_resource lazy namespace object ***!
  \******************************************************/
/*! no static exports found */
/***/ (function(module, exports) {

function webpackEmptyAsyncContext(req) {
        // Here Promise.resolve().then() is used instead of new Promise() to prevent

After touching the file app-routing.module.ts , the beginning of main.js became the following (and the error was gone):

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["main"],{

/***/ "./$$_lazy_route_resource lazy recursive":
/*!******************************************************!*\
  !*** ./$$_lazy_route_resource lazy namespace object ***!
  \******************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var map = {
        "./login/login.module": [
                "./src/app/login/login.module.ts",
                "login-login-module"
        ],
        "./task-process/task-process.module": [
                "./src/app/task-process/task-process.module.ts",
                "default~task-process-task-process-module~tasks-list-tasks-list-module",
                "task-process-task-process-module"
        ],
        "./tasks-list/tasks-list.module": [
                "./src/app/tasks-list/tasks-list.module.ts",
                "default~task-process-task-process-module~tasks-list-tasks-list-module",
                "tasks-list-tasks-list-module"
        ]
};
function webpackAsyncContext(req) {
        if(!__webpack_require__.o(map, req))

Amit562877 · 2019-12-03T12:18:14Z

please do not import modules (lazy modules) in app.module.ts file

it'll reduce main.js file size and generates chunks as well

kunal00731 · 2020-10-19T11:38:13Z

@alan-agius4 Is there any more info on this ? Recently migrated to angular 7 . Lazy loading compilation in chunks is not happening for me . I have got typescripts errors as well , but that should not be linked to lazy loading compilation right ?

ricardosaracino · 2020-10-19T12:38:16Z

@alan-agius4 Is there any more info on this ? Recently migrated to angular 7 . Lazy loading compilation in chunks is not happening for me . I have got typescripts errors as well , but that should not be linked to lazy loading compilation right ?

I would clean the project if i were you. also put namedChunks on in the build to see if they are building correctly

kunal00731 · 2020-10-19T12:59:41Z

@ricardosaracino Thanks . I observed an issue right now after hours of debugging . The same issue was mentioned by @ceyhunn here in this exact thread : angular/angular#27023 (comment) .

When I first try ng serve, I just get 6 chunks : main.js, polyfills.js, runtime.js, scripts.js, styles.js and vendor.js along with various typescript errors (I am okay with typescript errors since they are coming up as typescript has been updated from 2.4 to 3.1 and according to me they are expected and can be resolved) . What's strange is : as per @ceyhunn when I now go to the app.module.ts, where my routes are mentioned and just try : CONTROL+S by introducing some blank characters using backspace , then all the lazy loading named chunks start showing up in the terminal . I had opened an issue regarding that earlier : #19092 which basically explains my situation with screen shots .

Do you @ricardosaracino or @ceyhunn have any idea as to what is causing this strange behavior and how it can be resolved ?

ricardosaracino · 2020-10-19T13:18:23Z

one thing to note and im not etirely sure when it was introduced is that angular started to use a angular.json file. this might be the cause of some problems.

kunal00731 · 2020-10-19T13:26:46Z

@ricardosaracino Agreed . However I already have the angular.json file . They introduced it in angular 6 . So when I migrated the project from angular 4 to 7 , my angular-cli.json got converted into angular.json automatically .

alan-agius4 · 2020-11-12T12:21:33Z

There seems to be multiple reported issues in here which is hard to follow and hard to answer.

That said, the original reported here should not longer be reproducible in newer versions of the Angular CLI. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

Important to point out that Angular versions prior to 8 are no longer supported and version 8 is currently in LTS which support will terminate on the Nov 28, 2020. See https://angular.io/guide/releases#support-policy-and-schedule for more information.

angular-automatic-lock-bot · 2020-12-13T08:11:11Z

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.}

clydin added the comp: cli/build label Feb 2, 2018

This was referenced Mar 8, 2018

$$_lazy_route_resource lazy recursive #9775

Closed

[Bug] cli needs to be reloaded when a lazy loaded module is added in routes (FIXED) #9825

Closed

filipesilva added needs: more info Reporter must clarify the issue and removed freq2: medium help wanted severity2: inconvenient type: bug/fix labels Oct 8, 2019

ngbot bot modified the milestones: Backlog, needsTriage Oct 8, 2019

kyliau added triage #1 devkit/build-angular:browser labels May 26, 2020

alan-agius4 self-assigned this Jun 19, 2020

alan-agius4 closed this as completed Nov 12, 2020

angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 13, 2020

Lazy loaded chunk not generated when lazy route is a child of non-lazy route. #9488

Lazy loaded chunk not generated when lazy route is a child of non-lazy route. #9488

Comments

jdcrecur commented Feb 2, 2018

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

ZeevKatz commented Feb 4, 2018

denyo commented Feb 27, 2018 • edited Loading

supergithubo commented Feb 28, 2018

denyo commented Mar 1, 2018

FirassKoubaa commented Mar 1, 2018

chrisbbe commented Mar 1, 2018

RyanLynnWood commented Mar 2, 2018

FirassKoubaa commented Mar 4, 2018

jdcrecur commented Mar 4, 2018

sennl commented Mar 6, 2018

devakone commented Mar 7, 2018

denyo commented Mar 8, 2018

charlesartbr commented Mar 11, 2018

webcat12345 commented Mar 13, 2018

MALIK-0 commented Mar 13, 2018

changan712 commented Mar 14, 2018

i23591326 commented Mar 14, 2018

PrashanthGowda commented Mar 15, 2018 • edited Loading

fromage9747 commented Mar 16, 2018 • edited Loading

ashutoshagg commented Mar 18, 2018

mbrookson commented Mar 18, 2018

cha0s commented Mar 18, 2018

cha0s commented Mar 18, 2018

icanit commented Mar 19, 2018

i23591326 commented Mar 19, 2018

fromage9747 commented Mar 20, 2018

BitTerminator commented Mar 20, 2018

ceyhunn commented May 12, 2019

ceyhunn commented May 13, 2019

[IMPORTANT NOTICE]

ricardosaracino commented Jun 10, 2019

filipesilva commented Oct 8, 2019

jimmykane commented Oct 31, 2019

pascalspadone commented Nov 6, 2019

Amit562877 commented Dec 3, 2019 • edited Loading

kunal00731 commented Oct 19, 2020

ricardosaracino commented Oct 19, 2020

kunal00731 commented Oct 19, 2020 • edited Loading

ricardosaracino commented Oct 19, 2020

kunal00731 commented Oct 19, 2020

alan-agius4 commented Nov 12, 2020

angular-automatic-lock-bot bot commented Dec 13, 2020

denyo commented Feb 27, 2018 •

edited

Loading

PrashanthGowda commented Mar 15, 2018 •

edited

Loading

fromage9747 commented Mar 16, 2018 •

edited

Loading

Amit562877 commented Dec 3, 2019 •

edited

Loading

kunal00731 commented Oct 19, 2020 •

edited

Loading