add ability to merge ng cli webpack config

app/angular/src/server/angular-cli_config.js

@@ -0,0 +1,69 @@
+const path = require('path');
+const fs = require('fs');
+
+export function getAngularCliWebpackConfigOptions(dirToSearch, appIndex = 0) {
+ const fname = path.join(dirToSearch, '.angular-cli.json');
+ if (!fs.existsSync(fname)) {
+ return null;
+ }
+ const cliConfig = JSON.parse(fs.readFileSync(fname, 'utf8'));
+ if (!cliConfig.apps || !cliConfig.apps.length) {
+ throw new Error('.angular-cli.json must have apps entry.');
+ }
+ const appConfig = cliConfig.apps[appIndex];
+
+ // FIXME dummy value
+ const cliWebpackConfigOptions = {
+ projectRoot: dirToSearch,
+ appConfig,
+ buildOptions: {
+ outputPath: 'outputPath',
+ },
+ supportES2015: false,
+ };
+
+ return cliWebpackConfigOptions;
+}
+
+export function applyAngularCliWebpackConfig(baseConfig, cliWebpackConfigOptions) {
+ if (!cliWebpackConfigOptions) return baseConfig;
+
+ let ngcliConfigFactory;
+ try {
+ // We should not require('@angular/cli') at the top script level because user project might not have `@angular/cli`.
+ // eslint-disable-next-line global-require, import/no-extraneous-dependencies
+ ngcliConfigFactory = require('@angular/cli/models/webpack-configs');
+ } catch (e) {
+ return baseConfig;
+ }
+
+ const cliCommonConfig = ngcliConfigFactory.getCommonConfig(cliWebpackConfigOptions);
+ const cliStyleConfig = ngcliConfigFactory.getStylesConfig(cliWebpackConfigOptions);
+
+ // Don't use storybooks .css rules because we have to use .css rules created by @angualr/cli
+ // because @angular/cli created has include/exclude rules of global .css files.
+ const styleRules = baseConfig.module.rules.filter(
+ rule => !rule.test || rule.test.toString() !== '/\\.css$/'
+ );
+
+ // cliStyleConfig.entry adds global style files to the webpack context
+ const entry = {
+ ...baseConfig.entry,
+ ...cliStyleConfig.entry,
+ };
+
+ const mod = {
+ ...baseConfig.module,
+ rules: [...cliStyleConfig.module.rules, ...styleRules],
+ };
+
+ // We use cliCommonConfig plugins to serve static assets files.
+ const plugins = [...cliStyleConfig.plugins, ...cliCommonConfig.plugins, ...baseConfig.plugins];
+
+ return {
+ ...baseConfig,
+ entry,
+ module: mod,
+ plugins,
+ };
+}

app/angular/src/server/config.js

@@ -3,6 +3,10 @@ import fs from 'fs';
 import path from 'path';
 import loadBabelConfig from './babel_config';
 import loadTsConfig from './ts_config';
+import {
+ getAngularCliWebpackConfigOptions,
+ applyAngularCliWebpackConfig,
+} from './angular-cli_config';
 
 // avoid ESLint errors
 const logger = console;
@@ -39,6 +43,12 @@ export default function(configType, baseConfig, configDir) {
  config.entry.manager.unshift(storybookDefaultAddonsPath);
  }
 
+ // Check whether project has Angular CLI configuration file
+ const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(process.cwd());
+ if (cliWebpackConfigOptions) {
+ logger.info('=> Loading angular-cli config.');
+ }
+
  // Check whether user has a custom webpack config file and
  // return the (extended) base configuration if it's not available.
  const customConfigPath = path.resolve(configDir, 'webpack.config.js');
@@ -48,15 +58,16 @@ export default function(configType, baseConfig, configDir) {
  const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
  const customConfig = require(configPath);
 
- return customConfig(config);
+ return applyAngularCliWebpackConfig(customConfig(config), cliWebpackConfigOptions);
  }
  const customConfig = require(customConfigPath);
 
  if (typeof customConfig === 'function') {
  logger.info('=> Loading custom webpack config (full-control mode).');
- return customConfig(config, configType);
+ return customConfig(applyAngularCliWebpackConfig(config, cliWebpackConfigOptions), configType);
  }
  logger.info('=> Loading custom webpack config (extending mode).');
+
  return {
  ...customConfig,
  // We'll always load our configurations after the custom config.

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

@@ -76,10 +76,6 @@ export default function(configDir) {
  loader: 'raw-loader',
  exclude: /\.async\.css$/,
  },
- {
- test: /\.scss$/,
- loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
- },
  {
  test: /\.md$/,
  use: [

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

@@ -88,10 +88,6 @@ export default function(configDir) {
  loader: 'raw-loader',
  exclude: /\.async\.html$/,
  },
- {
- test: /\.scss$/,
- loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
- },
  ],
  },
  resolve: {