AngularCli & AOT: ERROR Error: Runtime compiler is not loaded

Question

I'm trying to build my Angular4 application with Ahead of Time. The build process runs fine and without errors, but when I run the application I receive this error in console:

ERROR Error: Runtime compiler is not loaded
    at J (vendor.ac8dafb82366354245dd.bundle.js:1)
    at t.compileModuleSync (vendor.ac8dafb82366354245dd.bundle.js:1)
    at t.QFu1.t.createDynamicTemplate (vendor.ac8dafb82366354245dd.bundle.js:1)
    at t.QFu1.t.ngDoCheck (vendor.ac8dafb82366354245dd.bundle.js:1)
    at xn (vendor.ac8dafb82366354245dd.bundle.js:1)
    at pr (vendor.ac8dafb82366354245dd.bundle.js:1)
    at cr (vendor.ac8dafb82366354245dd.bundle.js:1)
    at Yr (vendor.ac8dafb82366354245dd.bundle.js:1)
    at Object.updateDirectives (vendor.ac8dafb82366354245dd.bundle.js:1)
    at Object.updateDirectives (vendor.ac8dafb82366354245dd.bundle.js:1)
b @ vendor.ac8dafb82366354245dd.bundle.js:1
vendor.ac8dafb….bundle.js:1 WebSocket connection to 'ws://null/algorilla/ws/websocket/' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
r @ vendor.ac8dafb….bundle.js:1

The application is navigable, but nothing works as it should! What I'm doing wrong? Why the compiled code references to a Runtime compiler?

I don't use any angular/compile components or service.

In my components I reference the service mock in this way:

@Component({
  selector: 'app-authorization',
  templateUrl: './authorization.component.html',
  providers: [
    { provide: SecurityService, useClass: (environment.mock ? SecurityServiceMock : SecurityService) }
  ]
})

If the var "environment.mock" is true, I use SecurityServiceMock, otherwise the real SecurityService.

Could this be the problem?

This is tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": false,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noStrictGenericChecks": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

package.json:

{
  "name": "xxx",
  "version": "0.9.6",
  "description": "xxx",
  "author": "",
  "url": "xxx",
  "copyright": "xxx",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "4.4.3",
    "@angular/common": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@angular/router": "4.4.3",
    "@angular/upgrade": "4.4.3",
    "@stomp/ng2-stompjs": "^0.4.2",
    "@types/highcharts": "^4.2.57",
    "@types/node": "^7.0.43",
    "@types/sockjs-client": "^1.0.32",
    "angular2-busy": "^2.0.4",
    "angular2-csv": "^0.2.5",
    "angular2-notifications": "^0.7.7",
    "angular2-prettyjson": "2.0.5",
    "angular2-websocket-service": "^0.5.3",
    "angular2gridster": "^0.6.7",
    "core-js": "2.4.1",
    "font-awesome": "^4.7.0",
    "highcharts": "^4.2.7",
    "js-beautify": "1.7.3",
    "moment": "2.18.1",
    "ng2-daterangepicker": "^2.0.7",
    "ng2-highcharts": "^1.0.0",
    "ng2-stomp-service": "^1.2.2",
    "ngx-bootstrap": "2.0.0-beta.6",
    "ngx-contextmenu": "^1.3.5",
    "ngx-cookie": "^1.0.0",
    "ngx-loading": "^1.0.5",
    "queueing-subject": "^0.1.1",
    "roboto-fontface": "^0.8.0",
    "roboto-mono-webfont": "^2.0.986",
    "rxjs": "5.4.1",
    "simple-line-icons": "^2.4.1",
    "sockjs-client": "^1.1.4",
    "stompjs": "^2.3.3",
    "t-json-viewer": "^1.2.0",
    "ts-helpers": "1.1.2",
    "typescript": "^2.4.0",
    "typings": "^2.1.1",
    "underscore": "^1.8.3",
    "vkbeautify": "0.99.3",
    "zone.js": "0.8.11"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0-rc.0",
    "@angular/compiler-cli": "4.4.3",
    "@types/jasmine": "2.5.47",
    "@types/node": "^7.0.22",
    "codelyzer": "3.0.1",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.1.2",
    "ts-node": "3.0.4",
    "tslint": "5.3.2",
    "typescript": "2.4.0"
  }
}

