问题
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"
}
}
回答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.
回答2:
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 ;)
回答3:
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!
来源：https://stackoverflow.com/questions/46754962/angularcli-aot-error-error-runtime-compiler-is-not-loaded