build(docs-infra): update AIO to align with new v13.0.0-next.9 CLI apps (#43686)

This commit updates angular.io to more closely align with new apps
created with the latest Angular CLI and remove redundant files/config
now that CLI has dropped support for differential loading.

PR Close #43686

aio/src/app/shared/custom-icon-registry.ts

@@ -47,7 +47,7 @@ export class CustomIconRegistry extends MatIconRegistry {
     super(http, sanitizer, document, errorHandler);
   }
 
-  getNamedSvgIcon(iconName: string, namespace?: string) {
+  override getNamedSvgIcon(iconName: string, namespace?: string) {
     const nsIconMap = this.cachedSvgElements[namespace || DEFAULT_NS];
     let preloadedElement: SVGElement | undefined = nsIconMap && nsIconMap[iconName];
     if (!preloadedElement) {

aio/src/app/shared/reporting-error-handler.ts

@@ -18,7 +18,7 @@ export class ReportingErrorHandler extends ErrorHandler {
    *
    * @param error Information about the error.
    */
-  handleError(error: any) {
+  override handleError(error: any) {
     const versionedError = this.prefixErrorWithVersion(error);
 
     try {

aio/src/custom-elements-es5-polyfills.js

@@ -1,15 +0,0 @@
-/**
- * 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');

aio/src/index.html

@@ -118,18 +118,6 @@
     </h2>
   </noscript>
 
-  <!--
-    Custom Elements polyfills required for browsers that natively support Custom Elements but not
-    ES2015 modules. (See `custom-elements-es5-polyfills.js` for more info.)
-
-    NOTE:
-    The polyfills here will be loaded before the ones in `polyfills.ts` (including
-    `@webcomponents/custom-elements`). This is fine, because the polyfills here are only needed on
-    browsers that natively support Custom Elements, on which `@webcomponents/custom-elements` will
-    be a no-op (so the order of loading does not matter).
-  -->
-  <script src="generated/js/custom-elements-es5-polyfills.js" nomodule></script>
-
 </body>
 
 </html>

aio/src/polyfills.ts

@@ -18,11 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/**
- * 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.

aio/src/test.ts

@@ -3,24 +3,31 @@
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
-    BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
 // Needed for `assert` polyfill uses `process`.
 // See: https://github.com/browserify/commonjs-assert/blob/bba838e9ba9e28edf3127ce6974624208502f6bc/internal/assert/assertion_error.js#L138
 // The `assert` polyfill is needed because of `timezone-mock` which is a Node.JS library but in being used in Browser.
 (globalThis as any).process = {
-    env: {},
+  env: {},
 };
 
-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
-    BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting()
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+  { teardown: { destroyAfterEach: true }},
 );
+
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

aio/src/testing/doc-viewer-utils.ts

@@ -17,17 +17,19 @@ import { ElementsLoader } from 'app/custom-elements/elements-loader';
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 
 export class TestDocViewerComponent extends DocViewerComponent {
-  currViewContainer: HTMLElement;
-  nextViewContainer: HTMLElement;
+  override currViewContainer: HTMLElement;
+  override nextViewContainer: HTMLElement;
 
   // Only used for type-casting; the actual implementation is irrelevant.
-  prepareTitleAndToc(_targetElem: HTMLElement, _docId: string): () => void { return null as any; }
+  override prepareTitleAndToc(_targetElem: HTMLElement, _docId: string): () => void {
+    return null as any;
+  }
 
   // Only used for type-casting; the actual implementation is irrelevant.
-  render(_doc: DocumentContents): Observable<void> { return null as any; }
+  override render(_doc: DocumentContents): Observable<void> { return null as any; }
 
   // Only used for type-casting; the actual implementation is irrelevant.
-  swapViews(_onInsertedCb?: () => void): Observable<void> { return null as any; }
+  override swapViews(_onInsertedCb?: () => void): Observable<void> { return null as any; }
 }