Angular-cli: Error: Runtime compiler is not loaded with production configuration

Created on 1 May 2018 · 53Comments · Source: angular/angular-cli

Versions

Angular CLI: 6.0.0-rc.8
Node: 10.0.0
OS: darwin x64
Angular: 6.0.0-rc.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.11
@angular-devkit/build-angular     0.5.11
@angular-devkit/build-optimizer   0.5.11
@angular-devkit/core              0.5.11
@angular-devkit/schematics        0.5.11
@angular/cli                      6.0.0-rc.8
@ngtools/webpack                  6.0.0-rc.9
@schematics/angular               0.5.11
@schematics/update                0.5.11
rxjs                              6.0.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

Step 1

ng new temp --routing
ng g module content --routing
ng g component content/content
ng g component content/dashboard

Step 2

Import ContentModule in app.module.ts

Step 3

Add route to routes in app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: () => ContentModule
  }
];

Step 4

Add route to routes in content-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: ContentComponent,
    children: [
      { path: '', component: DashboardComponent },
    ]
  }
];

Step 5

ng serve --prod

Observed behavior

[Error] ERROR
Error: Uncaught (in promise): Error: Runtime compiler is not loaded bt@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:169141 compileModuleAsync@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:169320 http://localhost:4200/main.a44fbe50412077ad9b05.js:1:347535 _tryNext@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:155394 _next@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:155297 next@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:145942 http://localhost:4200/main.a44fbe50412077ad9b05.js:1:267505 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149203 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 _innerSub@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:155532 _tryNext@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:155475 _next@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:155297 next@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:145942 http://localhost:4200/main.a44fbe50412077ad9b05.js:1:267505 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149203 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 _innerSub@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:155532 _tryNext@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:155475 _next@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:155297 next@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:145942 _next@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:153019 next@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:145942 http://localhost:4200/main.a44fbe50412077ad9b05.js:1:150810 _trySubscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149434 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149225 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 subscribe@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149131 http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149640 e@http://localhost:4200/polyfills.2d976f42c1abc2acac30.js:1:13905 forEach@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:149606 activateRoutes@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:357574 http://localhost:4200/main.a44fbe50412077ad9b05.js:1:357443 e@http://localhost:4200/polyfills.2d976f42c1abc2acac30.js:1:13905 runNavigate@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:354384 onInvoke@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:172758 run@http://localhost:4200/polyfills.2d976f42c1abc2acac30.js:1:2459 http://localhost:4200/polyfills.2d976f42c1abc2acac30.js:1:13703 onInvokeTask@http://localhost:4200/main.a44fbe50412077ad9b05.js:1:172674 runTask@http://localhost:4200/polyfills.2d976f42c1abc2acac30.js:1:3154 d@http://localhost:4200/polyfills.2d976f42c1abc2acac30.js:1:10192 promiseReactionJob@[native code]
j — polyfills.2d976f42c1abc2acac30.js:1:12959
j — polyfills.2d976f42c1abc2acac30.js:1:12509
(anonymous function) — polyfills.2d976f42c1abc2acac30.js:1:13739
onInvokeTask — main.a44fbe50412077ad9b05.js:1:172675
runTask — polyfills.2d976f42c1abc2acac30.js:1:3155
d — polyfills.2d976f42c1abc2acac30.js:1:10193
promiseReactionJob
    at (main.a44fbe50412077ad9b05.js:1:167563)
    handleError (main.a44fbe50412077ad9b05.js:1:167760)
    next (main.a44fbe50412077ad9b05.js:1:179321)
    (anonymous function) (main.a44fbe50412077ad9b05.js:1:171284)
    __tryOrUnsub (main.a44fbe50412077ad9b05.js:1:148022)
    next (main.a44fbe50412077ad9b05.js:1:147199)
    _next (main.a44fbe50412077ad9b05.js:1:146271)
    next (main.a44fbe50412077ad9b05.js:1:145943)
    next (main.a44fbe50412077ad9b05.js:1:157070)
    emit (main.a44fbe50412077ad9b05.js:1:171065)
    run (polyfills.2d976f42c1abc2acac30.js:1:2460)
    onHandleError (main.a44fbe50412077ad9b05.js:1:173042)
    runGuarded (polyfills.2d976f42c1abc2acac30.js:1:2720)
    e (polyfills.2d976f42c1abc2acac30.js:1:11588)
    microtaskDrainDone (polyfills.2d976f42c1abc2acac30.js:1:11637)
    d (polyfills.2d976f42c1abc2acac30.js:1:10260)
    promiseReactionJob

