AngularCli & AOT: FEHLER Fehler: Runtime Compiler ist nicht geladen

Question

Ich versuche, meine Angular4-Anwendung mit Ahead of Time zu bauen. Der Build-Prozess läuft gut und ohne Fehler, aber wenn ich die Anwendung ausführen erhalte ich diesen Fehler in der Konsole:

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 

Die Anwendung befahrbar ist, aber nichts funktioniert, wie es soll! Was mache ich falsch? Warum verweist der kompilierte Code auf einen Runtime-Compiler?

Ich verwende keine angular/compile Komponenten oder Service.

In meinen Komponenten verweise ich den Service Mock auf diese Weise:

@Component({ 
    selector: 'app-authorization', 
    templateUrl: './authorization.component.html', 
    providers: [ 
    { provide: SecurityService, useClass: (environment.mock ? SecurityServiceMock : SecurityService) } 
    ] 
}) 

Wenn die var "environment.mock" wahr ist, ich SecurityServiceMock verwenden, da sonst die reale Securityservice.

Könnte das das Problem sein? Diese

ist 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

Sie verwenden die compileModuleSync aus dem Compiler Service, der durch die createDynamicTemplate Methode aufgerufen wird. Der eckige Compiler cli analysiert Ihren Code und erstellt metadata aus Ihren Vorlagen und Klassen (ngFactory-Dateien) und entfernt das Compiler-Modul vollständig aus Ihrer Anwendung, wenn Sie AOT verwenden.

Verwenden Sie keine Dienste oder Methoden aus dem Paket angular/compiler, wenn Sie AOT verwenden möchten.

Könnten Sie die package.json Datei zu Ihrer Antwort hinzufügen, könnte es eine 3rd-Party-Bibliothek, die nicht AOT bereit ist.

---

Sitenote: Die Art und Weise Sie Ihre Dienste sind spöttisch ein wenig komisch aussieht, können Sie einfach den Service bieten und es dann außer Kraft setzen, wenn environment.mock ist wahr. Zum Beispiel:

let myProviders = [ 
    SecurityService 
]; 

if(environment.mock) { 
    myProviders.push(
    { provide: SecurityService, useClass: SecurityServiceMock } 
) 
} 

// ... 

providers: [ 
    ...myProviders 
] 

Aber das ist nicht die Ursache für die Runtime compiler is not loaded Fehler.

Update:

Ich fand heraus, dass der Fehler durch die angular2-busy Paket verursacht wird, die Sie verwenden.

Answer 2

Dies ist über WebSocket URL überprüfen Sie es in Ihrem Code.

WebSocket-Verbindung zu 'ws: // null/algorilla/ws/websocket /' ist fehlgeschlagen: Fehler beim Verbindungsaufbau: net :: ERR_NAME_NOT_RESOLVED

Sie eine Variable für den Pfad haben, und es wird auf null;)

Answer 3

Wie von @crix in Kommentaren vorgeschlagen Ich habe in nodeModules nach compileModuleSync gesucht und finde eine externe Komponente, die den eckigen Compiler verwendet.

Das externe Modul war eckig2-beschäftigt.

Entfernen das Problem behoben!