build(docs-infra): update Angular framework/Material to versions 13.0.0-next.9/7

aio/.browserslistrc

@@ -9,4 +9,3 @@
 last 2 major versions
 Firefox ESR
 not dead
-IE 11

aio/ngsw-config.template.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
   "index": "/index.html",
   "assetGroups": [
     {
@@ -13,7 +14,9 @@
           "/assets/js/*.js",
           "/*.css",
           "/*.js",
-          "!/*-es5*.js"
+          "!/ngsw-worker.js",
+          "!/safety-worker.js",
+          "!/worker-basic.min.js"
         ],
         "urls": [
           "https://fonts.googleapis.com/**",
@@ -41,8 +44,6 @@
       "resources": {
         "files": [
           "/assets/images/favicons/**",
-          "/generated/js/custom-elements-es5-polyfills.js",
-          "/*-es5*.js",
           "!/**/_unused/**"
         ]
       }

aio/package.json

@@ -72,11 +72,9 @@
     "~~audit-web-app": "node scripts/audit-web-app.mjs",
     "~~check-env": "node scripts/check-environment",
     "~~clean-generated": "node --eval \"require('shelljs').rm('-rf', 'src/generated')\"",
-    "pre~~build": "yarn ~~build-ce-es5-polyfills && yarn ~~build-ngsw-config",
+    "pre~~build": "node scripts/build-ngsw-config",
     "~~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",
-    "~~build-ngsw-config": "node scripts/build-ngsw-config",
+    "post~~build": "yarn build-404-page && ngsw-config dist src/generated/ngsw-config.json",
     "~~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",
@@ -88,19 +86,19 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "13.0.0-next.9",
-    "@angular/cdk": "12.1.1",
+    "@angular/cdk": "13.0.0-next.7",
     "@angular/common": "13.0.0-next.9",
     "@angular/compiler": "13.0.0-next.9",
     "@angular/core": "13.0.0-next.9",
     "@angular/elements": "13.0.0-next.9",
     "@angular/forms": "13.0.0-next.9",
-    "@angular/material": "12.1.1",
+    "@angular/material": "13.0.0-next.7",
     "@angular/platform-browser": "13.0.0-next.9",
     "@angular/platform-browser-dynamic": "13.0.0-next.9",
     "@angular/router": "13.0.0-next.9",
     "@angular/service-worker": "13.0.0-next.9",
     "@webcomponents/custom-elements": "1.5.0",
-    "rxjs": "^6.6.7",
+    "rxjs": "~7.3.0",
     "safevalues": "^0.1.8",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -113,8 +111,6 @@
     "@angular-eslint/template-parser": "^12.5.0",
     "@angular/cli": "13.0.0-next.7",
     "@angular/compiler-cli": "13.0.0-next.9",
-    "@swc/cli": "^0.1.36",
-    "@swc/core": "^1.2.51",
     "@types/jasmine": "~3.9.0",
     "@types/lunr": "^2.3.3",
     "@types/node": "^12.7.9",
@@ -135,7 +131,6 @@
     "dgeni": "^0.4.14",
     "dgeni-packages": "^0.29.2",
     "entities": "^3.0.0",
-    "esbuild": "^0.13.0",
     "eslint": "^7.26.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jasmine": "^4.1.2",
@@ -160,7 +155,7 @@
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
     "light-server": "^2.9.1",
     "lighthouse": "^8.5.1",
     "lighthouse-logger": "^1.3.0",
@@ -181,7 +176,7 @@
     "ts-node": "^10.0.0",
     "tsec": "^0.1.5",
     "tslint": "~6.1.3",
-    "typescript": "~4.4.2",
+    "typescript": "~4.4.3",
     "uglify-js": "^3.13.3",
     "unist-util-filter": "^2.0.3",
     "unist-util-source": "^3.0.0",

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.spec.ts

@@ -1,4 +1,4 @@
-import { ErrorHandler, Injector } from '@angular/core';
+import { ErrorHandler, Injector, VERSION } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { WindowToken } from 'app/shared/window';
 import { AppModule } from 'app/app.module';
@@ -46,10 +46,27 @@ describe('ReportingErrorHandler service', () => {
       expect(onerrorSpy.calls.argsFor(0)[4]).toEqual(jasmine.any(Error));
 
       // Then error from initial exception
-      expect(onerrorSpy.calls.argsFor(1)[0]).toEqual('initial error');
+      expect(onerrorSpy.calls.argsFor(1)[0]).toEqual(`[v${VERSION.full}] initial error`);
       expect(onerrorSpy.calls.argsFor(1)[4]).toEqual(error);
     });
 
+    it('should augment an error object with version info', () => {
+      const originalMessage = 'this is an error message';
+      const error = new Error(originalMessage);
+
+      expect(error.message).toBe(originalMessage);
+      if (error.stack) {
+        expect(error.stack).toContain(originalMessage);
+      }
+
+      handler.handleError(error);
+
+      expect(error.message).toBe(`[v${VERSION.full}] ${originalMessage}`);
+      if (error.stack) {
+        expect(error.stack).toContain(`[v${VERSION.full}] ${originalMessage}`);
+      }
+    });
+
     it('should send an error object to window.onerror', () => {
       const error = new Error('this is an error message');
       handler.handleError(error);
@@ -72,10 +89,10 @@ describe('ReportingErrorHandler service', () => {
       expect(onerrorSpy).toHaveBeenCalledWith('{reason: this is an error message}');
     });
 
-    it('should send an error string to window.onerror', () => {
+    it('should send an error string to window.onerror (prefixed with version info)', () => {
       const error = 'this is an error message';
       handler.handleError(error);
-      expect(onerrorSpy).toHaveBeenCalledWith(error);
+      expect(onerrorSpy).toHaveBeenCalledWith(`[v${VERSION.full}] ${error}`);
     });
 
     it('should send a non-object, non-string error stringified to window.onerror', () => {

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

@@ -1,4 +1,4 @@
-import { ErrorHandler, Inject, Injectable } from '@angular/core';
+import { ErrorHandler, Inject, Injectable, VERSION } from '@angular/core';
 import { WindowToken } from './window';
 
 /**
@@ -18,13 +18,30 @@ export class ReportingErrorHandler extends ErrorHandler {
    *
    * @param error Information about the error.
    */
-  handleError(error: any) {
+  override handleError(error: any) {
+    const versionedError = this.prefixErrorWithVersion(error);
+
     try {
-      super.handleError(error);
+      super.handleError(versionedError);
     } catch (e) {
       this.reportError(e);
     }
-    this.reportError(error);
+    this.reportError(versionedError);
+  }
+
+  private prefixErrorWithVersion<T>(error: T): T {
+    const prefix = `[v${VERSION.full}] `;
+
+    if (error instanceof Error) {
+      const oldMessage = error.message;
+      error.message = prefix + oldMessage;
+      error.stack = error.stack?.replace(oldMessage, error.message);
+    } else if (typeof error === 'string') {
+      error = prefix + error as unknown as T;
+    }
+    // If it is a different type, omit the version to avoid altering the original `error` object.
+
+    return error;
   }
 
   private reportError(error: unknown) {

aio/src/index.html

@@ -118,18 +118,6 @@ <h2 style="color: red; margin-top: 40px; position: relative; text-align: center;
     </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; }
 }
 
 

aio/tsconfig.json

@@ -6,6 +6,10 @@
     "outDir": "./out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "noImplicitOverride": true,
+    // NOTE: Intentionally deviate from default Angular CLI settings
+    //       (due to many violations and uglier syntax).
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,