Desired behavior

No error

Note that there is no error with ng serve.

Changing to loadChildren: './content/content.module#ContentModule' in app-routing.module.ts works with ng serve --prod but fails with ng serve. Error below...

[Error] ERROR – Error: Uncaught (in promise): TypeError: Array.prototype.map callback must be a function
map@[native code]
webpackAsyncContext@http://localhost:4200/main.js:59:37
loadAndCompile@http://localhost:4200/vendor.js:35289:82
loadModuleFactory@http://localhost:4200/vendor.js:53879:86
load@http://localhost:4200/vendor.js:53867:52
http://localhost:4200/vendor.js:52064:51
_tryNext@http://localhost:4200/vendor.js:67867:34
_next@http://localhost:4200/vendor.js:67857:26
next@http://localhost:4200/vendor.js:59201:23
http://localhost:4200/vendor.js:62619:24
subscribe@http://localhost:4200/vendor.js:58411:79
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
_innerSub@http://localhost:4200/vendor.js:67877:99
_tryNext@http://localhost:4200/vendor.js:67874:23
_next@http://localhost:4200/vendor.js:67857:26
next@http://localhost:4200/vendor.js:59201:23
_next@http://localhost:4200/vendor.js:67392:30
next@http://localhost:4200/vendor.js:59201:23
http://localhost:4200/vendor.js:74921:28
_trySubscribe@http://localhost:4200/vendor.js:58426:35
subscribe@http://localhost:4200/vendor.js:58411:106
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
http://localhost:4200/vendor.js:58450:43
ZoneAwarePromise@http://localhost:4200/polyfills.js:3207:37
forEach@http://localhost:4200/vendor.js:58446:31
activateRoutes@http://localhost:4200/vendor.js:54651:21
http://localhost:4200/vendor.js:54630:33
ZoneAwarePromise@http://localhost:4200/polyfills.js:3207:37
runNavigate@http://localhost:4200/vendor.js:54552:27
onInvoke@http://localhost:4200/vendor.js:33791:39
run@http://localhost:4200/polyfills.js:2454:49
http://localhost:4200/polyfills.js:3188:37
onInvokeTask@http://localhost:4200/vendor.js:33782:43
runTask@http://localhost:4200/polyfills.js:2504:57
drainMicroTaskQueue@http://localhost:4200/polyfills.js:2911:42
promiseReactionJob@[native code]
Error: Uncaught (in promise): TypeError: Array.prototype.map callback must be a function
map@[native code]
webpackAsyncContext@http://localhost:4200/main.js:59:37
loadAndCompile@http://localhost:4200/vendor.js:35289:82
loadModuleFactory@http://localhost:4200/vendor.js:53879:86
load@http://localhost:4200/vendor.js:53867:52
http://localhost:4200/vendor.js:52064:51
_tryNext@http://localhost:4200/vendor.js:67867:34
_next@http://localhost:4200/vendor.js:67857:26
next@http://localhost:4200/vendor.js:59201:23
http://localhost:4200/vendor.js:62619:24
subscribe@http://localhost:4200/vendor.js:58411:79
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
_innerSub@http://localhost:4200/vendor.js:67877:99
_tryNext@http://localhost:4200/vendor.js:67874:23
_next@http://localhost:4200/vendor.js:67857:26
next@http://localhost:4200/vendor.js:59201:23
_next@http://localhost:4200/vendor.js:67392:30
next@http://localhost:4200/vendor.js:59201:23
http://localhost:4200/vendor.js:74921:28
_trySubscribe@http://localhost:4200/vendor.js:58426:35
subscribe@http://localhost:4200/vendor.js:58411:106
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
subscribe@http://localhost:4200/vendor.js:58408:26
http://localhost:4200/vendor.js:58450:43
ZoneAwarePromise@http://localhost:4200/polyfills.js:3207:37
forEach@http://localhost:4200/vendor.js:58446:31
activateRoutes@http://localhost:4200/vendor.js:54651:21
http://localhost:4200/vendor.js:54630:33
ZoneAwarePromise@http://localhost:4200/polyfills.js:3207:37
runNavigate@http://localhost:4200/vendor.js:54552:27
onInvoke@http://localhost:4200/vendor.js:33791:39
run@http://localhost:4200/polyfills.js:2454:49
http://localhost:4200/polyfills.js:3188:37
onInvokeTask@http://localhost:4200/vendor.js:33782:43
runTask@http://localhost:4200/polyfills.js:2504:57
drainMicroTaskQueue@http://localhost:4200/polyfills.js:2911:42
promiseReactionJob@[native code]
    defaultErrorLogger (vendor.js:31321)
    handleError (vendor.js:31370)
    next (vendor.js:34456:105)
    (anonymous function) (vendor.js:33441)
    __tryOrUnsub (vendor.js:59361)
    next (vendor.js:59299)
    _next (vendor.js:59237)
    next (vendor.js:59201)
    next (vendor.js:58916)
    emit (vendor.js:33433)
    run (polyfills.js:2454)
    onHandleError (vendor.js:33813)
    runGuarded (polyfills.js:2470)
    _loop_1 (polyfills.js:2993)
    microtaskDrainDone (polyfills.js:3002)
    drainMicroTaskQueue (polyfills.js:2918)
    promiseReactionJob

