Comment configurer le projet est compilé pour la notation es6

Question

Je développe le projet sur Angular 2 + PrimeNG. Commencer à utiliser Git, le problème est apparu dans la compilation du TypeScript. A la fois va fragmenter votre package.json.

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

Après le clonage repo de projet installer tous les packages de MNP, construire le projet, obtenir un ensemble d'erreurs de ce genre (ici est un fragment du journal de compilation).

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'. 

La situation est connue - ne voit pas les types de es5. Le fichier tsconfig.json comme ceci:

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

A commencé à traduire le compilateur TS en mode ES6 pour résoudre le problème, "cible": "ES6". Le journal des erreurs était:

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). 

J'ai l'impression que le projet ne connaît pas les types d'es6 en principe. Comment configurer correctement le projet de compilation sous le es6?

Answer 1

Vous devez utiliser "es5" comme compilateur TypeScript "target" pour un projet angulaire actuellement, it's a baseline requirement, es6 is not wildly supported.

Mais les fonctionnalités telles que "Promise" & "DOM.Iterable" ne sont pas prises en charge dans ES5, vous devez donc ajouter des options de compilation supplémentaires pour charger ces bibliothèques. La solution est d'ajouter "lib": ["es2015", "dom"] dans votre "tsconfig.json":

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

Cette option est mentionnée à "Angular 2 guide - TypeScript Configuration"

Basé sur le --target, ajoute tapuscrit déclarations ambiantes supplémentaires comme si Promise la cible est es6.

Depuis le QuickStart cible ES5, vous pouvez remplacer la liste des fichiers de déclaration à inclure:

"lib": [ "es2015", "dom"]

Merci à cela, vous avez tous les dactylos es6 même lorsque vous ciblez es5.