Merge pull request #15229 from storybookjs/integrate-addon-ivy

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;
+  };
+}

docs/workflows/faq.md

@@ -4,6 +4,22 @@ title: 'Frequently Asked Questions'
 
 Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the [Storybook Repository](https://github.com/storybookjs/storybook/).
 
+### How can I opt-out of Angular Ivy?
+
+In case you are having trouble with Angular Ivy you can deactivate it in your `main.js`:
+
+```javascript
+module.exports = {
+  stories: [/* ... */],
+  addons: [/* ... */],
+  angularOptions: {
+    enableIvy: false,
+  },
+};
+```
+
+Please report any issues related to Ivy in our [GitHub Issue Tracker](https://github.com/storybookjs/storybook/labels/app%3A%20angular) as the support for View Engine will be dropped in a future release of Angular.
+
 ### How can I run coverage tests with Create React App and leave out stories?
 
 Create React App does not allow providing options to Jest in your `package.json`, however you can run `jest` with commandline arguments:

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

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

lib/cli/src/generators/ANGULAR/index.ts

@@ -40,7 +40,6 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
   const updatedOptions = isWebpack5 ? { ...options, builder: CoreBuilder.Webpack5 } : options;
 
   baseGenerator(packageManager, npmOptions, updatedOptions, 'angular', {
-    extraAddons: ['storybook-addon-angular-ivy'],
     extraPackages: ['@compodoc/compodoc', '@angular/elements', '@webcomponents/custom-elements'],
     addScripts: false,
   });