Angular build time optimization

app/angular/package.json

@@ -26,6 +26,7 @@
     "@storybook/core": "4.0.0-alpha.21",
     "@storybook/node-logger": "4.0.0-alpha.21",
     "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/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 './framework-preset-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/framework-preset-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/framework-preset-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 './framework-preset-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('framework-preset-ts-fork-checker-plugin', () => {
+  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/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,
+    });
   });
 });

examples/angular-cli/package.json

@@ -9,7 +9,7 @@
     "e2e": "ng e2e",
     "ng": "ng",
     "start": "ng serve",
-    "storybook": "npm run storybook:prebuild && start-storybook -p 9008 -s src/assets",
+    "storybook": "start-storybook -p 9008 -s src/assets",
     "storybook:prebuild": "npm run test:generate-output",
     "test": "jest",
     "test:coverage": "jest --coverage",

yarn.lock

@@ -5004,7 +5004,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:
@@ -8044,6 +8044,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"
@@ -11521,6 +11536,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"
@@ -11568,6 +11587,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"
@@ -11652,6 +11675,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"