build: tsconfig for editor warnings (#3791)

* build: tsconfig for editor warnings

Currently when using a code editor that uses the TypeScript language service (Webstorm / VS Code / Atom / Sublime) there will be TypeScript errors in the `.spec` files.

This is because the editor finds the `tsconfig.json` file that doesn't match the spec files. Therefore it complains about the `experimentalDecorators`.

In `angular/angular` there is a global `tsconfig` file that matches everything and is therefore fixing the editor warnings. This file is also used to compile all `.spec` files for the whole project.

We can add such a `tsconfig.json` file as well, and in the future we can use it for compiling the specs as well.

* Add docs for tsconfig files

Author: devversion

e2e/tsconfig.json

@@ -1,3 +1,5 @@
+// TypeScript config that is used to build the e2e spec files. Protractor will use TS-Node to
+// compile the e2e/ folder at runtime.
 {
   "compilerOptions": {
     "declaration": true,

src/demo-app/tsconfig-aot.json

@@ -1,6 +1,8 @@
-/* Config file for the Angular Compiler. Paths need to be relative to the dist folder. */
+// TypeScript config that extends the demo-app tsconfig file. This config compiles the 
+// "main-aot.ts" file and also enables templage code generation / AOT. All paths need
+// to be relative to the output directory.
 {
-  "extends": "./tsconfig",
+  "extends": "./tsconfig-build",
   "compilerOptions": {
     "experimentalDecorators": true,
     "paths": {

src/demo-app/tsconfig.json renamed to src/demo-app/tsconfig-build.json

@@ -1,3 +1,5 @@
+// TypeScript config file that is used to compile the demo-app. Target environment will be ES5,
+// since the demo-app will be served in the browser.
 {
   "compilerOptions": {
     "declaration": false,

src/e2e-app/tsconfig.json renamed to src/e2e-app/tsconfig-build.json

@@ -1,3 +1,5 @@
+// TypeScript config file that is used to compile the e2e-app. Protractor will run all specs
+// against the e2e-app in the browser and therefore the code needs to be ES5 compatible.
 {
   "compilerOptions": {
     "declaration": true,

src/lib/tsconfig.json renamed to src/lib/tsconfig-build.json

@@ -1,3 +1,5 @@
+// TypeScript config file that is used to compile the library. Target environment needs to be
+// ES2015 since the build process will create FESM bundles using rollup.
 {
   "compilerOptions": {
     "baseUrl": ".",

src/lib/tsconfig-specs.json

@@ -1,5 +1,8 @@
+// TypeScript config file that extends the default tsconfig file for the library. This config is 
+// used to compile the specs for Karma. Since the code will run inside of the browser, the target
+// needs to be ES5. The format needs to be CommonJS since Karma only supports that module format.
 {
-  "extends": "./tsconfig",
+  "extends": "./tsconfig-build",
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",

src/tsconfig.json

@@ -0,0 +1,15 @@
+// TypeScript config file that matches all source files in the project. This file is read by 
+// IDEs and ensures that `experimentalDecorator` warnings are not showing up.
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "outDir": "../../dist/packages/all",
+    "sourceMap": true,
+    "inlineSources": true,
+    "target": "es2015",
+    "lib": ["es2015", "dom"],
+    "types": ["jasmine"]
+  }
+}

tools/gulp/tasks/development.ts

@@ -16,7 +16,7 @@ task(':watch:devapp', () => {
 });
 
 /** Path to the demo-app tsconfig file. */
-const tsconfigPath = join(appDir, 'tsconfig.json');
+const tsconfigPath = join(appDir, 'tsconfig-build.json');
 
 task(':build:devapp:ts', tsBuildTask(tsconfigPath));
 task(':build:devapp:scss', sassBuildTask(outDir, appDir));

tools/gulp/tasks/e2e.ts

@@ -13,7 +13,7 @@ const appDir = path.join(SOURCE_ROOT, 'e2e-app');
 const outDir = DIST_E2EAPP;
 
 const PROTRACTOR_CONFIG_PATH = path.join(PROJECT_ROOT, 'test/protractor.conf.js');
-const tsconfigPath = path.join(appDir, 'tsconfig.json');
+const tsconfigPath = path.join(appDir, 'tsconfig-build.json');
 
 task(':watch:e2eapp', () => {
   watch(path.join(appDir, '**/*.ts'), [':build:e2eapp:ts']);

tools/gulp/tasks/library.ts

@@ -13,7 +13,7 @@ const inlineResources = require('../../../scripts/release/inline-resources');
 const uglify = require('uglify-js');
 
 const libraryRoot = join(SOURCE_ROOT, 'lib');
-const tsconfigPath = join(libraryRoot, 'tsconfig.json');
+const tsconfigPath = join(libraryRoot, 'tsconfig-build.json');
 
 // Paths to the different output directories.
 const materialDir = DIST_MATERIAL;