diff --git a/MIGRATION.md b/MIGRATION.md
index 291e0008cb84..a4a8f4fba6a4 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
+  - [Angular 12 upgrade](#angular-12-upgrade)
   - [6.3 deprecations](#63-deprecations)
     - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
 - [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
@@ -9,6 +10,7 @@
     - [New Angular storyshots format](#new-angular-storyshots-format)
     - [Deprecated Angular story component](#deprecated-angular-story-component)
     - [New Angular renderer](#new-angular-renderer)
+    - [Components without selectors](#components-without-selectors)
   - [Packages now available as ESModules](#packages-now-available-as-esmodules)
   - [6.2 Deprecations](#62-deprecations)
     - [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
@@ -157,6 +159,24 @@
 
 ## From version 6.2.x to 6.3.0
 
+### Angular 12 upgrade
+
+Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to do the following steps to force Storybook to use webpack 5 for building your project:
+
+```js
+npm install @storybook/builder-webpack5 --save-dev # or yarn
+```
+
+The edit your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+};
+```
+
 ### 6.3 deprecations
 
 #### Deprecated scoped blocks imports
@@ -224,7 +244,8 @@ export const parameters = {
 
 Please also file an issue if you need to opt out. We plan to remove the legacy renderer in 7.0.
 
-#### Components Without Selectors
+#### Components without selectors
+
 When the new Angular renderer is used, all Angular Story components must either have a selector, or be added to the `entryComponents` array of the story's `moduleMetadata`. If the component has any `Input`s or `Output`s to be controlled with `args`, a selector should be added.
 
 ### Packages now available as ESModules
diff --git a/addons/docs/src/frameworks/angular/preset.ts b/addons/docs/src/frameworks/angular/preset.ts
index 919a2f44775f..b43999f72588 100644
--- a/addons/docs/src/frameworks/angular/preset.ts
+++ b/addons/docs/src/frameworks/angular/preset.ts
@@ -16,7 +16,7 @@ function makeAngularElementRendererOptional(): Plugin[] {
   ) {
     return [];
   }
-  return [new IgnorePlugin(/@storybook(\\|\/)angular(\\|\/)element-renderer/)];
+  return [new IgnorePlugin({ resourceRegExp: /@storybook(\\|\/)angular(\\|\/)element-renderer/ })];
 }
 
 function moduleIsAvailable(moduleName: string): boolean {
diff --git a/lib/cli/src/generators/ANGULAR/index.ts b/lib/cli/src/generators/ANGULAR/index.ts
index 57a4758a41ad..5b6481a9279b 100644
--- a/lib/cli/src/generators/ANGULAR/index.ts
+++ b/lib/cli/src/generators/ANGULAR/index.ts
@@ -1,4 +1,5 @@
 import path from 'path';
+import semver from '@storybook/semver';
 import {
   isDefaultProjectSet,
   editStorybookTsConfig,
@@ -8,6 +9,7 @@ import {
 } from './angular-helpers';
 import { writeFileAsJson, copyTemplate } from '../../helpers';
 import { baseGenerator, Generator } from '../baseGenerator';
+import { CoreBuilder } from '../../project_types';
 
 function editAngularAppTsConfig() {
   const tsConfigJson = getAngularAppTsConfigJson();
@@ -31,8 +33,12 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
       'Could not find a default project in your Angular workspace.\nSet a defaultProject in your angular.json and re-run the installation.'
     );
   }
-  baseGenerator(packageManager, npmOptions, options, 'angular', {
-    extraPackages: ['@compodoc/compodoc'],
+  const angularVersion = semver.coerce(await packageManager.getVersion('@angular/core'))?.version;
+  const isWebpack5 = semver.gte(angularVersion, '12.0.0');
+  const updatedOptions = isWebpack5 ? { ...options, builder: CoreBuilder.Webpack5 } : options;
+
+  baseGenerator(packageManager, npmOptions, updatedOptions, 'angular', {
+    extraPackages: ['@compodoc/compodoc', '@angular/elements', '@webcomponents/custom-elements'],
     addScripts: false,
   });
   copyTemplate(__dirname, options.storyFormat);
diff --git a/lib/cli/src/generators/configure.ts b/lib/cli/src/generators/configure.ts
index 030605221ec8..2f1d6c3cd87e 100644
--- a/lib/cli/src/generators/configure.ts
+++ b/lib/cli/src/generators/configure.ts
@@ -1,4 +1,5 @@
 import fse from 'fs-extra';
+import dedent from 'ts-dedent';
 import { SupportedFrameworks } from '../project_types';
 
 interface ConfigureMainOptions {
@@ -43,27 +44,35 @@ function configureMain({
   });
 }
 
-function configurePreview(framework: SupportedFrameworks, commonJs: boolean) {
-  const parameters = `
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
+const frameworkToPreviewParts: Partial<Record<SupportedFrameworks, any>> = {
+  angular: {
+    prefix: dedent`
+      import { setCompodocJson } from "@storybook/addon-docs/angular";
+      import docJson from "../documentation.json";
+      setCompodocJson(docJson);
+      
+      `.trimStart(),
+    extraParameters: 'docs: { inlineStories: true },',
   },
-}`;
+};
 
-  const preview =
-    framework === 'angular'
-      ? `
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-import docJson from "../documentation.json";
-setCompodocJson(docJson);
+function configurePreview(framework: SupportedFrameworks, commonJs: boolean) {
+  const { prefix = '', extraParameters = '' } = frameworkToPreviewParts[framework] || {};
 
-${parameters}`
-      : parameters;
+  const preview = dedent`
+    ${prefix}
+    export const parameters = {
+      actions: { argTypesRegex: "^on[A-Z].*" },
+      controls: {
+        matchers: {
+          color: /(background|color)$/i,
+          date: /Date$/,
+        },
+      },
+      ${extraParameters}
+    }`
+    .replace('  \n', '')
+    .trim();
 
   fse.writeFileSync(`./.storybook/preview.${commonJs ? 'cjs' : 'js'}`, preview, {
     encoding: 'utf8',