feat: upgrade to Angular 16

- upgrade dependencies versions
- remove a re-generate yarn.lock
- fix formatting due to prettier upgrade
- fix deprecations in schematics
- remove usage of getFileContent (which doesn't exist anymore) in schematics spec
- revert @types/node dependency to 16.x (because the 17 version, which I guess is unstable caused a typing error)
- upgrade eslint version, and Ecmascript version of generated JS files
- fix compilation error caused by TypeScript upgrade in api-doc generation
- add missing formatter property in ResultTemplateContext (the formatter was passed but not declared, and it now fails with a compilation error)
- fix deprecation in ssr-app module

demo/src/app/components/datepicker/overview/demo/datepicker-overview-demo.component.ts

@@ -18,9 +18,9 @@ import { DatePipe } from '@angular/common';
 			<h5>Vacations</h5>
 			<p>
 				from
-				<b>{{ adapter.toModel(fromDate) | date: 'mediumDate' }}</b>
+				<b>{{ adapter.toModel(fromDate) | date : 'mediumDate' }}</b>
 				to
-				<b>{{ adapter.toModel(toDate ? toDate : hoveredDate) | date: 'mediumDate' }}</b>
+				<b>{{ adapter.toModel(toDate ? toDate : hoveredDate) | date : 'mediumDate' }}</b>
 			</p>
 		</div>
 

misc/api-doc.ts

@@ -376,7 +376,7 @@ class APIDocVisitor {
 	visitProperty(property: PropertyDeclaration | PropertySignature) {
 		return {
 			...this.visitNamedDeclaration(property),
-			defaultValue: property.initializer?.getText(),
+			defaultValue: isPropertyDeclaration(property) ? property.initializer?.getText() : undefined,
 		};
 	}
 

misc/eslintrc-after-build.js

@@ -19,7 +19,7 @@
 module.exports = {
 	root: true,
 	parserOptions: {
-		ecmaVersion: 2020,
+		ecmaVersion: 2022,
 		sourceType: 'module',
 	},
 	plugins: ['deprecation'],

package.json

@@ -67,54 +67,54 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^15.0.0-beta.0",
-    "@angular-devkit/build-angular": "^15.0.0",
-    "@angular-devkit/core": "^15.0.0",
-    "@angular-devkit/schematics": "^15.0.0",
-    "@angular-eslint/builder": "15.0.0",
-    "@angular-eslint/eslint-plugin": "15.0.0",
-    "@angular-eslint/eslint-plugin-template": "15.0.0",
-    "@angular-eslint/schematics": "15.0.0",
-    "@angular-eslint/template-parser": "15.0.0",
-    "@angular/animations": "^15.0.0",
-    "@angular/cli": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/compiler-cli": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/localize": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/platform-server": "^15.0.0",
-    "@angular/router": "^15.0.0",
+    "@angular-builders/custom-webpack": "^16.0.0-beta.0",
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular-devkit/core": "^16.0.0",
+    "@angular-devkit/schematics": "^16.0.0",
+    "@angular-eslint/builder": "16.0.1",
+    "@angular-eslint/eslint-plugin": "16.0.1",
+    "@angular-eslint/eslint-plugin-template": "16.0.1",
+    "@angular-eslint/schematics": "16.0.1",
+    "@angular-eslint/template-parser": "16.0.1",
+    "@angular/animations": "^16.0.0",
+    "@angular/cli": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/compiler-cli": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/localize": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/platform-server": "^16.0.0",
+    "@angular/router": "^16.0.0",
     "@commitlint/cli": "12.1.4",
     "@commitlint/config-angular": "12.1.4",
-    "@nguniversal/express-engine": "^15.0.0",
+    "@nguniversal/express-engine": "^16.0.0",
     "@playwright/test": "^1.32.1",
     "@popperjs/core": "2.11.6",
     "@rollup/plugin-replace": "^3.1.0",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@schematics/angular": "^15.0.0",
+    "@schematics/angular": "^16.0.0",
     "@types/express": "^4.16.1",
     "@types/fs-extra": "^9.0.3",
     "@types/glob": "^7.1.1",
     "@types/he": "^1.1.0",
     "@types/jasmine": "~4.0.3",
     "@types/marked": "^1.1.0",
-    "@types/node": "^17.0.21",
+    "@types/node": "^16.18.26",
     "@types/prismjs": "1.16.2",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "bootstrap": "5.2.3",
     "bootstrap-icons": "1.9.1",
     "conventional-changelog-cli": "^2.0.12",
     "coverage-istanbul-loader": "^3.0.3",
     "cross-spawn": "^7.0.1",
     "ejs": "3.1.5",
-    "eslint": "^8.17.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-deprecation": "^1.3.2",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-deprecation": "^1.4.1",
     "eslint-plugin-jasmine": "^4.1.3",
     "eslint-plugin-unused-imports": "^2.0.0",
     "express": "^4.16.4",
@@ -134,7 +134,7 @@
     "karma-safari-launcher": "^1.0.0",
     "karma-sauce-launcher": "^4.3.6",
     "marked": "^1.2.3",
-    "ng-packagr": "^15.0.0",
+    "ng-packagr": "^16.0.0",
     "nyc": "14.1.1",
     "prettier": "^2.7.1",
     "pretty-quick": "^3.1.3",
@@ -143,12 +143,12 @@
     "rollup": "^2.67.2",
     "rxjs": "~7.5.5",
     "ts-loader": "^9.3.0",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "ts-node-dev": "^2.0.0",
-    "typescript": "~4.8.4",
+    "typescript": "~5.0.4",
     "wait-on": "^5.2.0",
     "webpack": "^5.74.0",
     "yargs": "^16.2.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.0"
   }
 }

schematics/ng-add/index.spec.ts

@@ -1,6 +1,5 @@
 import { Tree } from '@angular-devkit/schematics';
 import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
-import { getFileContent } from '@schematics/angular/utility/test/get-file-content';
 
 import { createTestApp } from '../utils/testing';
 import * as messages from './messages';
@@ -15,8 +14,8 @@ describe(`ng add '@ng-bootstrap/ng-bootstrap'`, () => {
 	});
 
 	it(`should add missing dependencies to 'package.json'`, async () => {
-		const tree = await runner.runSchematicAsync('ng-add', {}, appTree).toPromise();
-		const { dependencies, devDependencies } = JSON.parse(getFileContent(tree, '/package.json'));
+		const tree = await runner.runSchematic('ng-add', {}, appTree);
+		const { dependencies, devDependencies } = JSON.parse(tree.get('/package.json')!.content.toString());
 
 		expect(dependencies['bootstrap']).withContext('bootstrap should be installed').toBeDefined();
 		expect(dependencies['@angular/localize'] || devDependencies['@angular/localize'])
@@ -28,7 +27,7 @@ describe(`ng add '@ng-bootstrap/ng-bootstrap'`, () => {
 	it(`should report when specified 'project' is not found`, async () => {
 		let message = '';
 		try {
-			await runner.runSchematicAsync('ng-add', { project: 'test' }, appTree).toPromise();
+			await runner.runSchematic('ng-add', { project: 'test' }, appTree);
 		} catch (e) {
 			message = (e as Error).message;
 		} finally {

schematics/ng-add/setup-project.spec.ts

@@ -16,7 +16,7 @@ import { createTestApp } from '../utils/testing';
 			// 'app' is the default application, so we're not passing '--project' option
 			const options: Schema = { project: projectName };
 			let tree = await createTestApp(runner, appOptions);
-			tree = await runner.runSchematicAsync('ng-add-setup-project', options, tree).toPromise();
+			tree = await runner.runSchematic('ng-add-setup-project', options, tree);
 			const workspace = await readWorkspace(tree);
 			const project = workspace.projects.get(projectName)!;
 			return { tree, project };
@@ -30,14 +30,12 @@ import { createTestApp } from '../utils/testing';
 
 		it(`should add '@angular/localize' polyfill`, async () => {
 			let tree = await createTestApp(runner);
-			const tsconfigFilePath = `tsconfig.json`;
+			const tsconfigAppFilePath = `projects/${projectName}/tsconfig.app.json`;
 
-			expect(tree.read(tsconfigFilePath)!.toString()).not.toContain('@angular/localize');
+			expect(tree.read(tsconfigAppFilePath)!.toString()).not.toContain('@angular/localize');
 
-			tree = await runner
-				.runSchematicAsync('ng-add-setup-project', projectName ? { project: projectName } : {}, tree)
-				.toPromise();
-			expect(tree.read(tsconfigFilePath)!.toString()).toContain('@angular/localize');
+			tree = await runner.runSchematic('ng-add-setup-project', projectName ? { project: projectName } : {}, tree);
+			expect(tree.read(tsconfigAppFilePath)!.toString()).toContain('@angular/localize');
 		});
 
 		it(`should add 'bootstrap.min.css' to 'angular.json' by default`, async () => {

schematics/utils/testing.ts

@@ -1,25 +1,19 @@
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 
 function createWorkspace(runner: SchematicTestRunner): Promise<UnitTestTree> {
-	return runner
-		.runExternalSchematicAsync('@schematics/angular', 'workspace', {
-			name: 'workspace',
-			version: '13.0.0',
-			newProjectRoot: 'projects',
-		})
-		.toPromise();
+	return runner.runExternalSchematic('@schematics/angular', 'workspace', {
+		name: 'workspace',
+		version: '16.0.0',
+		newProjectRoot: 'projects',
+	});
 }
 
 /**
  * Creates a sample workspace with two applications: 'app' (default) and 'second-app'
  */
 export async function createTestApp(runner: SchematicTestRunner, appOptions = {}): Promise<UnitTestTree> {
 	let tree = await createWorkspace(runner);
-	tree = await runner
-		.runExternalSchematicAsync('@schematics/angular', 'application', { name: 'app', ...appOptions }, tree)
-		.toPromise();
+	tree = await runner.runExternalSchematic('@schematics/angular', 'application', { name: 'app', ...appOptions }, tree);
 
-	return runner
-		.runExternalSchematicAsync('@schematics/angular', 'application', { name: 'second-app', ...appOptions }, tree)
-		.toPromise();
+	return runner.runExternalSchematic('@schematics/angular', 'application', { name: 'second-app', ...appOptions }, tree);
 }

src/package.json

@@ -40,10 +40,10 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/localize": "^15.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/localize": "^16.0.0",
     "@popperjs/core": "^2.11.6",
     "rxjs": "^6.5.3 || ^7.4.0"
   },

src/typeahead/typeahead-window.ts

@@ -17,6 +17,11 @@ export interface ResultTemplateContext {
 	 * Search term from the `<input>` used to get current result.
 	 */
 	term: string;
+
+	/**
+	 * The function which transforms the result into a string
+	 */
+	formatter: (result: any) => string;
 }
 
 @Component({

ssr-app/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { APP_ID, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -40,7 +40,8 @@ import { TypeaheadComponent } from './components/typeahead.component';
 		TooltipComponent,
 		TypeaheadComponent,
 	],
-	imports: [BrowserModule.withServerTransition({ appId: 'serverApp' }), FormsModule, NgbModule],
+	providers: [{ provide: APP_ID, useValue: 'serverApp' }],
+	imports: [BrowserModule, FormsModule, NgbModule],
 	bootstrap: [AppComponent],
 })
 export class AppModule {}