2

I have a been building a dashboard application using Angular for the last 6 months in that time I have had a really nice development workflow using JiT compilation and gulp browser sync to get instant updates when I make changes. Which has worked great.

I have come to the point where I am happy to deploy a production version, however, I have run into issues with AoT and rollup.

I have followed the angular.io guide but got the following

ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded
    at _throwError (build.js:5036)
    at Compiler.compileModuleAsync (build.js:5065)
    at MergeMapSubscriber.project (build.js:34798)
    at MergeMapSubscriber._tryNext (build.js:30450)
    at MergeMapSubscriber._next (build.js:30440)
    at MergeMapSubscriber.Subscriber.next (build.js:425)
    at ScalarObservable._subscribe (build.js:846)
    at ScalarObservable.Observable._trySubscribe (build.js:708)
    at ScalarObservable.Observable.subscribe (build.js:696)
    at MergeMapOperator.call (build.js:30415)
    at _throwError (build.js:5036)
    at Compiler.compileModuleAsync (build.js:5065)
    at MergeMapSubscriber.project (build.js:34798)
    at MergeMapSubscriber._tryNext (build.js:30450)
    at MergeMapSubscriber._next (build.js:30440)
    at MergeMapSubscriber.Subscriber.next (build.js:425)
    at ScalarObservable._subscribe (build.js:846)
    at ScalarObservable.Observable._trySubscribe (build.js:708)
    at ScalarObservable.Observable.subscribe (build.js:696)
    at MergeMapOperator.call (build.js:30415)
    at resolvePromise (zone.js:769)
    at resolvePromise (zone.js:740)
    at zone.js:817
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (build.js:6048)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at ZoneTask.invoke (zone.js:490)

I am also using a number of different angular plugins that could be causing the issue (however I couldn't find any reference to an AoT issue) namely MyDatePicker and MyDateRangePicker. I also have a couple of js libraries including D3.js and momement.js

So my question is, is there somthing that I am doing wrong that is causing my build.js file to throw runtime compiler is not loading?

If anyone has any insight into the issue it would be greatly appreciated if you require any specific code snippets let me know, as I mentioned my tsconfig-aot.json and rollup-config.json is essentially the same as in angular.io

Thanks in advance

Oliver Cooke
  • 1,059
  • 1
  • 8
  • 22
  • A minimap reproduce scenario would be helpful. Do you have a github repo where you extracted esssentials bits of code that can help isolate the problem and reduce time to fix it? – yurzui Jun 02 '17 at 07:57
  • @yurzui I have added some bits that I think might be relevant, let me know if you would like any additional files. https://github.com/OliverJACooke/AngularAoTIssues – Oliver Cooke Jun 02 '17 at 08:14
  • 1
    Where do you use compiler? You can find it by using error callstack. Just put breakpoint in `compileModuleAsync ` – yurzui Jun 02 '17 at 08:23
  • If you use it then you can work around it like https://github.com/angular/angular/issues/15510#issuecomment-294301758. It you don't then you need to find from which packages it is called – yurzui Jun 02 '17 at 08:28
  • Ok so I have a specific module it is referencing from putting a breakpoint where you suggested, I will have a look at those specificly. – Oliver Cooke Jun 02 '17 at 08:41
  • There is no reference to Compiler in the module, so will have a look at 3rd party packages – Oliver Cooke Jun 02 '17 at 08:59
  • @yurzui I have had a look through my code files with the referenced module but can't see the use of compiler anywhere, I also commented out the use of the date picker used in that module with no success. Is there something I need to be looking for other than compiler being imported. I have also done a search for compiler with my entire solution and it is not used. – Oliver Cooke Jun 02 '17 at 09:21
  • 1
    Where is `compilModuleAsync` come from? Did you try to debug it? Just open browser console and investigate – yurzui Jun 02 '17 at 09:24
  • @yurzui Looks like the RouterConfigLoader specifically loadChildren seems to be referenced, that's where its erroring within it. – Oliver Cooke Jun 02 '17 at 09:27
  • @yurzui Commenting out the use of load children fixed it thanks – Oliver Cooke Jun 02 '17 at 09:42

1 Answers1

0

Big thanks to yurzui in the comments for helping me answer my own question.

The approach that helped me find where the runtime compiler was being loaded in was to go into my generated build.js and finding the use of compileModuleAsync. I found it within the loadChildren method, after removing its use the project ran successfully in the browser.

However, I am not sure as to why loadChildren is causing the compiler to load in on rollup.

Hope this helps.

Oliver Cooke
  • 1,059
  • 1
  • 8
  • 22