build(docs-infra): update Angular framework to version 13.0.0-next.9

This commit updates angular.io to a recent prerelease version of the Angular framework (v13.0.0-next.9). Among other benefits, this version also includes the ServiceWorker fix from angular#43518, which fixes angular#28114. NOTE 1: This commit also makes the necessary changes to more closely align angular.io with new apps created with the latest Angular CLI and remove redundant files/config now that CLI has dropped support for differential loading. NOTE 2: We do not update to the latest prerelease version (v13.0.0-next.10) due to an incompatibility of `@angular-eslint` with the new ESM format of `@angular/compiler` ([example failure][1]). Fixes angular#28114 [1]: https://circleci.com/gh/angular/angular/1062087
gkalpak · Oct 3, 2021 · 07eb93a · 07eb93a
1 parent 9f74ea5
commit 07eb93a
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 342 deletions.
diff --git a/aio/.browserslistrc b/aio/.browserslistrc
@@ -9,4 +9,3 @@
 last 2 major versions
 Firefox ESR
 not dead
-IE 11
diff --git a/aio/ngsw-config.template.json b/aio/ngsw-config.template.json
@@ -14,7 +14,6 @@
           "/assets/js/*.js",
           "/*.css",
           "/*.js",
-          "!/*-es5*.js"
         ],
         "urls": [
           "https://fonts.googleapis.com/**",
@@ -42,8 +41,6 @@
       "resources": {
         "files": [
           "/assets/images/favicons/**",
-          "/generated/js/custom-elements-es5-polyfills.js",
-          "/*-es5*.js",
           "!/**/_unused/**"
         ]
       }

diff --git a/aio/package.json b/aio/package.json
@@ -72,11 +72,9 @@
     "~~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 && 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",
     "~~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",
@@ -87,20 +85,20 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "13.0.0-next.7",
+    "@angular/animations": "13.0.0-next.9",
     "@angular/cdk": "12.1.1",
-    "@angular/common": "13.0.0-next.7",
-    "@angular/compiler": "13.0.0-next.7",
-    "@angular/core": "13.0.0-next.7",
-    "@angular/elements": "13.0.0-next.7",
-    "@angular/forms": "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/platform-browser": "13.0.0-next.7",
-    "@angular/platform-browser-dynamic": "13.0.0-next.7",
-    "@angular/router": "13.0.0-next.7",
-    "@angular/service-worker": "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"
@@ -112,9 +110,7 @@
     "@angular-eslint/eslint-plugin-template": "^12.5.0",
     "@angular-eslint/template-parser": "^12.5.0",
     "@angular/cli": "13.0.0-next.7",
-    "@angular/compiler-cli": "13.0.0-next.7",
-    "@swc/cli": "^0.1.36",
-    "@swc/core": "^1.2.51",
+    "@angular/compiler-cli": "13.0.0-next.9",
     "@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.1.0",
     "lighthouse-logger": "^1.2.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",

diff --git a/aio/src/app/shared/custom-icon-registry.ts b/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) {

diff --git a/aio/src/app/shared/reporting-error-handler.ts b/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 {

diff --git a/aio/src/custom-elements-es5-polyfills.js b/aio/src/custom-elements-es5-polyfills.js
diff --git a/aio/src/index.html b/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>
diff --git a/aio/src/polyfills.ts b/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.

diff --git a/aio/src/test.ts b/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.

diff --git a/aio/src/testing/doc-viewer-utils.ts b/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; }
 }
 
 

diff --git a/aio/tsconfig.json b/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,