Angular: Fix angular 13.1 JIT error and HMR reload

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

@@ -3,6 +3,7 @@ import { logger } from '@storybook/node-logger';
 import { targetFromTargetString, BuilderContext, Target } from '@angular-devkit/architect';
 import { sync as findUpSync } from 'find-up';
 import semver from '@storybook/semver';
+import dedent from 'ts-dedent';
 
 import { logging, JsonObject } from '@angular-devkit/core';
 import { moduleIsAvailable } from './utils/module-is-available';
@@ -44,7 +45,11 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
         const legacyDefaultOptions = await getLegacyDefaultBuildOptions(_options);
 
         return getWebpackConfig13_x_x(_baseConfig, {
-          builderOptions: { ...builderOptions, ...legacyDefaultOptions },
+          builderOptions: {
+            watch: options.configType === 'DEVELOPMENT',
+            ...builderOptions,
+            ...legacyDefaultOptions,
+          },
           builderContext,
         });
       },
@@ -142,8 +147,12 @@ async function getLegacyDefaultBuildOptions(options: PresetOptions) {
     return {};
   }
 
-  // TODO ~ legacy way to get default options
-  // TODO ~ Add deprecation warning and ex for builder use ? `);
+  logger.warn(dedent`Your Storybook startup uses a solution that will not be supported in version 7.0. 
+            You must use angular builder to have an explicit configuration on the project used in angular.json
+            Read more at:
+            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#sb-angular-builder)
+            - https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular13)
+          `);
   const dirToSearch = process.cwd();
 
   // Read angular workspace

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

@@ -1,13 +1,30 @@
 import path from 'path';
+import semver from '@storybook/semver';
 import { ContextReplacementPlugin, Configuration } from 'webpack';
 import autoprefixer from 'autoprefixer';
 import getTsLoaderOptions from './ts_config';
 import createForkTsCheckerInstance from './create-fork-ts-checker-plugin';
 
-export function webpack(
+export async function webpack(
   config: Configuration,
-  { configDir }: { configDir: string }
-): Configuration {
+  { configDir, angularBuilderContext }: { configDir: string; angularBuilderContext: any }
+): Promise<Configuration> {
+  try {
+    // Disable all this webpack stuff if we use angular-cli >= 12
+    // Angular cli is in charge of doing all the necessary for angular. If there is any additional configuration to add, it must be done in the preset angular-cli versioned.
+    const angularCliVersion = await import('@angular/cli').then((m) =>
+      semver.coerce(m.VERSION.full)
+    );
+    if (
+      (semver.satisfies(angularCliVersion, '12.2.x') && angularBuilderContext) ||
+      semver.satisfies(angularCliVersion, '>=13.0.0')
+    ) {
+      return config;
+    }
+  } catch (error) {
+    // do nothing, continue
+  }
+
   const tsLoaderOptions = getTsLoaderOptions(configDir);
   return {
     ...config,