Angular: Fix angular2-template-loader / raw-loader version conf… (#8269)

Angular: Fix angular2-template-loader / raw-loader version conflicts

app/angular/package.json

@@ -36,7 +36,6 @@
     "@storybook/addons": "5.2.3",
     "@storybook/core": "5.2.3",
     "@storybook/node-logger": "5.2.3",
-    "angular2-template-loader": "^0.6.2",
     "core-js": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^1.3.4",
     "global": "^4.3.2",

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

@@ -22,7 +22,7 @@ export function webpack(
               loader: 'ts-loader',
               options: tsLoaderOptions,
             },
-            { loader: 'angular2-template-loader' },
+            { loader: path.resolve(__dirname, 'ngx-template-loader') },
           ],
         },
         {

app/angular/src/server/ngx-template-loader/index.ts

@@ -0,0 +1,48 @@
+/*
+ * By the time this file was added the repository for angular2-template-loader received no updates in 3 years
+ * This is just a copy of https://github.com/TheLarkInn/angular2-template-loader/blob/master/index.js in order
+ * to fix a bug that prevents Storybook from updating raw-loader > ^1.0.0
+ *
+ * As suggested in https://github.com/storybookjs/storybook/issues/7877#issuecomment-536556755 this code was
+ * modified to be compatible with newer versions of raw-loader as well as backwards compatible with raw-loader ^1.0.0
+ */
+
+// using: regex, capture groups, and capture group variables.
+const templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*([,}]))/gm;
+const stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
+const stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
+
+const replaceStringsWithRequires = (string: string) => {
+  return string.replace(stringRegex, (match, quote, url) => {
+    let newUrl = url;
+    if (url.charAt(0) !== '.') {
+      newUrl = `./${url}`;
+    }
+    const requireString = `(require('${newUrl}').default || require('${newUrl}'))`;
+
+    // without the length check an empty style file will throw
+    // "Expected 'styles' to be an array of strings"
+    return `${requireString}.length ? ${requireString} : ''`;
+  });
+};
+
+export default function(source: string) {
+  const styleProperty = 'styles';
+  const templateProperty = 'template';
+
+  return source
+    .replace(templateUrlRegex, (_, templateUrlString: string) => {
+      // replace: templateUrl: './path/to/template.html'
+      // with: template: require('./path/to/template.html')
+      // or: templateUrl: require('./path/to/template.html')
+      // if `keepUrl` query parameter is set to true.
+      return `${templateProperty}:${replaceStringsWithRequires(templateUrlString)}`;
+    })
+    .replace(stylesRegex, (_, styleUrlsString: string) => {
+      // replace: stylesUrl: ['./foo.css', "./baz.css", "./index.component.css"]
+      // with: styles: [require('./foo.css'), require("./baz.css"), require("./index.component.css")]
+      // or: styleUrls: [require('./foo.css'), require("./baz.css"), require("./index.component.css")]
+      // if `keepUrl` query parameter is set to true.
+      return `${styleProperty}:${replaceStringsWithRequires(styleUrlsString)}`;
+    });
+}

yarn.lock

@@ -5120,13 +5120,6 @@ [email protected]:
     remove-trailing-slash "^0.1.0"
     uuid "^3.2.1"
 
-angular2-template-loader@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/angular2-template-loader/-/angular2-template-loader-0.6.2.tgz#c0d44e90fff0fac95e8b23f043acda7fd1c51d7c"
-  integrity sha1-wNROkP/w+sleiyPwQ6zaf9HFHXw=
-  dependencies:
-    loader-utils "^0.2.15"
-
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -18479,7 +18472,7 @@ [email protected], loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^0.2.15, loader-utils@^0.2.16:
+loader-utils@^0.2.16:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=