fix(examples): transpile Angular es5 bundle to SystemJS (bazel-contri…

…b#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

@@ -155,6 +155,7 @@ babel(
         "--no-babelrc",
         "--source-maps",
         "--presets=@babel/preset-env",
+        "--plugins=@babel/plugin-transform-modules-systemjs",
         "--out-dir",
         "$(@D)",
     ],

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>

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;