Merge pull request #2669 from storybooks/custom-ts-config

Custom tsconfig.json for angular apps.

app/angular/src/server/config.js

@@ -2,6 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import loadBabelConfig from './babel_config';
+import loadTsConfig from './ts_config';
 
 // avoid ESLint errors
 const logger = console;
@@ -15,6 +16,9 @@ export default function(configType, baseConfig, configDir) {
   const babelConfig = loadBabelConfig(configDir);
   config.module.rules[0].query = babelConfig;
 
+  const tsOptions = loadTsConfig(configDir);
+  config.module.rules[1].loaders[0].options = tsOptions;
+
   // Check whether a config.js file exists inside the storybook
   // config directory and throw an error if it's not.
   const storybookConfigPath = path.resolve(configDir, 'config.js');

app/angular/src/server/config/webpack.config.js

@@ -64,7 +64,12 @@ export default function(configDir) {
         },
         {
           test: /\.ts?$/,
-          loaders: [require.resolve('ts-loader'), require.resolve('angular2-template-loader')],
+          loaders: [
+            {
+              loader: require.resolve('ts-loader'),
+            },
+            require.resolve('angular2-template-loader'),
+          ],
         },
         {
           test: /\.(html|css)$/,

app/angular/src/server/config/webpack.config.prod.js

@@ -73,7 +73,12 @@ export default function(configDir) {
         },
         {
           test: /\.ts?$/,
-          loaders: [require.resolve('ts-loader'), require.resolve('angular2-template-loader')],
+          loaders: [
+            {
+              loader: require.resolve('ts-loader'),
+            },
+            require.resolve('angular2-template-loader'),
+          ],
         },
         {
           test: /\.(html|css)$/,

app/angular/src/server/index.js

@@ -120,8 +120,6 @@ if (!hasCustomFavicon) {
   app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
 }
 
-// Build the webpack configuration using the `baseConfig`
-// custom `.babelrc` file and `webpack.config.js` files
 const configDir = program.configDir || './.storybook';
 
 // The repository info is sent to the storybook while running on

app/angular/src/server/ts_config.js

@@ -0,0 +1,27 @@
+import fs from 'fs';
+import path from 'path';
+
+// avoid ESLint errors
+const logger = console;
+
+function resolveTsConfig(tsConfigPath) {
+  if (!fs.existsSync(tsConfigPath)) {
+    return null;
+  }
+
+  logger.info('=> Found custom tsconfig.json');
+
+  return tsConfigPath;
+}
+
+export default function(configDir) {
+  const configFile = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
+
+  if (!configFile) {
+    return {};
+  }
+
+  return {
+    configFile,
+  };
+}

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

@@ -0,0 +1,32 @@
+import loadTsConfig from './ts_config';
+
+// 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('ts_config', () => {
+  it('should return the config with the path to the tsconfig.json', () => {
+    setupFiles({ 'tsconfig.json': '{}' });
+
+    const config = loadTsConfig('.foo');
+
+    expect(config).toEqual({
+      configFile: 'tsconfig.json',
+    });
+  });
+
+  it('should return empty object when there is no tsconfig.json', () => {
+    setupFiles({});
+
+    const config = loadTsConfig('.foo');
+
+    expect(config).toEqual({});
+  });
+});

examples/angular-cli/.storybook/tsconfig.json

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