feat(@angular/cli): use separate tsconfigs

docs/documentation/stories/third-party-lib.md

@@ -9,6 +9,18 @@ npm install d3 --save
 npm install @types/d3 --save-dev
 ```
 
+Then open `src/tsconfig.app.json` and add it to the `types` array:
+
+```
+"types":[
+  "d3"
+]
+```
+
+If the library you added typings for is only to be used on your e2e tests,
+instead use `e2e/tsconfig.e2e.json`.
+The same goes for unit tests and `src/tsconfig.spec.json`.
+
 If the library doesn't have typings available at `@types/`, you can still use it by
 manually adding typings for it:
 

packages/@angular/cli/blueprints/ng2/files/__path__/tsconfig.app.json

@@ -0,0 +1,28 @@
+{<% if (ng4) { %>
+  "extends": "<%= relativeRootPath %>/tsconfig.json",
+  "compilerOptions": {
+  "lib": [
+    "es2016",
+    "dom"
+  ],<% } else { %>
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016",
+      "dom"
+    ],<% } %>
+    "outDir": "<%= relativeRootPath %>/out-tsc/app",
+    "target": "es5",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

packages/@angular/cli/blueprints/ng2/files/__path__/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{<% if (ng4) { %>
+  "extends": "<%= relativeRootPath %>/tsconfig.json",
+  "compilerOptions": {<% } else { %>
+  "compilerOptions": {
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],<% } %>
+    "outDir": "<%= relativeRootPath %>/out-tsc/spec",
+    "module": "commonjs",
+    "target": "es6",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts"
+  ]
+}

packages/@angular/cli/blueprints/ng2/files/angular-cli.json

@@ -15,7 +15,8 @@
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.json",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
       "prefix": "<%= prefix %>",
       "styles": [
         "styles.<%= styleExt %>"
@@ -35,12 +36,13 @@
   },
   "lint": [
     {
-      "files": "<%= sourceDir %>/**/*.ts",
-      "project": "<%= sourceDir %>/tsconfig.json"
+      "project": "<%= sourceDir %>/tsconfig.app.json"
     },
     {
-      "files": "e2e/**/*.ts",
-      "project": "e2e/tsconfig.json"
+      "project": "<%= sourceDir %>/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
     }
   ],
   "test": {

packages/@angular/cli/blueprints/ng2/files/e2e/tsconfig.json → packages/@angular/cli/blueprints/ng2/files/e2e/tsconfig.e2e.json

@@ -1,19 +1,21 @@
-{
-  "compileOnSave": false,
+{<% if (ng4) { %>
+  "extends": "../tsconfig.json",
+  "compilerOptions": {<% } else { %>
   "compilerOptions": {
+    "sourceMap": true,
     "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": [
       "es2016"
-    ],
-    "module": "commonjs",
-    "moduleResolution": "node",
+    ],<% } %>
     "outDir": "../dist/out-tsc-e2e",
-    "sourceMap": true,
+    "module": "commonjs",
     "target": "es6",
-    "typeRoots": [
-      "../node_modules/@types"
+    "types":[
+      "jasmine",
+      "node"
     ]
   }
 }

packages/@angular/cli/blueprints/ng2/files/protractor.conf.js

@@ -22,7 +22,7 @@ exports.config = {
   },
   beforeLaunch: function() {
     require('ts-node').register({
-      project: 'e2e'
+      project: 'e2e/tsconfig.e2e.json'
     });
   },
   onPrepare() {

packages/@angular/cli/blueprints/ng2/files/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ]
+  }
+}

packages/@angular/cli/lib/config/schema.json

@@ -94,9 +94,13 @@
           },
           "tsconfig": {
             "type": "string",
-            "default": "tsconfig.json",
+            "default": "tsconfig.app.json",
             "description": "The name of the TypeScript configuration file."
           },
+          "testTsconfig": {
+            "type": "string",
+            "description": "The name of the TypeScript configuration file for unit tests."
+          },
           "prefix": {
             "type": "string",
             "description": "The prefix to apply to generated selectors."

packages/@angular/cli/models/webpack-config.ts

@@ -106,6 +106,7 @@ export class NgCliWebpackConfig {
 
   public addAppConfigDefaults(appConfig: any) {
     const appConfigDefaults: any = {
+      testTsconfig: appConfig.tsconfig,
       scripts: [],
       styles: []
     };

packages/@angular/cli/models/webpack-configs/typescript.ts

@@ -64,79 +64,61 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
   }
 
   return new AotPlugin(Object.assign({}, {
-      tsConfigPath: path.resolve(projectRoot, appConfig.root, appConfig.tsconfig),
       mainPath: path.join(projectRoot, appConfig.root, appConfig.main),
       i18nFile: buildOptions.i18nFile,
       i18nFormat: buildOptions.i18nFormat,
       locale: buildOptions.locale,
-      hostReplacementPaths
+      hostReplacementPaths,
+      // If we don't explicitely list excludes, it will default to `['**/*.spec.ts']`.
+      exclude: []
     }, options));
 }
 
 
 export const getNonAotConfig = function(wco: WebpackConfigOptions) {
-  const { projectRoot, appConfig } = wco;
-  let exclude = [ '**/*.spec.ts' ];
-  if (appConfig.test) {
-    exclude.push(path.join(projectRoot, appConfig.root, appConfig.test));
-  }
+  const { appConfig, projectRoot } = wco;
+  const tsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.tsconfig);
 
   return {
-    module: {
-      rules: [
-        {
-          test: /\.ts$/,
-          loader: webpackLoader,
-          exclude: [/\.(spec|e2e)\.ts$/]
-        }
-      ]
-    },
-    plugins: [
-      _createAotPlugin(wco, { exclude, skipCodeGeneration: true }),
-    ]
+    module: { rules: [{ test: /\.ts$/, loader: webpackLoader }] },
+    plugins: [ _createAotPlugin(wco, { tsConfigPath, skipCodeGeneration: true }) ]
   };
 };
 
 export const getAotConfig = function(wco: WebpackConfigOptions) {
   const { projectRoot, appConfig } = wco;
-  let exclude = [ '**/*.spec.ts' ];
-  if (appConfig.test) { exclude.push(path.join(projectRoot, appConfig.root, appConfig.test)); };
+  const tsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.tsconfig);
+  const testTsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.testTsconfig);
+
+  let pluginOptions: any = { tsConfigPath };
+
+  // Fallback to exclude spec files from AoT compilation on projects using a shared tsconfig.
+  if (testTsConfigPath === tsConfigPath) {
+    let exclude = [ '**/*.spec.ts' ];
+    if (appConfig.test) { exclude.push(path.join(projectRoot, appConfig.root, appConfig.test)); };
+    pluginOptions.exclude = exclude;
+  }
+
   return {
-    module: {
-      rules: [
-        {
-          test: /\.ts$/,
-          loader: webpackLoader,
-          exclude: [/\.(spec|e2e)\.ts$/]
-        }
-      ]
-    },
-    plugins: [
-      _createAotPlugin(wco, { exclude })
-    ]
+    module: { rules: [{ test: /\.ts$/, loader: webpackLoader }] },
+    plugins: [ _createAotPlugin(wco, pluginOptions) ]
   };
 };
 
 export const getNonAotTestConfig = function(wco: WebpackConfigOptions) {
+  const { projectRoot, appConfig } = wco;
+  const tsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.testTsconfig);
+  const appTsConfigPath = path.resolve(projectRoot, appConfig.root, appConfig.tsconfig);
+
+  let pluginOptions: any = { tsConfigPath, skipCodeGeneration: true };
+
+  // Fallback to correct module format on projects using a shared tsconfig.
+  if (tsConfigPath === appTsConfigPath) {
+    pluginOptions.compilerOptions = { module: 'commonjs' };
+  }
+
   return {
-    module: {
-      rules: [
-        {
-          test: /\.ts$/,
-          loader: webpackLoader,
-          query: { module: 'commonjs' },
-          exclude: [/\.(e2e)\.ts$/]
-        }
-      ]
-    },
-    plugins: [
-      _createAotPlugin(wco, {
-        exclude: [],
-        skipCodeGeneration: true,
-        compilerOptions: {
-          module: 'commonjs'
-        }
-      }),
-    ]
+    module: { rules: [{ test: /\.ts$/, loader: webpackLoader }] },
+    plugins: [ _createAotPlugin(wco, pluginOptions) ]
   };
 };

packages/@ngtools/webpack/src/plugin.ts

@@ -122,35 +122,31 @@ export class AotPlugin implements Tapable {
       );
     }
 
+    // Default exclude to **/*.spec.ts files.
+    if (!options.hasOwnProperty('exclude')) {
+      options['exclude'] = ['**/*.spec.ts'];
+    }
+
+    // Add custom excludes to default TypeScript excludes.
+    if (options.hasOwnProperty('exclude')) {
+      // If the tsconfig doesn't contain any excludes, we must add the default ones before adding
+      // any extra ones (otherwise we'd include all of these which can cause unexpected errors).
+      // This is the same logic as present in TypeScript.
+      if (!tsConfigJson.exclude) {
+        tsConfigJson['exclude'] = ['node_modules', 'bower_components', 'jspm_packages'];
+        if (tsConfigJson.compilerOptions && tsConfigJson.compilerOptions.outDir) {
+          tsConfigJson.exclude.push(tsConfigJson.compilerOptions.outDir);
+        }
+      }
+
+      // Join our custom excludes with the existing ones.
+      tsConfigJson.exclude = tsConfigJson.exclude.concat(options.exclude);
+    }
+
     const tsConfig = ts.parseJsonConfigFileContent(
       tsConfigJson, ts.sys, basePath, null, this._tsConfigPath);
 
     let fileNames = tsConfig.fileNames;
-    if (options.hasOwnProperty('exclude')) {
-      let exclude: string[] = typeof options.exclude == 'string'
-          ? [options.exclude as string] : (options.exclude as string[]);
-
-      exclude.forEach((pattern: string) => {
-        const basePathPattern = '(' + basePath.replace(/\\/g, '/')
-            .replace(/[\-\[\]\/{}()+?.\\^$|*]/g, '\\$&') + ')?';
-        pattern = pattern
-          // Replace windows path separators with forward slashes.
-          .replace(/\\/g, '/')
-          // Escape characters that are used normally in regexes, except stars.
-          .replace(/[\-\[\]{}()+?.\\^$|]/g, '\\$&')
-          // Two stars replacement.
-          .replace(/\*\*/g, '(?:.*)')
-          // One star replacement.
-          .replace(/\*/g, '(?:[^/]*)')
-          // Escape characters from the basePath and make sure it's forward slashes.
-          .replace(/^/, basePathPattern);
-
-        const re = new RegExp('^' + pattern + '$');
-        fileNames = fileNames.filter(x => !x.replace(/\\/g, '/').match(re));
-      });
-    } else {
-      fileNames = fileNames.filter(fileName => !/\.spec\.ts$/.test(fileName));
-    }
     this._rootFilePath = fileNames;
 
     // Check the genDir. We generate a default gendir that's under basepath; it will generate