feat: update to Angular 15

.github/workflows/ci.yml

@@ -26,7 +26,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: install
-        run: npm install
+        run: npm install --legacy-peer-deps
       - name: build
         run: npm run build -- --skip-nx-cache
       - name: test

apps/example-app-karma/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "example-app-karma",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/example-app-karma/src",

apps/example-app-karma/src/test.ts

@@ -9,11 +9,5 @@ beforeEach(() => {
   jasmine.addMatchers(JasmineDOM);
 });
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {});
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

apps/example-app-karma/tsconfig.app.json

@@ -3,7 +3,9 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "types": [],
-    "allowJs": true
+    "allowJs": true,
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],

apps/example-app-karma/tsconfig.spec.json

@@ -2,7 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine", "node", "@testing-library/jasmine-dom"]
+    "types": ["jasmine", "node", "@testing-library/jasmine-dom"],
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/test.ts", "src/polyfills.ts"],
   "include": ["**/*.spec.ts", "**/*.d.ts"]

apps/example-app/project.json

@@ -1,4 +1,5 @@
 {
+  "name": "example-app",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "sourceRoot": "apps/example-app/src",
@@ -75,7 +76,7 @@
       "options": {
         "jestConfig": "apps/example-app/jest.config.ts"
       },
-      "outputs": ["coverage/"]
+      "outputs": ["{workspaceRoot}/coverage/"]
     }
   },
   "tags": []

apps/example-app/src/app/app-routing.module.ts

@@ -95,7 +95,7 @@ export const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
+  imports: [RouterModule.forRoot(routes, {})],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

apps/example-app/src/app/app.module.ts

@@ -7,7 +7,7 @@ import { StoreModule } from '@ngrx/store';
 import { AppRoutingModule } from './app-routing.module';
 import { MaterialModule } from './material.module';
 import { MatIconModule } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
+import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 

apps/example-app/src/app/material.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 

apps/example-app/tsconfig.app.json

@@ -4,7 +4,8 @@
     "outDir": "../../dist/out-tsc",
     "types": [],
     "allowJs": true,
-    "target": "ES2020"
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "files": ["src/main.ts", "src/polyfills.ts"],
   "include": ["src/**/*.d.ts"],

nx.json

@@ -15,13 +15,6 @@
       "environment": "all"
     }
   },
-  "implicitDependencies": {
-    "package.json": {
-      "dependencies": "*",
-      "devDependencies": "*"
-    },
-    ".eslintrc.json": "*"
-  },
   "tasksRunnerOptions": {
     "default": {
       "runner": "@nrwl/nx-cloud",
@@ -75,7 +68,27 @@
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "targetDefaults": {
     "build": {
-      "dependsOn": ["^build"]
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
+    },
+    "test": {
+      "inputs": ["default", "^production"]
+    },
+    "lint": {
+      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
     }
+  },
+  "namedInputs": {
+    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "sharedGlobals": [],
+    "production": [
+      "default",
+      "!{projectRoot}/**/*.spec.[jt]s",
+      "!{projectRoot}/tsconfig.spec.json",
+      "!{projectRoot}/karma.conf.js",
+      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
+      "!{projectRoot}/jest.config.[jt]s",
+      "!{projectRoot}/.eslintrc.json"
+    ]
   }
 }

package.json

@@ -28,51 +28,51 @@
     "prepare": "git config core.hookspath .githooks"
   },
   "dependencies": {
-    "@angular/animations": "14.1.3",
-    "@angular/cdk": "14.1.3",
-    "@angular/common": "14.1.3",
-    "@angular/compiler": "14.1.3",
-    "@angular/core": "14.1.3",
-    "@angular/material": "14.1.3",
-    "@angular/platform-browser": "14.1.3",
-    "@angular/platform-browser-dynamic": "14.1.3",
-    "@angular/router": "14.1.3",
+    "@angular/animations": "15.0.0",
+    "@angular/cdk": "15.0.0",
+    "@angular/common": "15.0.0",
+    "@angular/compiler": "15.0.0",
+    "@angular/core": "15.0.0",
+    "@angular/material": "15.0.0",
+    "@angular/platform-browser": "15.0.0",
+    "@angular/platform-browser-dynamic": "15.0.0",
+    "@angular/router": "15.0.0",
     "@ngrx/store": "14.0.2",
-    "@nrwl/angular": "14.5.8",
-    "@nrwl/nx-cloud": "14.4.1",
+    "@nrwl/angular": "15.2.1",
+    "@nrwl/nx-cloud": "15.0.2",
     "@testing-library/dom": "^8.11.1",
     "rxjs": "7.5.6",
     "tslib": "~2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "14.1.3",
+    "@angular-devkit/build-angular": "15.0.0",
     "@angular-eslint/builder": "14.0.2",
-    "@angular-eslint/eslint-plugin": "14.0.2",
-    "@angular-eslint/eslint-plugin-template": "14.0.2",
+    "@angular-eslint/eslint-plugin": "14.0.4",
+    "@angular-eslint/eslint-plugin-template": "14.0.4",
     "@angular-eslint/schematics": "14.0.2",
-    "@angular-eslint/template-parser": "14.0.2",
-    "@angular/cli": "~14.1.0",
-    "@angular/compiler-cli": "14.1.3",
-    "@angular/forms": "14.1.3",
-    "@angular/language-service": "14.1.3",
-    "@nrwl/cli": "14.5.8",
-    "@nrwl/eslint-plugin-nx": "14.5.8",
-    "@nrwl/jest": "14.5.8",
-    "@nrwl/linter": "14.5.8",
-    "@nrwl/node": "14.5.8",
-    "@nrwl/nx-plugin": "14.5.8",
-    "@nrwl/workspace": "14.5.8",
+    "@angular-eslint/template-parser": "14.0.4",
+    "@angular/cli": "~15.0.0",
+    "@angular/compiler-cli": "15.0.0",
+    "@angular/forms": "15.0.0",
+    "@angular/language-service": "15.0.0",
+    "@nrwl/cli": "15.2.1",
+    "@nrwl/eslint-plugin-nx": "15.2.1",
+    "@nrwl/jest": "15.2.1",
+    "@nrwl/linter": "15.2.1",
+    "@nrwl/node": "15.2.1",
+    "@nrwl/nx-plugin": "15.2.1",
+    "@nrwl/workspace": "15.2.1",
     "@swc-node/register": "^1.4.2",
     "@swc/core": "^1.2.173",
     "@testing-library/jasmine-dom": "^1.2.0",
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/jasmine": "4.0.3",
-    "@types/jest": "28.1.7",
+    "@types/jest": "28.1.8",
     "@types/node": "18.7.1",
-    "@typescript-eslint/eslint-plugin": "5.29.0",
-    "@typescript-eslint/parser": "5.29.0",
+    "@typescript-eslint/eslint-plugin": "5.36.1",
+    "@typescript-eslint/parser": "5.36.1",
     "cpy-cli": "^3.1.1",
     "eslint": "8.15.0",
     "eslint-config-prettier": "8.3.0",
@@ -84,15 +84,15 @@
     "jasmine-core": "4.2.0",
     "jasmine-spec-reporter": "7.0.0",
     "jest": "28.1.3",
-    "jest-environment-jsdom": "^28.1.1",
-    "jest-preset-angular": "12.1.0",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-preset-angular": "12.2.2",
     "karma": "6.4.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
     "lint-staged": "^12.1.6",
-    "ng-packagr": "14.1.0",
-    "nx": "14.5.8",
+    "ng-packagr": "15.0.0",
+    "nx": "15.2.1",
     "postcss": "^8.4.5",
     "postcss-import": "14.1.0",
     "postcss-preset-env": "7.5.0",
@@ -102,6 +102,6 @@
     "semantic-release": "^18.0.0",
     "ts-jest": "28.0.8",
     "ts-node": "10.9.1",
-    "typescript": "4.7.4"
+    "typescript": "4.8.4"
   }
 }

