fix(storybook): apply a webpack tweak for storybook and angular (#8392)

* fix(storybook): apply a webpack tweak for storybook and angular

- [x] remove html raw-loader from the webpack rules array if storybook is used with angular v13;

the html raw-loader breaks jit compilation when storybook 6.5 aplha is used with angular v13

ISSUES CLOSED: #8360

fix(testing): update storybook generator configuration snapshot

fix(testing): update storybook generator configuration snapshot, use the flag --update-snapshot

fix(testing): update storybook generator configuration snapshot, test affected, update snapshot

* cleanup(storybook): make the webpack tweak for storybook and angular explanation more concise

packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap

@@ -20,7 +20,18 @@ module.exports = {
     if (rootMain.webpackFinal) {
       config = await rootMain.webpackFinal(config, { configType });
     }
+
+    
+
     
+      // remove html raw-loader that breaks Jit compilation
+      const rules = (config.module.rules ?? []).filter(
+        (rule) =>
+          rule.test !== /\\\\.html$/ &&
+          rule.exclude !== /\\\\.async\\\\.html$/ &&
+          !rule.loader?.includes('raw-loader')
+      );
+      config.module.rules = [...rules];
     
 
     // add your own webpack tweaks if needed

packages/storybook/src/generators/configuration/__snapshots__/configuration.spec.ts.snap

@@ -20,7 +20,18 @@ module.exports = {
     if (rootMain.webpackFinal) {
       config = await rootMain.webpackFinal(config, { configType });
     }
+
+    
+
     
+      // remove html raw-loader that breaks Jit compilation
+      const rules = (config.module.rules ?? []).filter(
+        (rule) =>
+          rule.test !== /\\\\.html$/ &&
+          rule.exclude !== /\\\\.async\\\\.html$/ &&
+          !rule.loader?.includes('raw-loader')
+      );
+      config.module.rules = [...rules];
     
 
     // add your own webpack tweaks if needed
@@ -59,13 +70,24 @@ module.exports = {
     if (rootMain.webpackFinal) {
       config = await rootMain.webpackFinal(config, { configType });
     }
-    
+
     // for backwards compatibility call the \`rootWebpackConfig\`
       // this can be removed once that one is migrated fully to
       // use the \`webpackFinal\` property in the \`main.js\` file
       config = rootWebpackConfig({ config });
     
 
+    
+      // remove html raw-loader that breaks Jit compilation
+      const rules = (config.module.rules ?? []).filter(
+        (rule) =>
+          rule.test !== /\\\\.html$/ &&
+          rule.exclude !== /\\\\.async\\\\.html$/ &&
+          !rule.loader?.includes('raw-loader')
+      );
+      config.module.rules = [...rules];
+    
+
     // add your own webpack tweaks if needed
 
     return config;

packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__

@@ -17,13 +17,24 @@ module.exports = {
     if (rootMain.webpackFinal) {
       config = await rootMain.webpackFinal(config, { configType });
     }
-    
+
     <% if (existsRootWebpackConfig) { %>// for backwards compatibility call the `rootWebpackConfig`
       // this can be removed once that one is migrated fully to
       // use the `webpackFinal` property in the `main.js` file
       config = rootWebpackConfig({ config });
     <% } %>
 
+    <% if (uiFramework === '@storybook/angular') { %>
+      // remove html raw-loader that breaks Jit compilation
+      const rules = (config.module.rules ?? []).filter(
+        (rule) =>
+          rule.test !== /\.html$/ &&
+          rule.exclude !== /\.async\.html$/ &&
+          !rule.loader?.includes('raw-loader')
+      );
+      config.module.rules = [...rules];
+    <% } %>
+
     // add your own webpack tweaks if needed
 
     return config;