fix(docs-infra): fix `elements` example when used with ES5 (#36536)

Previously, the `elements` docs example only worked in browsers that
natively supported Custom Elements and ES2015 modules. Furthermore, it
didn't work on StackBlitz, because StackBlitz ignores the specified
`target` in `tsconfig.json` and uses the UMD bundles (i.e. ES5 code)
even on browsers that do support ES2015.
(NOTE: In the past, this was not a problem, because we explicitly did
not provide a StackBlitz example. This has changed in #36067.)

This commit ensures the example works on all browsers and also on
StackBlitz by providing the necessary Custom Elements polyfills.

Fixes #36532

PR Close #36536

aio/tools/example-zipper/customizer/package-json/elements.json

@@ -8,7 +8,8 @@
     { "name": "e2e", "command": "ng e2e" }
   ],
   "dependencies": [
-    "@angular/elements"
+    "@angular/elements",
+    "@webcomponents/custom-elements"
   ],
   "devDependencies": [
     "@angular-devkit/build-angular",

aio/tools/examples/example-boilerplate.js

@@ -30,7 +30,7 @@ const BOILERPLATE_PATHS = {
 // This maps the CLI files that exists in a parent folder
 const cliRelativePath = BOILERPLATE_PATHS.cli.map(file => `../cli/${file}`);
 
-BOILERPLATE_PATHS.elements = [...cliRelativePath, 'package.json'];
+BOILERPLATE_PATHS.elements = [...cliRelativePath, 'package.json', 'src/polyfills.ts'];
 
 BOILERPLATE_PATHS.i18n = [...cliRelativePath, 'angular.json', 'package.json'];
 
@@ -79,7 +79,7 @@ class ExampleBoilerPlate {
     if (!fs.existsSync(SHARED_NODE_MODULES_PATH)) {
       throw new Error(
           `The shared node_modules folder for the examples (${SHARED_NODE_MODULES_PATH}) is missing.\n` +
-          `Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?`);
+          'Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?');
     }
 
     if (!viewengine) {

aio/tools/examples/shared/boilerplate/elements/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "~9.0.6",
     "@angular/platform-browser-dynamic": "~9.0.6",
     "@angular/router": "~9.0.6",
+    "@webcomponents/custom-elements": "^1.4.1",
     "angular-in-memory-web-api": "~0.9.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",

aio/tools/examples/shared/boilerplate/elements/src/polyfills.ts

@@ -0,0 +1,70 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch
+ * requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch
+ * specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+// Custom Elements polyfill. Required for browsers that do not natively support Custom Elements.
+import '@webcomponents/custom-elements';
+// Custom Elements ES5 shim. Required when using ES5 bundles on browsers that natively support
+// Custom Elements (either because the browser does not support ES2015 modules or because the app
+// is explicitly configured to generate ES5 only bundles).
+import '@webcomponents/custom-elements/src/native-shim';

aio/tools/examples/shared/package.json

@@ -34,6 +34,7 @@
     "@nguniversal/common": "~9.0.1",
     "@nguniversal/express-engine": "~9.0.1",
     "@nguniversal/module-map-ngfactory-loader": "~9.0.0-next.9",
+    "@webcomponents/custom-elements": "^1.4.1",
     "angular": "1.7.9",
     "angular-in-memory-web-api": "~0.9.0",
     "angular-route": "1.7.9",

aio/tools/examples/shared/yarn.lock

@@ -1425,6 +1425,11 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@webcomponents/custom-elements@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@webcomponents/custom-elements/-/custom-elements-1.4.1.tgz#9803aaa2286a13a4ba200a7a2ea767871598eb60"
+  integrity sha512-vNCS1+3sxJOpoIsBjUQiXjGLngakEAGOD5Ale+6ikg6OZG5qI5O39frm3raPhud/IwnF4vec5ags05YBsgzcuA==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"