Error: Runtime compiler is not loaded with production configuration

[doovers]

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

[aaronfrost]

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

[CSchulz]

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.

[basettoni89]

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?

[Arxero]

same issue, darn :(

[yornel13]

Hello, is any solution?

[filipesilva]

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.

[wyy0117]

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

[amreshprasad]

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.