build: update to Angular v16 (#1195)

Updates the docs to Angular v16 and resolves the build issues. Note that the Stackblitz template is currently locked down to `16.0.0-next.4`, because the latest APF changes break when forked to Stackblitz.

Author: crisbeto

.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=

@@ -1,6 +1,6 @@
 # Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=-1306950124
-pnpm-lock.yaml=-499422130
-yarn.lock=2045546914
-package.json=-1343479525
+pnpm-lock.yaml=499870188
+yarn.lock=-1740706684
+package.json=-1344673372

.gitignore

@@ -22,6 +22,7 @@ speed-measure-plugin*.json
 .project
 .classpath
 .c9/
+.vscode/
 *.launch
 .settings/
 *.sublime-workspace

package.json

@@ -30,47 +30,47 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.1.1",
-    "@angular/cdk": "^15.1.1",
-    "@angular/cdk-experimental": "^15.1.1",
-    "@angular/common": "^15.1.1",
-    "@angular/compiler": "^15.1.1",
+    "@angular/animations": "^16.0.0-next.5",
+    "@angular/cdk": "^16.0.0-next.4",
+    "@angular/cdk-experimental": "^16.0.0-next.4",
+    "@angular/common": "^16.0.0-next.5",
+    "@angular/compiler": "^16.0.0-next.5",
     "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#5f06e33d3aab6a59b1f588cbdf5425dbfdf71663",
-    "@angular/core": "^15.1.1",
-    "@angular/forms": "^15.1.1",
-    "@angular/google-maps": "^15.1.1",
-    "@angular/localize": "^15.1.1",
-    "@angular/material": "^15.1.1",
-    "@angular/material-experimental": "^15.1.1",
-    "@angular/material-moment-adapter": "^15.1.1",
-    "@angular/platform-browser": "^15.1.1",
-    "@angular/platform-browser-dynamic": "^15.1.1",
-    "@angular/router": "^15.1.1",
-    "@angular/youtube-player": "^15.1.1",
+    "@angular/core": "^16.0.0-next.5",
+    "@angular/forms": "^16.0.0-next.5",
+    "@angular/google-maps": "^16.0.0-next.4",
+    "@angular/localize": "^16.0.0-next.5",
+    "@angular/material": "^16.0.0-next.4",
+    "@angular/material-experimental": "^16.0.0-next.4",
+    "@angular/material-moment-adapter": "^16.0.0-next.4",
+    "@angular/platform-browser": "^16.0.0-next.5",
+    "@angular/platform-browser-dynamic": "^16.0.0-next.5",
+    "@angular/router": "^16.0.0-next.5",
+    "@angular/youtube-player": "^16.0.0-next.4",
     "@stackblitz/sdk": "^1.5.2",
     "moment": "^2.29.1",
     "path-normalize": "^6.0.7",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1501.2",
-    "@angular-devkit/architect-cli": "^0.1500.1",
-    "@angular-devkit/build-angular": "^15.1.2",
+    "@angular-devkit/architect": "^0.1600.0-next.6",
+    "@angular-devkit/architect-cli": "^0.1600.0-next.6",
+    "@angular-devkit/build-angular": "^16.0.0-next.6",
     "@angular-eslint/builder": "^14.0.0",
     "@angular-eslint/eslint-plugin": "^14.0.0",
     "@angular-eslint/eslint-plugin-template": "^14.0.0",
     "@angular-eslint/template-parser": "^14.0.0",
-    "@angular/cli": "^15.1.2",
-    "@angular/compiler-cli": "^15.1.1",
+    "@angular/cli": "^16.0.0-next.6",
+    "@angular/compiler-cli": "^16.0.0-next.5",
     "@bazel/bazelisk": "^1.12.1",
     "@types/imagemin": "^7.0.0",
     "@types/jasmine": "^3.7.7",
     "@types/node": "^16.11.7",
     "@types/shelljs": "~0.8.8",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
     "eslint": "^8.23.1",
     "eslint-plugin-ban": "^1.5.2",
     "eslint-plugin-import": "^2.22.1",
@@ -95,6 +95,6 @@
     "puppeteer": "~8.0.0",
     "shelljs": "^0.8.4",
     "ts-node": "^8.10.2",
-    "typescript": "~4.9.3"
+    "typescript": "~5.0.2"
   }
 }

pnpm-lock.yaml

@@ -1,13 +1,13 @@
 import {Injectable} from '@angular/core';
-import {CanActivate, ActivatedRouteSnapshot, Router} from '@angular/router';
+import {ActivatedRouteSnapshot, Router} from '@angular/router';
 import {SECTIONS} from '../../shared/documentation-items/documentation-items';
 
 /**
  * Guard to determine if the sidenav can load, based on whether the section exists in documentation
  * items.
  */
 @Injectable({providedIn: 'root'})
-export class CanActivateComponentSidenav implements CanActivate {
+export class CanActivateComponentSidenav  {
   constructor(private router: Router) {}
 
   canActivate(route: ActivatedRouteSnapshot) {

src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts

@@ -152,6 +152,10 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
     const scrollOffset = this.getScrollOffset();
     let hasChanged = false;
 
+    if (scrollOffset == null) {
+      return;
+    }
+
     for (let i = 0; i < this._links.length; i++) {
       // A link is considered active if the page is scrolled past the
       // anchor without also being scrolled passed the next link.

src/app/shared/table-of-contents/table-of-contents.ts

@@ -117,6 +117,5 @@
         }
       }
     }
-  },
-  "defaultProject": "example-app"
+  }
 }

src/assets/stack-blitz/angular.json

@@ -10,26 +10,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~15.0.0",
+    "@angular/animations": "16.0.0-next.4",
     "@angular/cdk": "${version}",
-    "@angular/common": "~15.0.0",
-    "@angular/compiler": "~15.0.0",
-    "@angular/core": "~15.0.0",
-    "@angular/forms": "~15.0.0",
+    "@angular/common": "16.0.0-next.4",
+    "@angular/compiler": "16.0.0-next.4",
+    "@angular/core": "16.0.0-next.4",
+    "@angular/forms": "16.0.0-next.4",
     "@angular/material": "${version}",
     "@angular/material-moment-adapter": "${version}",
-    "@angular/platform-browser": "~15.0.0",
-    "@angular/platform-browser-dynamic": "~15.0.0",
-    "@angular/router": "~15.0.0",
+    "@angular/platform-browser": "16.0.0-next.4",
+    "@angular/platform-browser-dynamic": "16.0.0-next.4",
+    "@angular/router": "16.0.0-next.4",
     "moment": "^2.18.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.5"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~15.0.0",
-    "@angular/cli": "~15.0.0",
-    "@angular/compiler-cli": "~15.0.0",
+    "@angular-devkit/build-angular": "16.0.0-next.4",
+    "@angular/cli": "16.0.0-next.4",
+    "@angular/compiler-cli": "16.0.0-next.4",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.10.0",
@@ -38,6 +38,6 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.8.2"
+    "typescript": "~5.0.3"
   }
 }