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"
  }
}

Yes, but I dont have any COMPILER_PROVIDERS declared in my modules — Pennywise83
– Pennywise83, Commented Oct 15, 2017 at 12:26
Please add your package.json. Which libraries are you using? — yurzui
– yurzui, Commented Oct 15, 2017 at 12:39
Find createDynamicTemplate method in your code. It can be inside node_modules — yurzui
– yurzui, Commented Oct 15, 2017 at 12:42

cyr_x · Accepted Answer · 2017-10-15 13:07:18Z

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, 2017 at 13:07

answered Oct 15, 2017 at 12:25

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pennywise83 Over a year ago

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?

cyr_x Over a year ago

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 Over a year ago

Could you also add the package.json file?

Tarek.Eladly · Accepted Answer · 2017-10-15 12:26:34Z

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, 2017 at 12:26

Tarek.Eladly

75913 silver badges27 bronze badges

2 Comments

cyr_x Over a year ago

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.

Pennywise83 Over a year ago

No, it was another problem, nothing to do with "Runtime compiler is not loaded" error

Pennywise83 · Accepted Answer · 2017-10-15 12:55:21Z

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, 2017 at 12:55

Pennywise83

1,7845 gold badges34 silver badges44 bronze badges

1 Comment

cyr_x Over a year ago

Yeah that's what i found out too, just added it to my answer.

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related