chore: Angular 16 support (#985)

* bump to Angular 16

* Entry components are phased out since Angular 16

* Remove entryComponents references from tests

* scaffold test-files for other angular versions

* point towards @boxmein's fork with Angular 16 support

* remove v15 test

* resolve some peer dependency errors

* ignore ajv

* revert to sample-app-angular@master

Author: boxmein

downstream_projects.json

@@ -2,7 +2,8 @@
   "packageDir": "./dist",
   "projects": {
     "sample-app-angular": "https://github.com/ui-router/sample-app-angular.git",
-    "angular15": "./test-angular-versions/v15",
-    "typescript48": "./test-typescript-versions/typescript4.8"
+    "typescript48": "./test-typescript-versions/typescript4.8",
+    "angular16": "./test-angular-versions/v16",
+    "typescript49": "./test-typescript-versions/typescript4.9"
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uirouter/angular",
   "description": "State-based routing for Angular",
-  "version": "11.1.0",
+  "version": "12.0.0",
   "scripts": {
     "clean": "shx rm -rf lib lib-esm _bundles _doc dist",
     "compile": "npm run clean && ngc",
@@ -43,39 +43,39 @@
   "license": "MIT",
   "distDir": "dist",
   "peerDependencies": {
-    "@angular/common": "^15.0.0",
-    "@angular/core": "^15.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/core": "^16.0.0",
     "@uirouter/core": "^6.0.8",
     "@uirouter/rx": "^1.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.0",
-    "@angular/animations": "^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/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular/animations": "^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/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
     "@types/jest": "^27.0.3",
     "@types/jquery": "^3.5.9",
     "@uirouter/core": "^6.0.8",
     "@uirouter/publish-scripts": "2.6.0",
     "@uirouter/rx": "^1.0.0",
     "husky": "^7.0.4",
-    "jest": "^28.0.0",
-    "jest-preset-angular": "^12.2.3",
-    "ng-packagr": "^15.0.0",
+    "jest": "^29.0.0",
+    "jest-preset-angular": "^13.0.0",
+    "ng-packagr": "^16.0.0",
     "postcss": "^8.0.0",
     "prettier": "^2.5.0",
     "pretty-quick": "^3.1.2",
-    "rxjs": "6.6.7",
+    "rxjs": "~7.8.0",
     "rxjs-compat": "^6.5.4",
     "schema-utils": "^4.0.0",
     "ts-node": "10.4.0",
     "tslint": "^6.1.0",
-    "typescript": "~4.8.4",
-    "zone.js": "0.11.4"
+    "typescript": "~4.9.5",
+    "zone.js": "0.13.0"
   },
   "jest": {
     "preset": "jest-preset-angular",

src/uiRouterNgModule.ts

@@ -69,16 +69,11 @@ export function locationStrategy(useHash) {
  *
  * State definitions found in the `states:` property are provided to the Dependency Injector.
  * This enables UI-Router to automatically register the states with the [[StateRegistry]] at bootstrap (and during lazy load).
- *
- * ### Entry Components
- *
- * Any routed components are added as `entryComponents:` so they will get compiled.
  */
 @NgModule({
   imports: [CommonModule],
   declarations: [_UIROUTER_DIRECTIVES],
   exports: [_UIROUTER_DIRECTIVES],
-  entryComponents: [UIView],
 })
 export class UIRouterModule {
   /**
@@ -218,7 +213,6 @@ export interface StatesModule {
    * The module's UI-Router states
    *
    * This list of [[Ng2StateDeclaration]] objects will be registered with the [[StateRegistry]].
-   * Also, the components that the states route to will be added to `entryComponents` so they will be compiled.
    */
   states?: Ng2StateDeclaration[];
 

test-angular-versions/v15/README.md renamed to test-angular-versions/v16/README.md

@@ -1,6 +1,6 @@
-# V15
+# V16
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.2.
 
 ## Development server
 

test-angular-versions/v15/angular.json renamed to test-angular-versions/v16/angular.json

@@ -6,7 +6,7 @@
   },
   "newProjectRoot": "projects",
   "projects": {
-    "v15": {
+    "v16": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:class": {
@@ -41,7 +41,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/v15",
+            "outputPath": "dist/v16",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": [
@@ -88,18 +88,18 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "v15:build:production"
+              "browserTarget": "v16:build:production"
             },
             "development": {
-              "browserTarget": "v15:build:development"
+              "browserTarget": "v16:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "v15:build"
+            "browserTarget": "v16:build"
           }
         },
         "test": {

test-angular-versions/v15/cypress.config.ts renamed to test-angular-versions/v16/cypress.config.ts

@@ -1,43 +1,43 @@
 {
-  "name": "15",
+  "name": "16",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "npm run test:dev && npm run test:prod",
-    "test:dev": "ng build --configuration development && cypress-runner run --path dist/v15",
-    "test:prod": "ng build  --configuration production && cypress-runner run --path dist/v15"
+    "test:dev": "ng build --configuration development && cypress-runner run --path dist/v16",
+    "test:prod": "ng build  --configuration production && cypress-runner run --path dist/v16"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/router": "^15.0.0",
-    "rxjs": "~7.5.0",
+    "@angular/animations": "^16.1.0",
+    "@angular/common": "^16.1.0",
+    "@angular/compiler": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "@angular/forms": "^16.1.0",
+    "@angular/platform-browser": "^16.1.0",
+    "@angular/platform-browser-dynamic": "^16.1.0",
+    "@angular/router": "^16.1.0",
+    "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.12.0",
+    "zone.js": "~0.13.0",
     "@uirouter/angular": "*",
     "@uirouter/cypress-runner": "*"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.4",
-    "@angular/cli": "~15.0.4",
-    "@angular/compiler-cli": "^15.0.0",
+    "@angular-devkit/build-angular": "^16.1.2",
+    "@angular/cli": "~16.1.2",
+    "@angular/compiler-cli": "^16.1.0",
     "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.5.0",
+    "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "~4.8.2"
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~4.9.5"
   },
   "checkPeerDependencies": {
     "ignore": [

test-angular-versions/v15/cypress/e2e/sample_app.cy.js renamed to test-angular-versions/v16/cypress/e2e/sample_app.cy.js

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>V15</title>
+  <title>V16</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

test-angular-versions/v15/package.json renamed to test-angular-versions/v16/package.json

@@ -0,0 +1,2 @@
+import { UIRouter } from '@uirouter/angular';
+console.log(UIRouter); // tslint:disable-line:no-console

test-angular-versions/v15/src/app/about.component.ts renamed to test-angular-versions/v16/src/app/about.component.ts

@@ -0,0 +1,18 @@
+{
+  "name": "@uirouter/angular-test-typescript4.9",
+  "version": "1.0.0",
+  "description": "Test against Typescript 4.9",
+  "scripts": {
+    "test": "tsc"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/common": "^12",
+    "@angular/core": "^12",
+    "@uirouter/angular": "latest",
+    "rxjs": "^6.0.0",
+    "typescript": "4.9"
+  },
+  "devDependencies": {}
+}

test-angular-versions/v15/src/app/app.component.css renamed to test-angular-versions/v16/src/app/app.component.css

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "module": "commonjs",
+    "lib": ["es6", "dom"],
+    "noImplicitAny": true,
+    "noEmit": true,
+    "target": "es5",
+    "typeRoots": ["node_modules/@types"]
+  },
+  "files": ["index.ts"]
+}

test-angular-versions/v15/src/app/app.component.html renamed to test-angular-versions/v16/src/app/app.component.html

@@ -31,6 +31,5 @@ export function config(router: UIRouter, injector: Injector, module: StatesModul
 @NgModule({
   imports: [UIRouterModule.forChild({ config })],
   declarations: [Component1, Component2],
-  entryComponents: [Component1, Component2],
 })
 export class AugmentModule {}