2017-10-03 6 views
0

Angular 2 + PrimeNG에서 프로젝트를 개발합니다. Git 사용을 시작하자 TypeScript 컴파일시 문제가 발생했습니다. 한번에 패키지를 조각 낼 것입니다.es6 표기법으로 프로젝트를 구성하는 방법

"dependencies": { 
"@angular/common": "2.4.2", 
"@angular/compiler": "2.4.2", 
"@angular/core": "2.4.2", 
"@angular/forms": "2.4.2", 
"@angular/http": "2.4.2", 
"@angular/platform-browser": "2.4.2", 
"@angular/platform-browser-dynamic": "2.4.2", 
"@angular/router": "3.4.2", 
"ag-grid": "12.0.0", 
"ag-grid-angular": "12.0.0", 
"angular2-focus": "^1.1.0", 
"core-js": "^2.4.1", 
"font-awesome": "^4.6.3", 
"moment": "^2.18.1", 
"primeng": "^2.0.0", 
"reflect-metadata": "^0.1.3", 
"rxjs": "5.0.1", 
"tedious": "1.14.0", 
"zone.js": "^0.7.2" 
}, 
"devDependencies": { 
"@angularclass/hmr": "^1.0.1", 
"@angularclass/hmr-loader": "^3.0.2", 
"@types/core-js": "^0.9.0", 
"@types/jasmine": "2.5.41", 
"@types/lodash": "4.14.50", 
"@types/node": "^6.0.38", 
"@types/selenium-webdriver": "2.53.33", 
"angular2-template-loader": "^0.6.0", 
"autoprefixer": "^6.3.2", 
"awesome-typescript-loader": "^3.0.0-beta.17", 
"codelyzer": "2.0.0-beta.4", 
"copy-webpack-plugin": "^4.0.0", 
"css-loader": "^0.26.1", 
"extract-text-webpack-plugin": "^2.0.0-beta.4", 
"file-loader": "^0.9.0", 
"html-loader": "^0.4.0", 
"html-webpack-plugin": "^2.8.1", 
"istanbul-instrumenter-loader": "^0.2.0", 
"jasmine-core": "^2.3.4", 
"jasmine-spec-reporter": "^2.4.0", 
"json-loader": "^0.5.3", 
"karma": "1.3.0", 
"karma-chrome-launcher": "^2.0.0", 
"karma-coverage": "^1.0.0", 
"karma-jasmine": "^1.0.2", 
"karma-mocha-reporter": "^2.0.3", 
"karma-remap-istanbul": "0.2.1", 
"karma-sourcemap-loader": "^0.3.7", 
"karma-webpack": "1.8.0", 
"node-sass": "^3.4.2", 
"null-loader": "0.1.1", 
"postcss-loader": "^1.1.0", 
"protractor": "^4.0.10", 
"raw-loader": "0.5.1", 
"remap-istanbul": "^0.6.4", 
"rimraf": "^2.5.1", 
"sass-loader": "^4.0.0", 
"shelljs": "^0.7.0", 
"style-loader": "^0.13.0", 
"ts-helpers": "^1.1.1", 
"tslint": "^4.3.1", 
"tslint-loader": "^3.3.0", 
"typedoc": "^0.5.1", 
"typescript": "2.0.10", 
"url-loader": "^0.5.6", 
"webpack": "2.1.0-beta.25", 
"webpack-dev-server": "2.1.0-beta.9" 
} 
} 

모든 NPM 패키지를 설치 프로젝트에서의 repo를 복제 한 후, (여기에 컴파일 로그의 조각입니다), 프로젝트를 빌드 이런 종류의 오류 세트를 얻을 수 있습니다.

ERROR in [at-loader] ./node_modules/@angular/router/src/utils /collection.d.ts:35:58 
TS2304: Cannot find name 'Promise'. 

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:47:36 
TS2304: Cannot find name 'Iterable'. 

ERROR in [at-loader] ./node_modules/@types/core-js/index.d.ts:353:48 
TS2304: Cannot find name 'PropertyKey'. 

상황이 알려져 있습니다. es5 유형을 볼 수 없습니다. 이 같은 파일 tsconfig.json는 "ES6"

{ 
"compilerOptions": { 
"target": "es5", 
"module": "commonjs", 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"sourceMap": true, 
"noEmitHelpers": true, 
"noUnusedLocals": true, 
"noUnusedParameters": true 
}, 
"compileOnSave": false, 
"buildOnSave": false, 
"awesomeTypescriptLoaderOptions": { 
    "forkChecker": true, 
    "useWebpackText": true 
} 
} 

문제 "대상"을 해결하기 위해 ES6 모드에서 컴파일러 TS를 번역하기 시작했다. 오류 로그이었다

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:22:77 
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s). 

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:24:34 
TS2368: Type parameter name cannot be 'any' 

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:24:79 
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s). 

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:96:15 
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s). 

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:99:42 
TS2368: Type parameter name cannot be 'any' 

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:104:22 
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s). 

ERROR in [at-loader] ./node_modules/@types/handlebars/index.d.ts:115:34 
TS2314: Generic type 'HandlebarsTemplateDelegate<T, any>' requires 2 type argument(s). 

나는이 프로젝트는 원칙적으로 ES6의 유형을 인식하지 않을 느낌이있다. es6에서 컴파일 프로젝트를 올바르게 구성하는 방법은 무엇입니까?

답변

0

각도 프로젝트의 경우 현재 TypeScript 컴파일러 "대상"으로 "es5"를 사용해야합니다 (it's a baseline requirement, es6 is not wildly supported).

"Promise"& "DOM.Iterable"과 같은 기능은 ES5에서 지원되지 않으므로 이러한 라이브러리를로드하기위한 추가 컴파일 옵션을 추가해야합니다.

{ 
"compilerOptions": { 
"target": "es5", 
"lib": ["es2015", "dom"], 
"module": "commonjs", 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"sourceMap": true, 
"noEmitHelpers": true, 
"noUnusedLocals": true, 
"noUnusedParameters": true 
}, 
"compileOnSave": false, 
"buildOnSave": false, 
"awesomeTypescriptLoaderOptions": { 
    "forkChecker": true, 
    "useWebpackText": true 
} 
} 

이 옵션은 추가 주변 선언 약속 같은 경우 "Angular 2 guide - TypeScript Configuration"는 --target을 바탕으로

가, 타이프 라이터가 추가로 언급 :이 솔루션은 "tsconfig.json"로 "lib": ["es2015", "dom"]를 추가입니다 대상은 es6입니다.

빠른 시작이 ES5을 목표로하고 있기 때문에, 당신은 선언 파일 목록을 무시할 수는 포함한다 :

"LIB": [ "es2015", "DOM"]

감사합니다 es5를 타겟팅 할 때도 모든 es6 입력을가집니다.