Have you read e.g. https://github.com/angular/angular/issues/11780? — jonrsharpe, Oct 15 '17 at 12:22
Yes, but I dont have any COMPILER_PROVIDERS declared in my modules — Pennywise83, Oct 15 '17 at 12:26
Please add your package.json. Which libraries are you using? — yurzui, Oct 15 '17 at 12:39
Find `createDynamicTemplate` method in your code. It can be inside node_modules — yurzui, Oct 15 '17 at 12:42
Bingo! I found in one external module! I'll try to disable this module. I let you know, thanks — Pennywise83, Oct 15 '17 at 12:45

cyr_x · Answer 1 · 2017-10-15T13:07:18.147

1

You're using the compileModuleSync from the Compiler service, which is called by the createDynamicTemplate method. The angular compiler cli is analyzing your code and is creating metadata from your templates and classes (ngFactory files) and removes the compiler module entirely from your application when using AOT.

Don't use any services or methods from the angular/compiler package if you want to use AOT.

Could you add the package.json file to your answer, there might be a 3rd party library which isn't AOT ready.

Sitenote: The way you're mocking your services looks a little bit weird, you could just provide the service and then override it if environment.mock ist true. For example:

let myProviders = [
  SecurityService
];

if(environment.mock) {
  myProviders.push(
    { provide: SecurityService, useClass: SecurityServiceMock }
  )
}

// ...

providers: [
  ...myProviders
]

But that's not the cause of the Runtime compiler is not loaded error.

Update:

I found out that the error is caused by the angular2-busy package you're using.

edited Oct 15 '17 at 13:07

answered Oct 15 '17 at 12:25

cyr_x

13,987
2
32
46

In my components I mock the services in this way: @Component({ selector: 'app-authorization', templateUrl: './authorization.component.html', providers: [ { provide: SecurityService, useClass: (environment.mock ? SecurityServiceMock : SecurityService) }, { provide: DashboardManagerService, useClass: (environment.mock ? DashboardManagerServiceMock : DashboardManagerService) } ] }) It could be the problem? – Pennywise83 Oct 15 '17 at 12:31
Add the relevant code to your answer and we could help you to make it AOT ready. Somewhere in your code you're using the `compileModuleSync ` method or some method which calls it. – cyr_x Oct 15 '17 at 12:32
Could you also add the `package.json` file? – cyr_x Oct 15 '17 at 12:41

score 0 · Answer 2 · answered Oct 15 '17 at 12:26

0

this is about WebSocket url check it see it in your code.

WebSocket connection to 'ws://null/algorilla/ws/websocket/' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED

you have a variable for the path and it is set to null ;)

answered Oct 15 '17 at 12:26

Tarek.Eladly

730
12
24

That's not the problem. The message is caused by the `runtime compiler is not loaded` error caused by using the compiler service withing an AOT compiled application. – cyr_x Oct 15 '17 at 12:29
No, it was another problem, nothing to do with "Runtime compiler is not loaded" error – Pennywise83 Oct 15 '17 at 12:36

score 0 · Answer 3 · answered Oct 15 '17 at 12:55

0

As suggested by @cyrix in comments I've searched for compileModuleSync in nodeModules and I find an external component that was using the angular compiler.

The external module was angular2-busy.

Removing it fixed the problem!

answered Oct 15 '17 at 12:55

Pennywise83

1,784
5
31
44

Yeah that's what i found out too, just added it to my answer. – cyr_x Oct 15 '17 at 13:07

AngularCli & AOT: ERROR Error: Runtime compiler is not loaded

3 Answers3

Linked