Angular: Add built-in Ivy support instead of relying on addon

app/angular/src/server/framework-preset-angular-ivy.ts

@@ -0,0 +1,54 @@
+import { Configuration } from 'webpack';
+import { process as ngccProcess } from '@angular/compiler-cli/ngcc';
+import * as path from 'path';
+import { Options } from './framework-preset-angular-cli';
+
+/**
+ * Run ngcc for converting modules to ivy format before starting storybook
+ * This step is needed in order to support Ivy in storybook
+ *
+ * Information about Ivy can be found here https://angular.io/guide/ivy
+ */
+export const runNgcc = () => {
+  ngccProcess({
+    // should be async: true but does not work due to
+    // https://github.com/storybookjs/storybook/pull/11157/files#r615413803
+    async: false,
+    basePath: path.join(process.cwd(), 'node_modules'), // absolute path to node_modules
+    createNewEntryPointFormats: true, // --create-ivy-entry-points
+    compileAllFormats: false, // --first-only
+  });
+};
+
+export const webpack = async (webpackConfig: Configuration, options: Options) => {
+  const angularOptions = await options.presets.apply(
+    'angularOptions',
+    {} as {
+      enableIvy?: boolean;
+    },
+    options
+  );
+
+  // Default to true, if undefined
+  if (angularOptions.enableIvy === false) {
+    return webpackConfig;
+  }
+
+  runNgcc();
+
+  return {
+    ...webpackConfig,
+    resolve: {
+      ...webpackConfig.resolve,
+      mainFields: [
+        'es2015_ivy_ngcc',
+        'module_ivy_ngcc',
+        'main_ivy_ngcc',
+        'es2015',
+        'browser',
+        'module',
+        'main',
+      ],
+    },
+  };
+};

app/angular/src/server/options.ts

@@ -7,5 +7,6 @@ export default {
   frameworkPresets: [
     require.resolve('./framework-preset-angular'),
     require.resolve('./framework-preset-angular-cli'),
+    require.resolve('./framework-preset-angular-ivy'),
   ],
 } as LoadOptions;

app/angular/src/types/index.ts

@@ -0,0 +1,7 @@
+import { StorybookConfig as BaseConfig } from '@storybook/core-common';
+
+export interface StorybookConfig extends BaseConfig {
+  angularOptions?: {
+    enableIvy: boolean;
+  };
+}

examples/angular-cli/.storybook/main.js

@@ -15,4 +15,7 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  angularOptions: {
+    enableIvy: true,
+  },
 };