I develop the project on Angular 2 + PrimeNG. Begin to use Git, the problem surfaced in the compilation of the TypeScript. At once will fragment your 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"
}
}
After cloning repo from project installing all npm packages, build the project, obtain a set of errors of this kind (here is a fragment of the compile log).
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'.
The situation is known - don't see the types of es5. The file tsconfig.json like this:
{
"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
}
}
Began to translate the compiler TS in es6 mode to resolve the problem, "target": "es6". The error log was:
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).
I have the feeling that the project is not aware of the types of es6 in principle. How to correctly configure the compilation project under the es6?
You have to use "es5" as TypeScript compiler "target" for an angular project currently, it's a baseline requirement, es6 is not wildly supported.
But features like "Promise" & "DOM.Iterable" are not supported in ES5, so you have to add additional compilation options for loading these libraries. The solution is add "lib": ["es2015", "dom"] into your "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
}
}
This option is mentioned at "Angular 2 guide - TypeScript Configuration"
Based on the --target, TypeScript adds additional ambient declarations like Promise if the target is es6.
Since the QuickStart is targeting es5, you can override the list of declaration files to be included:
"lib": ["es2015", "dom"]
Thanks to that, you have all the es6 typings even when targeting es5.