Angular build time optimization

app/angular/package.json

@@ -32,6 +32,7 @@
     "@storybook/core": "4.0.0-alpha.22",
     "@storybook/node-logger": "4.0.0-alpha.22",
     "angular2-template-loader": "^0.6.2",
+    "fork-ts-checker-webpack-plugin": "^0.4.9",
     "core-js": "^2.5.7",
     "global": "^4.3.2",
     "react": "^16.4.2",

app/angular/src/server/create-fork-ts-checker-plugin.js

@@ -0,0 +1,13 @@
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { logger } from '@storybook/node-logger';
+
+export default function(tsLoaderOptions) {
+  if (tsLoaderOptions && tsLoaderOptions.configFile) {
+    return new ForkTsCheckerWebpackPlugin({
+      tsconfig: tsLoaderOptions.configFile,
+    });
+  }
+
+  logger.info('=> Using default options for ForkTsCheckerWebpackPlugin');
+  return new ForkTsCheckerWebpackPlugin();
+}

app/angular/src/server/create-fork-ts-checker-plugin.test.js

@@ -0,0 +1,31 @@
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import getTsLoaderOptions from './ts_config';
+import createForkTsCheckerInstance from './create-fork-ts-checker-plugin';
+
+// eslint-disable-next-line global-require
+jest.mock('fs', () => require('../../../../__mocks__/fs'));
+jest.mock('path', () => ({
+  resolve: () => 'tsconfig.json',
+}));
+
+const setupFiles = files => {
+  // eslint-disable-next-line no-underscore-dangle, global-require
+  require('fs').__setMockFiles(files);
+};
+
+describe('create-fork-ts-checker-plugin.test', () => {
+  it('should create a ForkTsCheckerWebpackPlugin instance', () => {
+    setupFiles({ 'tsconfig.json': '{}' });
+
+    const tsLoaderOptions = getTsLoaderOptions('.foo');
+    const instance = createForkTsCheckerInstance(tsLoaderOptions);
+
+    expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin);
+    expect(instance.tsconfig).toEqual(tsLoaderOptions.configFile);
+  });
+
+  it('should create a ForkTsCheckerWebpackPlugin instance without passing options', () => {
+    const instance = createForkTsCheckerInstance({});
+    expect(instance).toBeInstanceOf(ForkTsCheckerWebpackPlugin);
+  });
+});

app/angular/src/server/framework-preset-angular.js

@@ -1,8 +1,10 @@
 import path from 'path';
 import { ContextReplacementPlugin } from 'webpack';
