Angular: Improve docs inline rendering setup

addons/docs/angular/README.md

@@ -220,12 +220,10 @@ Then update `.storybook/preview.js`:
 
 ```js
 import { addParameters } from '@storybook/angular';
-import { prepareForInline } from '@storybook/addon-docs/angular/inline';
 
 addParameters({
   docs: {
     inlineStories: true,
-    prepareForInline,
   },
 });
 ```

addons/docs/src/frameworks/angular/config.ts

@@ -1,9 +1,13 @@
 import { SourceType } from '../../shared';
 import { extractArgTypes, extractComponentDescription } from './compodoc';
 import { sourceDecorator } from './sourceDecorator';
+import { prepareForInline } from './prepareForInline';
 
 export const parameters = {
   docs: {
+    // probably set this to true by default once it's battle-tested
+    inlineStories: true,
+    prepareForInline,
     extractArgTypes,
     extractComponentDescription,
     source: {

addons/docs/src/frameworks/angular/prepareForInline.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IStory, StoryContext } from '@storybook/angular';
-import { ElementRendererService } from '@storybook/angular/element-renderer';
 import { StoryFn } from '@storybook/addons';
+import { logger } from '@storybook/client-logger';
 
 const customElementsVersions: Record<string, number> = {};
 
@@ -27,6 +27,15 @@ export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: S
     }
 
     async componentDidMount() {
+      const { ElementRendererService } = await import('@storybook/angular/element-renderer').catch(
+        (error) => {
+          logger.error(
+            'Check the documentation to activate `inlineStories`. The `@angular/elements` & `@webcomponents/custom-elements` dependencies are required.'
+          );
+          throw error;
+        }
+      );
+
       // eslint-disable-next-line no-undef
       customElements.define(
         customElementsName,

addons/docs/src/frameworks/angular/preset.ts

@@ -0,0 +1,29 @@
+import { Configuration, IgnorePlugin, Plugin } from 'webpack';
+
+export function webpackFinal(webpackConfig: Configuration = {}): Configuration {
+  return {
+    ...webpackConfig,
+    plugins: [...webpackConfig.plugins, ...makeAngularElementRendererOptional()],
+  };
+}
+/**
+ * Ignore `@storybook/angular/element-renderer` import if `@angular/elements` is not available
+ */
+function makeAngularElementRendererOptional(): Plugin[] {
+  if (
+    moduleIsAvailable('@angular/elements') &&
+    moduleIsAvailable('@webcomponents/custom-elements')
+  ) {
+    return [];
+  }
+  return [new IgnorePlugin(/@storybook(\\|\/)angular(\\|\/)element-renderer/)];
+}
+
+function moduleIsAvailable(moduleName: string): boolean {
+  try {
+    require.resolve(moduleName);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}

examples/angular-cli/.storybook/preview.ts

@@ -1,6 +1,4 @@
-import { addParameters } from '@storybook/angular';
 import { setCompodocJson } from '@storybook/addon-docs/angular';
-import { prepareForInline } from '@storybook/addon-docs/angular/inline';
 import addCssWarning from '../src/cssWarning';
 
 // @ts-ignore
@@ -17,17 +15,16 @@ setCompodocJson(filtered);
 
 addCssWarning();
 
-addParameters({
+export const parameters = {
   docs: {
     inlineStories: true,
-    prepareForInline,
   },
   options: {
     storySort: {
       order: ['Welcome', 'Core ', 'Addons ', 'Basics '],
     },
   },
-});
+};
 
 export const globalTypes = {
   theme: {