projects/testing-library/project.json

@@ -1,12 +1,13 @@
 {
+  "name": "testing-library",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "sourceRoot": "projects/testing-library/src",
   "prefix": "lib",
   "targets": {
     "build-package": {
       "executor": "@nrwl/angular:package",
-      "outputs": ["dist/@testing-library/angular"],
+      "outputs": ["{workspaceRoot}/dist/@testing-library/angular"],
       "options": {
         "project": "projects/testing-library/ng-package.json"
       },
@@ -28,7 +29,7 @@
       "outputs": ["{options.outputFile}"]
     },
     "build": {
-      "executor": "@nrwl/workspace:run-commands",
+      "executor": "nx:run-commands",
       "options": {
         "parallel": false,
         "commands": [
@@ -49,7 +50,7 @@
       "options": {
         "jestConfig": "projects/testing-library/jest.config.ts"
       },
-      "outputs": ["coverage/projects/testing-library"]
+      "outputs": ["{workspaceRoot}/coverage/projects/testing-library"]
     }
   },
   "tags": []

projects/testing-library/src/lib/testing-library.ts

@@ -107,7 +107,7 @@ export async function render<SutType, WrapperType = SutType>(
   };
 
   const change = (changedProperties: Partial<SutType>) => {
-    const changes = getChangesObj(fixture.componentInstance, changedProperties);
+    const changes = getChangesObj(fixture.componentInstance as Record<string, any>, changedProperties);
 
     setComponentProperties(fixture, { componentProperties: changedProperties });
 
@@ -288,17 +288,14 @@ function hasOnChangesHook<SutType>(componentInstance: SutType): componentInstanc
   );
 }
 
-function getChangesObj<SutType extends Record<string, any>>(
-  oldProps: Partial<SutType> | null,
-  newProps: Partial<SutType>,
-) {
+function getChangesObj(oldProps: Record<string, any> | null, newProps: Record<string, any>) {
   const isFirstChange = oldProps === null;
   return Object.keys(newProps).reduce<SimpleChanges>(
     (changes, key) => ({
       ...changes,
       [key]: new SimpleChange(isFirstChange ? null : oldProps[key], newProps[key], isFirstChange),
     }),
-    {} as SutType,
+    {} as Record<string, any>,
   );
 }
 

projects/testing-library/tests/render-template.spec.ts

@@ -135,7 +135,7 @@ describe('removeAngularAttributes', () => {
 });
 
 test('updates properties and invokes change detection', async () => {
-  const view = await render('<div [update]="value" ></div>', {
+  const view = await render<{ value: string }>('<div [update]="value" ></div>', {
     declarations: [UpdateInputDirective],
     componentProperties: {
       value: 'value1',

projects/testing-library/tsconfig.lib.json

@@ -5,7 +5,9 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "types": ["node", "jest"]
+    "types": ["node", "jest"],
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
   "include": ["**/*.ts"]

projects/testing-library/tsconfig.lib.prod.json

@@ -1,7 +1,9 @@
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
-    "declarationMap": false
+    "declarationMap": false,
+    "target": "ES2022",
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "compilationMode": "partial"