From 2c38488d288dd5921a2893a50e376fe9bdd7d832 Mon Sep 17 00:00:00 2001
From: Lukas Spirig <lukas.spirig@gmail.com>
Date: Sat, 27 Mar 2021 10:27:09 +0100
Subject: [PATCH] fix(examples): transpile Angular es5 bundle to SystemJS

By default the es5 bundle created with Babel is transpiled to use require
for loading modules. This does not work with SystemJS, which is used in the
Angular example. This PR changes the transpilation to SystemJS.
---
 examples/angular/src/BUILD.bazel             | 1 +
 examples/angular/src/example/index.prod.html | 4 ++--
 examples/angular/src/prerender.ts            | 7 ++++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/examples/angular/src/BUILD.bazel b/examples/angular/src/BUILD.bazel
index 3515db5ded..dd7e21a332 100644
--- a/examples/angular/src/BUILD.bazel
+++ b/examples/angular/src/BUILD.bazel
@@ -155,6 +155,7 @@ babel(
         "--no-babelrc",
         "--source-maps",
         "--presets=@babel/preset-env",
+        "--plugins=@babel/plugin-transform-modules-systemjs",
         "--out-dir",
         "$(@D)",
     ],
diff --git a/examples/angular/src/example/index.prod.html b/examples/angular/src/example/index.prod.html
index 42adb68b16..fc985f9dda 100644
--- a/examples/angular/src/example/index.prod.html
+++ b/examples/angular/src/example/index.prod.html
@@ -26,7 +26,7 @@
 
     <!-- TODO: figure out how diff. loading interacts with 
     https://www.npmjs.com/package/rollup-plugin-bundle-html -->
-    <script type="module" src="/bundle-es2015.min/index.js"></script>
-    <script nomodule="" src="/bundle-es5.min/index.js"></script>
+    <script type="module" src="/bundle-es2015.min/index.js?v=TIMESTAMP-VARIABLE"></script>
+    <script nomodule="">System.import('/bundle-es5.min/index.js?v=TIMESTAMP-VARIABLE')</script>
   </body>
 </html>
diff --git a/examples/angular/src/prerender.ts b/examples/angular/src/prerender.ts
index a613e9c508..eb8bf51056 100644
--- a/examples/angular/src/prerender.ts
+++ b/examples/angular/src/prerender.ts
@@ -14,7 +14,12 @@ const routes = process.argv.slice(routesFlagIdx + 1, process.argv.length);
 const outsFlagIdx = process.argv.findIndex(arg => arg === '--outs');
 const outs = process.argv.slice(outsFlagIdx + 1, routesFlagIdx);
 
-const document = readFileSync(rootIndexPath, { encoding: 'utf8' });
+const document = readFileSync(rootIndexPath, {encoding: 'utf8'})
+                     // Replace the timestamp placeholder for cache busting.
+                     // This is done per build and not per request, so the timestamp
+                     // remains the same, until the app (or more precisely the prerender
+                     // target) is rebuilt.
+                     .replace(/TIMESTAMP-VARIABLE/g, `${Date.now()}`);
 
 const win: any = domino.createWindow(document);
 declare const global: any;