build: remove dependency on @angular/elements and custom elements polyfill (#22586)

crisbeto · web-flow · commit b59bb84c39b6 · 2021-05-02T21:35:50.000-07:00
We weren't using `@angular/elements` for anything and the `custom-elements` polyfill was only included because of it.
diff --git a/package.json b/package.json
@@ -56,12 +56,10 @@
     "@angular/common": "^12.0.0-rc.0",
     "@angular/compiler": "^12.0.0-rc.0",
     "@angular/core": "^12.0.0-rc.0",
-    "@angular/elements": "^12.0.0-rc.0",
     "@angular/forms": "^12.0.0-rc.0",
     "@angular/platform-browser": "^12.0.0-rc.0",
     "@types/googlemaps": "^3.43.1",
     "@types/youtube": "^0.0.42",
-    "@webcomponents/custom-elements": "^1.1.0",
     "core-js-bundle": "^3.8.2",
     "material-components-web": "12.0.0-canary.b52196498.0",
     "rxjs": "^6.5.3",
diff --git a/packages.bzl b/packages.bzl
@@ -33,7 +33,6 @@ ANGULAR_NGCC_BUNDLES = [
     ("@angular/common", ["common-http-testing.umd.js", "common-http.umd.js", "common-testing.umd.js", "common.umd.js"]),
     ("@angular/compiler", ["compiler-testing.umd.js"]),
     ("@angular/core", ["core-testing.umd.js", "core.umd.js"]),
-    ("@angular/elements", ["elements.umd.js"]),
     ("@angular/forms", ["forms.umd.js"]),
     ("@angular/platform-browser-dynamic", ["platform-browser-dynamic-testing.umd.js", "platform-browser-dynamic.umd.js"]),
     ("@angular/platform-browser", ["platform-browser.umd.js", "platform-browser-testing.umd.js", "platform-browser-animations.umd.js"]),
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
@@ -171,7 +171,6 @@ filegroup(
         "@npm//:node_modules/@material/textfield/dist/mdc.textfield.js",
         "@npm//:node_modules/@material/tooltip/dist/mdc.tooltip.js",
         "@npm//:node_modules/@material/top-app-bar/dist/mdc.topAppBar.js",
-        "@npm//:node_modules/@webcomponents/custom-elements/custom-elements.min.js",
         "@npm//:node_modules/core-js-bundle/index.js",
         "@npm//:node_modules/moment/min/moment-with-locales.min.js",
         "@npm//:node_modules/rxjs/bundles/rxjs.umd.min.js",
diff --git a/src/dev-app/example/BUILD.bazel b/src/dev-app/example/BUILD.bazel
@@ -10,6 +10,5 @@ ng_module(
         "//src/components-examples",
         "//src/components-examples/private",
         "//src/material/expansion",
-        "@npm//@angular/elements",
     ],
 )
diff --git a/src/dev-app/index.html b/src/dev-app/index.html
@@ -12,13 +12,6 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
 
-  <script>
-    if (window.customElements) {
-      window.customElements.forcePolyfill = true;
-    }
-  </script>
-  <script src="@webcomponents/custom-elements/custom-elements.min.js"></script>
-
   <!-- FontAwesome for mat-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
@@ -65,7 +65,6 @@ ng_module(
         "//src/material/tabs",
         "@npm//@angular/animations",
         "@npm//@angular/core",
-        "@npm//@angular/elements",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@angular/router",
@@ -111,7 +110,6 @@ concatjs_devserver(
         "@npm//kagekiri",
         "@npm//material-components-web",
         "@npm//moment",
-        "@npm//@webcomponents/custom-elements",
         "//src/material/prebuilt-themes:indigo-pink",
         ":index.html",
         ":theme",
diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html
@@ -14,14 +14,6 @@
 
   <!-- FontAwesome for mat-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-
-  <!-- Angular Elements setup. -->
-  <script>
-    if (window.customElements) {
-      window.customElements.forcePolyfill = true;
-    }
-  </script>
-  <script src="@webcomponents/custom-elements/custom-elements.min.js"></script>
 </head>
 <body>
   <e2e-app>Loading...</e2e-app>
diff --git a/yarn.lock b/yarn.lock
@@ -149,13 +149,6 @@
     yaml "^1.10.0"
     yargs "^16.2.0"
 
-"@angular/elements@^12.0.0-rc.0":
-  version "12.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@angular/elements/-/elements-12.0.0-rc.0.tgz#c01e3a00a121e6312240e82164cd941f08d0823e"
-  integrity sha512-WIwMxNesgpXp12kpfsgz++7oadJ4aQhxFzreqhUnGHGCS0GECbJU8EGSuqyO4TMRP5FZJRDgETRUqysa/wNfgQ==
-  dependencies:
-    tslib "^2.1.0"
-
 "@angular/forms@^12.0.0-rc.0":
   version "12.0.0-rc.0"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-12.0.0-rc.0.tgz#1a1f71be85f8ad4e41a4ef9fe5dbef3bb04a5420"
@@ -2216,11 +2209,6 @@
     "@typescript-eslint/types" "4.14.0"
     eslint-visitor-keys "^2.0.0"
 
-"@webcomponents/custom-elements@^1.1.0":
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/@webcomponents/custom-elements/-/custom-elements-1.4.3.tgz#1800d49f38bb4425ebfd160b50115e62776109d7"
-  integrity sha512-iD0YW46SreUQANGccywK/eC+gZELNHocZZrY2fGwrIlx/biQOTkAF9IohisibHbrmIHmA9pVCIdGwzfO+W0gig==
-
 JSONStream@^1.0.4, JSONStream@^1.2.1:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,5 @@ ng_module(`
`10`	`10`	`"//src/components-examples",`
`11`	`11`	`"//src/components-examples/private",`
`12`	`12`	`"//src/material/expansion",`
`13`		`- "@npm//@angular/elements",`
`14`	`13`	`],`
`15`	`14`	`)`