devkibuild-angular browser broken triage #1 bufix

Source

doovers

👍24

Most helpful comment

Mine was using the template tag ` instead of '.
It seems this definition is very very sensitive

Doesn't work:

loadChildren: () => import(`./home/home.module`).then(m => m.HomeModule)

Works:

loadChildren: () => import(\'./home/home.module\').then(m => m.HomeModule)

jjamid on 1 Sep 2019

👍9 🎉6 👀3 ❤3 🚀2

All 53 comments

Have something very similar, but i'm still on CLI v1.7.3

aaronfrost on 25 May 2018

I am getting the same issue, when I use the Compiler in my code running with Angular CLI: 6.0.3 and activating AOT build.

CSchulz on 29 May 2018

👍10

I have the same problem using ng build --prod and ng serve --prod running latest Angular CLI: 6.1.2.
Is there any update on the issue?

basettoni89 on 7 Aug 2018

same issue, darn :(

Arxero on 25 Aug 2018

Hello, is any solution?

yornel13 on 31 Aug 2018

Heya, I followed the repro provided by @doovers steps 1 to 5 and could see the same error message (Error: Runtime compiler is not loaded).

This message is intended though. Angular CLI only supports lazy route detection via the loadChildren string syntax, while the repro uses a function instead. Since the lazy route is not detected and compiled via AOT, that error comes up.

Then I tried replacing loadChildren: () => ContentModule with loadChildren: './content/content.module#ContentModule' and saw the Uncaught (in promise): TypeError: undefined is not a function error on ng serve only.

It's not a very helpful error message. It happens because ContentModule is being both lazily imported (in app-routing.module.ts) and imported directly (in app.module.ts). Here we should either fix the error, or provide a good error message about this situation.

filipesilva on 3 Sep 2018

🎉3 👍1

I meet this problem,too.anybody help?thx.

wyy0117 on 27 Sep 2018

I am hitting the same problem. Whichever way we chose to lazy load the children routes, either the production build (ng build --prod) or development (ng serve) build breaks.

amreshprasad on 10 Oct 2018

👍3

Any update ?

Muzammil-Bilwani on 26 Nov 2018

No update for this yet? Also running into this issue.

jbexx on 22 Jan 2019

To resolve the issues you have you can check @filipesilva's comment above. As he mentions, this is more or less the intended behavior but the error messages are bad and we need to fix them.

mgechev on 22 Jan 2019

thanks @mgechev, I did see @filipesilva comment and it was helpful. Previously I was getting errors using a string with loadChildren and moved to using a function which caused our production build to fail though it worked in development (Angular 7). I think we've sorted it out now with the string syntax for both dev and prod. Thank you

jbexx on 22 Jan 2019

🎉1

Hi @jbexx ,

Would you please let us know, how did you able to fix this issue using string syntax ?
I'm using Angular 7, but getting "Uncaught (in promise): TypeError: undefined is not a function" using string syntax.

Thanks,
Umakanta

umakantabehera on 23 Jan 2019

@umakantabehera ,

I wish I could give you details as to how it worked for us, but honestly I don't know. What I did was just switched the functions out for the strings when building for production and it happened to also work again in our dev env. I don't know why it was breaking before and now it isn't.

So instead of loadChildren: someFncThatReturnsModule I simply used the string syntax loadChildren: './path/to/module.module#TheModule'

I assume you are trying to run in prod mode? Can you post a snippet of the code in the router that you think is breaking?

jbexx on 23 Jan 2019

Thanks @jbexx. It worked!
But every time I have to run "ng serve --prod" to make a successful build in dev env using string syntax which is little bit time consuming.

Do you have any work around to use string syntax for dev env, I mean making a dev build using string syntax (ng serve) ?

umakantabehera on 24 Jan 2019

Im sorry @umakantabehera , I don't have a workaround for you right now.

jbexx on 26 Jan 2019

If I turn AOT off in Prod this should go away (as a temp solution), right?

carl-parrish on 25 Mar 2019

Same issue here :(

evandrofuhr on 2 Apr 2019

👍3

Same issue on v. 7.2.12

tyurin-ilya on 8 Apr 2019

Same issue on v. 7.3.9

Aw3same on 13 May 2019

use: { path: '', loadChildren: '../../page/home/home.module#HomeModule' }
instead of { path: '', loadChildren: () => HomeModule }

run:
prodution: ng build --prod --aot=true --build--optimizer=true
developer: ng serve

huannguyenfit on 28 May 2019

I've started getting this error since updating to Angular 8, I'm using the new method for loadchildren i.e

      {
        path: 'custom',
        loadChildren: () =>
          import('./custom/custom.module').then(m => m.CustomModule)
      },

but I'm only getting the error on Angular Universal side, if I navigate to that route after the app has loaded it loads without issue. It's also only happening on one module. What is also confusing is that if I build and run locally I don't have the issue it's only when a deploy to kubernetes that I get the issue so not sure if I'm missing something in my docker build.

dottodot on 2 Jun 2019

👍6

@dottodot did you found a solution ?

I have the same problem here, since migrating to Angular 8.
The CLI change the way to write lazy routes but now I have this error.

C0ZEN on 4 Jun 2019

@C0ZEN Yes I used the index option i.e

 "index": "projects/client/src/index-prod.html",

and then to use the correct file in angular universal I just setup an environment variable

const indexFile = process.env.INDEX_FILE;

dottodot on 4 Jun 2019

@dottodot thanks for the answer.
However I am not sure that your problem was exactly the same as mine.

How did I solve my problem anyway:

Angular 8 change the way to write loadChildren when using the command ng update and sadly, converted it to a JIT only compatible syntax (a.k: the arrow function instead of the string syntax).

I managed to make it works once again in AOT by using the old - soon to be deprecated ? - string syntax.

C0ZEN on 4 Jun 2019

@C0ZEN sorry have a few issues going on at the moment and though it was a different one so ignore that. No I've not found a solution as yet.

dottodot on 4 Jun 2019

@dottodot as I said, I found a temporary solution by using the string syntax.
Did you try it ?

Example:

from:
loadChildren: () => import('./customer/customer.module').then(pageModule => pageModule.CustomerModule),

to:
loadChildren: './customer/customr.module#CustomerModule'

C0ZEN on 4 Jun 2019

@C0ZEN yes the old syntax works ok so will have to use that until I can find out why it's happening. Just seem odd that's it's only one module not all. Is it the same for you?

dottodot on 4 Jun 2019

@dottodot all modules are broken. It seems like anything at all has changed after the upgrade to Angular 8.

C0ZEN on 4 Jun 2019

[
  { provide: COMPILER_OPTIONS, useValue: compilerOptions, multi: true },
  { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
  { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
]

JitCompilerFactory still goes wrong when works with lazy loading in angular 7

@filipesilva @mgechev

vthinkxie on 5 Jun 2019

@dottodot @C0ZEN I'm not sure if the problem you are describing is the same as the original one described in this issue. The original issue was about error messages when using an unsupported syntax (like loadChildren: () => ComponentName, without import(), which we don't support). It wasn't related to Universal, but it seems like yours is. Can you open a new issue please with a reproduction that we can follow and debug?

@vthinkxie we haven't fixed the error messages for the original issue described here, so you should still get the same error message if you follow the reproduction provided. I think your issue might be different, even though the error message is the same, since it has different configuration options. Can you open a new issue with a reproduction as well please?

filipesilva on 5 Jun 2019

Hi @filipesilva
thank you for your quick response!
I double check it and found it works in angular 8 now, but still got errors when trying to enable ivy.
here is the issue with repro link, thanks a lot
https://github.com/angular/angular/issues/30862

vthinkxie on 5 Jun 2019

Cool, glad to hear. I'll keep an eye on the issue you linked to see if there's anything we need to do on the CLI side of things.

filipesilva on 5 Jun 2019

@filipesilva I ended up repeating the migration process and now it works, so there must have been something wrong in the first attempt, unfortunately I've no idea what it was to provide any useful feedback.

dottodot on 6 Jun 2019

I'm having this issue now. I'm getting ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded using the new syntax with import. Should I try and scrap my migration and start over? At this point I'm considering using the old string syntax just to find out if it can make things work.

Edit: I just did the update from scratch again. Was excruciating but it doesn't have this issue anymore. Something must have went wrong.

jamra on 8 Jun 2019

angular-cli version is 8.0.2, change lazy load to the traditional way works for me.

{
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.2",
    "@angular/cli": "~8.0.2"
  }
}

    {
        path: 'tracks',
-       loadChildren: () => {
-           return import('./tracks/tracks.module').then(m => m.TracksModule);
-       },
+      loadChildren: './tracks/tracks.module#TracksModule',
        canLoad: [XsrfGuard, AuthGuard],
        canActivate: [AuthGuard],
        data: { }
    }

beginor on 13 Jun 2019

👍3

Same issue on v8.0.1

mehmet-erim on 21 Jun 2019

I solved the problem.my pre-resolution environment is angular version 7.2.15 and node version 8.12.0.
solve method：

First, update angular 7.2.15 to 8.0.3 ，node 8.12.0 to 10.16.0

Second, change loadChildren syntax as follows:

it is work!

jz9423 on 24 Jun 2019

Hi,
same issue on 8.1.0.

Only on lazy loaded modules that contains other lazy loaded modules and a<router-outlet> tag.

The traditional lazy load synthax works.

Here is a github repo to show the issue : https://github.com/mbrechet/ng8-lazyload

The stackblitz link is here https://stackblitz.com/github/mbrechet/ng8-lazyload

Note : to reproduce the problem you must build or serve angular in production mode and click on account link.

Here the stacktrace error :

mbrechet on 4 Jul 2019

👍3

@dottodot @C0ZEN I faced the same issue but my problem was in the code
{
path: 'target',
loadChildren: () => import('./target/target.module').then((m => m.TargetModule))
},
so i removed the repeated parenthesis
loadChildren: () => import('./target/target.module').then(m => m.TargetModule)

Lidya164 on 22 Jul 2019

@mbrechet did you ever figure this out? I'm running into the same problem.

JWTappert on 25 Jul 2019

I figured mine out. I just threw away my changes and tried again from scratch. Didn't happen again. Someone else offered this advice on this thread and it worked for me. The update process isn't quite stable I suppose.

jamra on 25 Jul 2019

Hi,
same issue on 8.1.0.

Only on lazy loaded modules that contains other lazy loaded modules and a<router-outlet> tag.

The traditional lazy load synthax works.

Here is a github repo to show the issue : https://github.com/mbrechet/ng8-lazyload

The stackblitz link is here https://stackblitz.com/github/mbrechet/ng8-lazyload

Note : to reproduce the problem you must build or serve angular in production mode and click on account link.

Here the stacktrace error :

@mbrechet I was able to solve this issue by downgrading all of my angular packages to ^8.0.0 and setting "@angular-devkit/build-angular": "~0.800.0"

JWTappert on 25 Jul 2019

Hi,
@JWTappert With the last version of angular
"@angular-devkit/build-angular": "~0.802.1", "@angular/cli": "~8.2.1",
And without using async await synthax it works now for me.

I've updated my demo on github if you want to test : https://github.com/mbrechet/ng8-lazyload

mbrechet on 13 Aug 2019

It seems like the problem is that the transplier is not handling a multiline format of the arrow function.

This does not work:

{
path: 'custom',
loadChildren: () => {
return import('./custom/custom.module').then(m => m.CustomModule);
}
}

But This does work:

{
path: 'custom',
loadChildren: () => import('./custom/custom.module').then(m => m.CustomModule)
}

When changing the function to a single line it works with the Angular 8

jshifrin25 on 22 Aug 2019

😄4 👍4 🚀1 ❤1 🎉1 👎1

It seems like the problem is that the transplier is not handling a multiline format of the arrow function.

This does not work:

{
path: 'custom',
loadChildren: () => {
return import('./custom/custom.module').then(m => m.CustomModule);
}
}

But This does work:

{
path: 'custom',
loadChildren: () => import('./custom/custom.module').then(m => m.CustomModule)
}

When changing the function to a single line it works with the Angular 8

Funny, this actually worked for me too.

leonelngande on 26 Aug 2019

👍2

Mine was using the template tag ` instead of '.
It seems this definition is very very sensitive

