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繁忙。

刪除它解決了問題！