From f7130de66e629e3298a7acf0608ab4aa276c4697 Mon Sep 17 00:00:00 2001
From: Lukas Spirig <lukas.spirig@gmail.com>
Date: Tue, 20 Apr 2021 14:57:06 +0200
Subject: [PATCH] fix(examples): transpile Angular es5 bundle to SystemJS
 (#2562)

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;