AngularCli & AOT : 오류 오류 : 런타임 컴파일러가로드되지 않았습니다.

Question

Ahead of Time으로 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 

응용 프로그램은 탐색,하지만 아무것도 예상대로 작동하지 않습니다! 내가 뭘 잘못하고있어? 컴파일 된 코드가 런타임 컴파일러를 참조하는 이유는 무엇입니까?

저는 각도/컴파일 구성 요소 나 서비스를 사용하지 않습니다. 내 구성 요소에서

나는이 방법으로 서비스 모의 참조 : var에 "environment.mock는"사실

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

경우에, 나는, 그렇지 않으면 실제 SecurityService를 SecurityServiceMock를 사용합니다.

이것이 문제가 될 수 있습니까?

이

은 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

당신은 Compiler에서 compileModuleSync을 사용하고 서비스는 createDynamicTemplate 메서드에 의해 호출됩니다. 각형 컴파일러 cli가 코드를 분석하고 템플릿과 클래스 (ngFactory 파일)에서 metadata을 만들고 AOT를 사용할 때 응용 프로그램에서 컴파일러 모듈을 완전히 제거합니다.

AOT를 사용하려면 angular/compiler 패키지의 서비스 나 방법을 사용하지 마십시오.

대답에 package.json 파일을 추가 할 수 있습니까? AOT 준비가되지 않은 타사 라이브러리가있을 수 있습니다.

---

Sitenote : 당신이 당신의 서비스를 조롱하고있는 방법은 조금 이상한 보이는 , 당신은 그냥 무시 다음 서비스를 제공 할 수 environment.mock IST 경우는 true. 예 :

let myProviders = [ 
    SecurityService 
]; 

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

// ... 

providers: [ 
    ...myProviders 
] 

그러나 이는 Runtime compiler is not loaded 오류의 원인이 아닙니다.

는 업데이트 :

나는 오류가 사용하고있는 angular2-busy 패키지에 의해 발생 사실을 발견했다.

Answer 2

이것은 웹 소켓 URL에 관한 것입니다. 코드에서 확인하십시오.에

웹 소켓 연결 'WS는 : // 널/algorilla/WS/웹 소켓 /'실패 : 연결 설정에 오류 : 순 ::

ERR_NAME_NOT_RESOLVED

당신이 경로에 대한 변수를 가지고이 설정되어 null;)

Answer 3

@cyrix가 제안한 의견에서 저는 nodeModules에서 compileModuleSync를 검색했으며 각도 컴파일러를 사용하는 외부 구성 요소를 찾습니다.

외부 모듈은 angular2-busy였습니다.

문제를 해결했습니다.