AngularCli&AOT:错误错误:没有加载运行时编译器
我想用时间前进来构建我的Angular4应用程序。 构建过程运行正常,并没有错误,但是当我运行该应用程序我在控制台收到此错误:AngularCli&AOT:错误错误:没有加载运行时编译器
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
的应用程序是通航,但没有任何工程,因为它应该! 我做错了什么?为什么编译的代码引用运行时编译器?
我不使用任何角度/编译组件或服务。
在我的成分我引用这样的服务模拟:
@Component({
selector: 'app-authorization',
templateUrl: './authorization.component.html',
providers: [
{ provide: SecurityService, useClass: (environment.mock ? SecurityServiceMock : SecurityService) }
]
})
如果VAR“environment.mock”是真的,我使用SecurityServiceMock,否则真正的SecurityService。
难道这是问题吗?
这是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"
}
}
您使用的是compileModuleSync
从Compiler服务,由createDynamicTemplate
方法调用。角编译器cli正在分析您的代码,并且正在从您的模板和类(ngFactory文件)创建metadata,并在使用AOT时从应用程序中完全删除编译器模块。
如果您想使用AOT,请不要使用angular/compiler
包中的任何服务或方法。
您能否将package.json
文件添加到您的答案中,可能是第三方库不是AOT准备好的。
Sitenote: 你嘲笑你的服务的方式看起来有点有点不可思议,你可以只提供服务,然后覆盖它,如果environment.mock
IST如此。例如:
let myProviders = [
SecurityService
];
if(environment.mock) {
myProviders.push(
{ provide: SecurityService, useClass: SecurityServiceMock }
)
}
// ...
providers: [
...myProviders
]
但这不是Runtime compiler is not loaded
错误的原因。
更新:
我发现该错误是由您使用的angular2-busy包造成的。
在我的组件我用这种方式嘲弄服务: @Component({ 选择:“应用授权”, templateUrl:“./authorization.component.html”, 提供商:[ {提供:SecurityService,useClass:(environment.mock SecurityServiceMock:SecurityService)},{ 提供:DashboardManagerService,useClass:(environment.mock DashboardManagerServiceMock:DashboardManagerService)} ] }) 这可能是问题? – Pennywise83
将相关代码添加到您的答案中,我们可以帮助您做好AOT准备。在代码中的某处,您正在使用'compileModuleSync'方法或调用它的某种方法。 – cyrix
你还可以添加'package.json'文件吗? – cyrix
这是关于WebSocket的URL检查它在你的代码中看到它。
WebSocket连接到 'WS:// 空/algorilla/WS /的WebSocket /' 失败:错误的连接建立:网:: ERR_NAME_NOT_RESOLVED
您对路径变量,它被设置为null;)
这不是问题所在。该消息是由于使用带有AOT编译应用程序的编译器服务导致的'runtime compiler is not loaded'错误引起的。 – cyrix
只是尝试它,它会工作 –
不,这是另一个问题,无关“运行时编译器未加载”错误 – Pennywise83
正如@cyrix在评论中所建议的,我在nodeModules中搜索了compileModuleSync,并且找到了使用角度编译器的外部组件。
外部模块角2繁忙。
删除它解决了问题!
是的,这就是我发现了,只是将它添加到我的答案。 – cyrix
你有没有读过https://github.com/angular/angular/issues/11780? – jonrsharpe
是的,但我没有在我的模块中声明任何COMPILER_PROVIDERS – Pennywise83
请添加您的package.json。你使用哪些库? – yurzui