build: update to Angular 15 (#1170)

Updates to Angular 15 and TS 4.8.

Author: crisbeto

package.json

@@ -34,45 +34,45 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.0.0",
-    "@angular/cdk": "^14.0.0",
-    "@angular/cdk-experimental": "^14.0.0",
-    "@angular/common": "^14.0.0",
-    "@angular/compiler": "^14.0.0",
-    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#9bd54cb435a675b1880f4026a64eb9f1677e7087",
-    "@angular/core": "^14.0.0",
-    "@angular/forms": "^14.0.0",
-    "@angular/google-maps": "^14.0.0",
-    "@angular/localize": "^14.0.0",
-    "@angular/material": "^14.0.0",
-    "@angular/material-experimental": "^14.0.0",
-    "@angular/material-moment-adapter": "^14.0.0",
-    "@angular/platform-browser": "14.0.0",
-    "@angular/platform-browser-dynamic": "14.0.0",
-    "@angular/router": "14.0.0",
-    "@angular/youtube-player": "^14.0.0",
+    "@angular/animations": "^15.0.0-next.0",
+    "@angular/cdk": "^15.0.0-next.0",
+    "@angular/cdk-experimental": "^15.0.0-next.0",
+    "@angular/common": "^15.0.0-next.0",
+    "@angular/compiler": "^15.0.0-next.0",
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#e4dc811b9dd3ece98df7ce2cfd687e4db5f60329",
+    "@angular/core": "^15.0.0-next.0",
+    "@angular/forms": "^15.0.0-next.0",
+    "@angular/google-maps": "^15.0.0-next.0",
+    "@angular/localize": "^15.0.0-next.0",
+    "@angular/material": "^15.0.0-next.0",
+    "@angular/material-experimental": "^15.0.0-next.0",
+    "@angular/material-moment-adapter": "^15.0.0-next.0",
+    "@angular/platform-browser": "^15.0.0-next.0",
+    "@angular/platform-browser-dynamic": "^15.0.0-next.0",
+    "@angular/router": "^15.0.0-next.0",
+    "@angular/youtube-player": "^15.0.0-next.0",
     "@stackblitz/sdk": "^1.5.2",
-    "material-components-web": "15.0.0-canary.10196647d.0",
+    "material-components-web": "15.0.0-canary.c363f267b.0",
     "moment": "^2.29.1",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.0",
-    "@angular-eslint/builder": "^13.1.0",
-    "@angular-eslint/eslint-plugin": "^13.1.0",
-    "@angular-eslint/eslint-plugin-template": "^13.1.0",
-    "@angular-eslint/template-parser": "^13.1.0",
-    "@angular/cli": "^14.0.0",
-    "@angular/compiler-cli": "^14.0.0",
+    "@angular-devkit/build-angular": "^15.0.0-next.0",
+    "@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.0.0-next.0",
+    "@angular/compiler-cli": "^15.0.0-next.0",
     "@types/imagemin": "^7.0.0",
     "@types/jasmine": "^3.7.7",
     "@types/node": "^14.14.22",
     "@types/shelljs": "~0.8.8",
-    "@typescript-eslint/eslint-plugin": "5.2.0",
-    "@typescript-eslint/parser": "5.2.0",
-    "eslint": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "eslint": "^8.23.1",
     "eslint-plugin-ban": "^1.5.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsdoc": "^32.3.0",
@@ -96,6 +96,6 @@
     "puppeteer": "~8.0.0",
     "shelljs": "^0.8.4",
     "ts-node": "^8.10.2",
-    "typescript": "~4.7.2"
+    "typescript": "~4.8.2"
   }
 }

src/app/pages/component-viewer/component-viewer.ts

@@ -12,7 +12,7 @@ import {
   ViewChildren,
   ViewEncapsulation,
 } from '@angular/core';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
 import {ActivatedRoute, Params, Router, RouterModule} from '@angular/router';
 import {combineLatest, Observable, ReplaySubject, Subject} from 'rxjs';
 import {map, skip, takeUntil} from 'rxjs/operators';
@@ -193,7 +193,7 @@ export class ComponentExamples extends ComponentBaseView {
 
 @NgModule({
   imports: [
-    MatTabsModule,
+    MatLegacyTabsModule,
     RouterModule,
     DocViewerModule,
     CommonModule,

src/app/shared/doc-viewer/doc-viewer.spec.ts

@@ -153,6 +153,7 @@ class DocViewerTestComponent {
 }
 
 const FAKE_DOCS: {[key: string]: string} = {
+  /* eslint-disable @typescript-eslint/naming-convention */
   'http://material.angular.io/simple-doc.html': '<div>my docs page</div>',
   'http://material.angular.io/doc-with-example.html': `
       <div>Check out this example:</div>
@@ -166,4 +167,5 @@ const FAKE_DOCS: {[key: string]: string} = {
     '<div material-docs-example="demo-example"></div>',
   'http://material.angular.io/whole-snippet-example.html':
     '<div material-docs-example="whole-snippet-example" file="whole-snippet-example.ts"></div>',
+  /* eslint-enable @typescript-eslint/naming-convention */
 };

src/app/shared/stack-blitz/stack-blitz-writer.spec.ts

@@ -8,9 +8,11 @@ const testExampleId = 'my-test-example-id';
 const testExampleBasePath = `/docs-content/examples-source/cdk/my-comp/${testExampleId}`;
 
 const FAKE_DOCS: {[key: string]: string} = {
+  /* eslint-disable @typescript-eslint/naming-convention */
   '/assets/stack-blitz/src/index.html': '<material-docs-example></material-docs-example>',
   '/assets/stack-blitz/src/app/app.module.ts':
       `import {MaterialDocsExample} from './material-docs-example';`,
+  /* eslint-enable @typescript-eslint/naming-convention */
   [`${testExampleBasePath}/test.ts`]: 'ExampleComponent',
   [`${testExampleBasePath}/test.html`]: `<example></example>`,
   [`${testExampleBasePath}/src/detail.ts`]: 'DetailComponent',
@@ -108,6 +110,7 @@ describe('StackBlitzWriter', () => {
     flushMicrotasks();
 
     const expectedFiles = jasmine.objectContaining({
+      /* eslint-disable @typescript-eslint/naming-convention */
       'angular.json': 'fake',
       'src/main.ts': 'fake',
       'src/test.ts': 'fake',
@@ -118,6 +121,7 @@ describe('StackBlitzWriter', () => {
 /**  Copyright ${new Date().getFullYear()} Google LLC. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at https://angular.io/license */`,
+      /* eslint-enable @typescript-eslint/naming-convention */
     });
 
     expect(openProjectSpy).toHaveBeenCalledTimes(1);