错误：未加载运行时编译器错误：未在angular 2中加载运行时编译器

Question

In my angular2 project I have used compiler service to make a dynamic module and render it at runtime in the app. Issue is that when I run the command ng build --prod, it completed process without any error but after hosting it to the herokuapp If I run my app , it gives me error like,

core.js.pre-build-optimizer.js:15714 

ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded Error: Runtime compiler is not loaded

at t.rd (core.js.pre-build-optimizer.js:16852)
at e.<anonymous> (pdf-load.component.ts:69)
at tslib.es6.js.pre-build-optimizer.js:97
at Object.next (tslib.es6.js.pre-build-optimizer.js:78)
at tslib.es6.js.pre-build-optimizer.js:71
at new t (zone.js.pre-build-optimizer.js:910)
at Object.u (tslib.es6.js.pre-build-optimizer.js:67)
at e._next (pdf-load.component.ts:55)
at e.__tryOrUnsub (Subscriber.js.pre-build-optimizer.js:196)
at e.next (Subscriber.js.pre-build-optimizer.js:134)
at P (zone.js.pre-build-optimizer.js:831)
at new t (zone.js.pre-build-optimizer.js:913)
at Object.u (tslib.es6.js.pre-build-optimizer.js:67)
at e._next (pdf-load.component.ts:55)
at e.__tryOrUnsub (Subscriber.js.pre-build-optimizer.js:196)
at e.next (Subscriber.js.pre-build-optimizer.js:134)
at e._next (Subscriber.js.pre-build-optimizer.js:77)
at e.next (Subscriber.js.pre-build-optimizer.js:54)
at e._next (map.js.pre-build-optimizer.js:41)
at e.next (Subscriber.js.pre-build-optimizer.js:54)

How can I resolve this error?

Answer 1

Heroku uses postinstall and preinstall hooks which you can use to build:

"preinstall": "npm install -g http-server",
"postinstall": "ng build --prod"

You can also use the "start" hook to serve:

"start": "http-server dist/"

If anyone needs to deploy to heroku, pls, read this article first: https://m.alphasights.com/using-nginx-on-heroku-to-serve-single-page-apps-and-avoid-cors-5d013b171a45#.drmqhuard

Use this build pack: https://github.com/heroku/heroku-buildpack-static

And this static.json:

{
  "root": "dist/",
  "routes": {
    "/**": "index.html"
  }
}