Doesn't work:

loadChildren: () => import(`./home/home.module`).then(m => m.HomeModule)

Works:

loadChildren: () => import(\'./home/home.module\').then(m => m.HomeModule)

jjamid on 1 Sep 2019

👍9 🎉6 👀3 ❤3 🚀2

@cesee I faced the same issue and your solution worked for me as well.

`Angular CLI: 8.3.2
Node: 12.9.1
OS: darwin x64
Angular: 8.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.803.2
@angular-devkit/build-angular 0.803.2
@angular-devkit/build-optimizer 0.803.2
@angular-devkit/build-webpack 0.803.2
@angular-devkit/core 8.3.2
@angular-devkit/schematics 8.3.2
@angular/cdk 8.1.4
@angular/cli 8.3.2
@angular/fire 5.2.1
@angular/flex-layout 8.0.0-beta.27
@angular/material 8.1.4
@angular/material-moment-adapter 8.1.4
@ngtools/webpack 8.3.2
@schematics/angular 8.3.2
@schematics/update 0.803.2
rxjs 6.5.2
typescript 3.5.3
webpack 4.39.2`

saturnino on 5 Sep 2019

Mine was using the template tag ` instead of '.
It seems this definition is very very sensitive

Doesn't work:

loadChildren: () => import(./home/home.module).then(m => m.HomeModule)

Works:

loadChildren: () => import('./home/home.module').then(m => m.HomeModule)

this work for me

renearias on 23 Sep 2019

😄2 👍1

I did the same as above but it did not work for me :(
I really like the new way of lazy loading modules with import but that doesn't seem to work. I removed the template tag and replaceed with ' . Also removed the line breaks, but it did not work
Only reverting back to old style of laxy loading worked for me.

 {
    path: 'login',
    loadChildren: './modules/login/login.module#LoginModule'
  },
  {
    path: 'feedback',
    loadChildren: './modules/feedback/feedback.module#FeedbackModule',
    canLoad: [AuthenticateGuard]
  },

vijayakumar-psg587 on 25 Oct 2019

👍1

@jshifrin25 I can't believe it, but this actually did it!! Thanks!

scipper on 16 Dec 2019

Hi,

I have angular CLI 8.1.3 then also i am facing same issues,
Here is my code:

{ path: 'splash', loadChildren: () => import('./pages/splash/splash.module').then( m => m.SplashPageModule) },
{ path: 'login', loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule) },

shubhamappstec on 21 Jan 2020

I had the same problem. The solution was:

  {
    path: 'categorias',
    loadChildren: './categorias/categorias.module#CategoriasModule'
  }

This does not work:

  {
    path: 'categorias',
    loadChildren: () => import('./categorias/categorias.module').then(m => m.CategoriasModule)
  }

It was necessary to change the version of the dependency:
"@angular-devkit/build-angular": "^0.13.0",

jarddel on 24 Feb 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Critical dependency: the request of a dependency is an expression

delasteve · 3Comments

Where to add Images and other files in 1.0.0-beta.14

MateenKadwaikar · 3Comments

Enabling ng serve to use https

jmurphzyo · 3Comments

Webpack: Getting warning from one npm package when running ng serve

5amfung · 3Comments

Imports in styles.scss are not accessible from *.component.scss

donaldallen · 3Comments