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

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 24
  • Comments: 55 (4 by maintainers)

Most upvoted comments

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)

+24
jjamid on Sep 1, 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

+12
jshifrin25 on Aug 22, 2019

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.

+11
CSchulz on May 29, 2018

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.

+6
dottodot on Jun 2, 2019

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.

+5
filipesilva on Sep 3, 2018

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

+3
renearias on Sep 23, 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 :

image

+3
mbrechet on Jul 4, 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: { }
    }
+3
beginor on Jun 13, 2019

Same issue here 😦

+3
evandrofuhr on Apr 2, 2019

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.

+3
amreshprasad on Oct 10, 2018

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.

+2
leonelngande on Aug 26, 2019

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]
  },
+1
vijayakumar-psg587 on Oct 25, 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

+1
jbexx on Jan 22, 2019
Read more comments on GitHub
← angular-cli: Error: Runtime compiler is not loaded
angular-cli: Error: SampleModule is not an NgModule →