AngularCli＆AOT：错误错误：没有加载运行时编译器

Question

我想用时间前进来构建我的Angular4应用程序。 构建过程运行正常，并没有错误，但是当我运行该应用程序我在控制台收到此错误：

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

Answer 1

您使用的是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包造成的。

Answer 2

这是关于WebSocket的URL检查它在你的代码中看到它。

WebSocket连接到 'WS：// 空/algorilla/WS /的WebSocket /' 失败：错误的连接建立：网:: ERR_NAME_NOT_RESOLVED

您对路径变量，它被设置为null;）

Answer 3

正如@cyrix在评论中所建议的，我在nodeModules中搜索了compileModuleSync，并且找到了使用角度编译器的外部组件。

外部模块角2繁忙。

删除它解决了问题！