-import loadTsConfig from './ts_config';
+import getTsLoaderOptions from './ts_config';
+import createForkTsCheckerInstance from './create-fork-ts-checker-plugin';
 
 export function webpack(config, { configDir }) {
+  const tsLoaderOptions = getTsLoaderOptions(configDir);
   return {
     ...config,
     module: {
@@ -14,7 +16,7 @@ export function webpack(config, { configDir }) {
           use: [
             {
               loader: require.resolve('ts-loader'),
-              options: loadTsConfig(configDir),
+              options: tsLoaderOptions,
             },
             require.resolve('angular2-template-loader'),
           ],
@@ -45,6 +47,7 @@ export function webpack(config, { configDir }) {
         /@angular(\\|\/)core(\\|\/)fesm5/,
         path.resolve(__dirname, '..')
       ),
+      createForkTsCheckerInstance(tsLoaderOptions),
     ],
   };
 }

app/angular/src/server/ts_config.js

@@ -13,13 +13,14 @@ function resolveTsConfig(tsConfigPath) {
 }
 
 export default function(configDir) {
-  const configFile = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
+  const tsLoaderOptions = {
+    transpileOnly: true,
+  };
+  const configFilePath = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
 
-  if (!configFile) {
-    return {};
+  if (configFilePath) {
+    tsLoaderOptions.configFile = configFilePath;
   }
 
-  return {
-    configFile,
-  };
+  return tsLoaderOptions;
 }

app/angular/src/server/ts_config.test.js

@@ -1,4 +1,4 @@
-import loadTsConfig from './ts_config';
+import getTsLoaderOptions from './ts_config';
 
 // eslint-disable-next-line global-require
 jest.mock('fs', () => require('../../../../__mocks__/fs'));
@@ -15,18 +15,21 @@ describe('ts_config', () => {
   it('should return the config with the path to the tsconfig.json', () => {
     setupFiles({ 'tsconfig.json': '{}' });
 
-    const config = loadTsConfig('.foo');
+    const config = getTsLoaderOptions('.foo');
 
     expect(config).toEqual({
+      transpileOnly: true,
       configFile: 'tsconfig.json',
     });
   });
 
-  it('should return empty object when there is no tsconfig.json', () => {
+  it('should return object with transpileOnly: true when there is no tsconfig.json', () => {
     setupFiles({});
 
-    const config = loadTsConfig('.foo');
+    const config = getTsLoaderOptions('.foo');
 
-    expect(config).toEqual({});
+    expect(config).toEqual({
+      transpileOnly: true,
+    });
   });
 });

docs/src/pages/basics/guide-angular/index.md

@@ -73,6 +73,31 @@ That'll load stories in `../src/stories/index.ts`.
 
 Just like that, you can load stories from wherever you want to.
 
+## Storybook TypeScript configuration
+
+**Note:** You only need this if you are using Storybook `>= 4.0.0-alpha.23`.
+
+`@storybook/angular` is using [ForkTsCheckerWebpackPlugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) to boost the build performance. 
+This makes it necessary to create a `tsconfig.json` file at `.storybook/tsconfig.json` with the following content:
+
+```json
+{
+  "extends": "../tsconfig.json",
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "../projects/**/*"
+  ]
+}
+```
+
+> Only files that are included in the `include` or `files` section are checked for semantic TypeScript errors.
+> For more information visit the [ForkTsCheckerWebpackPlugin documentation](https://github.com/Realytics/fork-ts-checker-webpack-plugin#modules-resolution).
+
 ## Write your stories
 
 Now you can write some stories inside the `../src/stories/index.ts` file, like this:

examples/angular-cli/package.json

@@ -66,8 +66,6 @@
     "@storybook/addon-storysource": "4.0.0-alpha.22",
     "@storybook/addons": "4.0.0-alpha.22",
     "@storybook/angular": "4.0.0-alpha.22",
-    "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "^2.0.3",
     "@types/jest": "^23.3.1",
     "@types/node": "~10.9.2",
     "@types/storybook__addon-options": "^3.2.2",

lib/cli/generators/ANGULAR/template/.storybook/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*",
+    "../projects/**/*"
+  ]
+}

yarn.lock

@@ -1747,16 +1747,6 @@
   version "0.0.38"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.38.tgz#c1be40aa933723c608820a99a373a16d215a1ca2"
 
-"@types/jasmine@*", "@types/jasmine@~2.8.8":
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.8.tgz#bf53a7d193ea8b03867a38bfdb4fbb0e0bf066c9"
-
-"@types/jasminewd2@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.3.tgz#0d2886b0cbdae4c0eeba55e30792f584bf040a95"
-  dependencies:
-    "@types/jasmine" "*"
-
 "@types/jest@^23.3.1":
   version "23.3.1"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.1.tgz#a4319aedb071d478e6f407d1c4578ec8156829cf"
@@ -5051,7 +5041,7 @@ chokidar@^1.4.2, chokidar@^1.4.3, chokidar@^1.5.1:
   optionalDependencies:
     fsevents "^1.0.0"
 
-chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.3:
+chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.3, chokidar@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
   dependencies:
@@ -8068,6 +8058,21 @@ forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
+fork-ts-checker-webpack-plugin@^0.4.9:
+  version "0.4.9"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-0.4.9.tgz#78607899d4411fdc6faeca5b4db7654c9d8d28a2"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    chalk "^2.4.1"
+    chokidar "^2.0.4"
+    lodash.endswith "^4.2.1"
+    lodash.isfunction "^3.0.8"
+    lodash.isstring "^4.0.1"
+    lodash.startswith "^4.2.1"
+    minimatch "^3.0.4"
+    resolve "^1.5.0"
+    tapable "^1.0.0"
+
 form-data@~2.1.1:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
@@ -11537,6 +11542,10 @@ lodash.defaults@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
 
+lodash.endswith@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.endswith/-/lodash.endswith-4.2.1.tgz#fed59ac1738ed3e236edd7064ec456448b37bc09"
+
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
@@ -11584,6 +11593,10 @@ lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
 
+lodash.isfunction@^3.0.8:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
+
 lodash.isinteger@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
@@ -11668,6 +11681,10 @@ lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
+lodash.startswith@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/lodash.startswith/-/lodash.startswith-4.2.1.tgz#c598c4adce188a27e53145731cdc6c0e7177600c"
+
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"