diff --git a/aio/angular.json b/aio/angular.json
index 4940d34a23..7799e38f68 100644
--- a/aio/angular.json
+++ b/aio/angular.json
@@ -44,17 +44,7 @@
"src/assets",
"src/generated",
"src/pwa-manifest.json",
- "src/google385281288605d160.html",
- {
- "glob": "native-shim.js",
- "input": "node_modules/@webcomponents/custom-elements/src",
- "output": "/assets/js"
- },
- {
- "glob": "es.reflect.construct.js",
- "input": "node_modules/core-js/modules",
- "output": "/assets/js"
- }
+ "src/google385281288605d160.html"
],
"styles": [
"src/styles/main.scss"
@@ -156,17 +146,7 @@
"src/assets",
"src/generated",
"src/pwa-manifest.json",
- "src/google385281288605d160.html",
- {
- "glob": "native-shim.js",
- "input": "node_modules/@webcomponents/custom-elements/src",
- "output": "/assets/js"
- },
- {
- "glob": "es.reflect.construct.js",
- "input": "node_modules/core-js/modules",
- "output": "/assets/js"
- }
+ "src/google385281288605d160.html"
],
"styles": [
"src/styles/main.scss"
diff --git a/aio/ngsw-config.json b/aio/ngsw-config.json
index 15ff26a591..ce6c12bfaf 100644
--- a/aio/ngsw-config.json
+++ b/aio/ngsw-config.json
@@ -13,8 +13,6 @@
"/assets/js/*.js",
"/*.css",
"/*.js",
- "!/assets/js/es.reflect.construct.js",
- "!/assets/js/native-shim.js",
"!/*-es5*.js"
],
"urls": [
@@ -41,8 +39,7 @@
"resources": {
"files": [
"/assets/images/favicons/**",
- "/assets/js/es.reflect.construct.js",
- "/assets/js/native-shim.js",
+ "/generated/js/custom-elements-es5-polyfills.js",
"/*-es5*.js",
"!/**/_unused/**"
]
diff --git a/aio/package.json b/aio/package.json
index ecf325e6eb..92e37538c9 100644
--- a/aio/package.json
+++ b/aio/package.json
@@ -77,8 +77,10 @@
"~~audit-web-app": "node scripts/audit-web-app",
"~~check-env": "node scripts/check-environment",
"~~clean-generated": "node --eval \"require('shelljs').rm('-rf', 'src/generated')\"",
+ "pre~~build": "yarn ~~build-ce-es5-polyfills",
"~~build": "ng build --configuration=stable",
"post~~build": "yarn build-404-page",
+ "~~build-ce-es5-polyfills": "esbuild src/custom-elements-es5-polyfills.js --bundle --minify | swc --config=minify=true --filename=custom-elements-es5-polyfills.js --out-file=src/generated/js/custom-elements-es5-polyfills.js --no-swcrc",
"~~light-server": "light-server --bind=localhost --historyindex=/index.html --no-reload"
},
"//engines-comment": "Keep this in sync with /package.json and /aio/tools/examples/shared/package.json",
@@ -109,6 +111,8 @@
"@angular-devkit/build-angular": "0.1102.2",
"@angular/cli": "11.2.2",
"@angular/compiler-cli": "11.2.3",
+ "@swc/cli": "^0.1.35",
+ "@swc/core": "^1.2.50",
"@types/jasmine": "~3.6.0",
"@types/lunr": "^2.3.2",
"@types/node": "^12.7.9",
@@ -124,6 +128,7 @@
"dgeni": "^0.4.13",
"dgeni-packages": "^0.28.4",
"entities": "^1.1.1",
+ "esbuild": "^0.9.0",
"eslint": "^3.19.0",
"eslint-plugin-jasmine": "^2.2.0",
"find-free-port": "^2.0.0",
diff --git a/aio/src/custom-elements-es5-polyfills.js b/aio/src/custom-elements-es5-polyfills.js
new file mode 100644
index 0000000000..ed34c2c8ae
--- /dev/null
+++ b/aio/src/custom-elements-es5-polyfills.js
@@ -0,0 +1,15 @@
+/**
+ * Custom Elements polyfills for browsers that natively support Custom Elements but not ES2015
+ * modules.
+ *
+ * NOTE:
+ * Chrome, Firefox and Safari should not need these, because they added support for ES2015 modules
+ * before Custom Elements. It is still required for some other (less common) browsers:
+ * - UC browser for android 11.8 (~3.5% global usage)
+ * - Samsung browser 5.0-8.1 (~0.43% global usage)
+ * - Opera 41-47 (~0.02% global usage)
+ */
+// @ts-nocheck
+
+require('core-js/modules/es.reflect.construct'); // Required by `native-shim.js`.
+require('@webcomponents/custom-elements/src/native-shim');
diff --git a/aio/src/index.html b/aio/src/index.html
index d1c727d45c..990b09bd90 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -110,16 +110,16 @@
- ;
- ;
+