Upgrade to angular 16

.eslintrc.json

@@ -0,0 +1,51 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "prefix": "lib",
+            "style": "kebab-case",
+            "type": "element"
+          }
+        ],
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "prefix": "lib",
+            "style": "camelCase",
+            "type": "attribute"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

.gitignore

@@ -32,6 +32,7 @@ speed-measure-plugin*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

README.md

@@ -10,7 +10,7 @@
 ## BREAKING CHANGES SINCE VERSION 3.0.1
 If you are migrating from `@frontegg/angular` version 2 or earlier, you can find a [migration guide here](https://docs.frontegg.com/docs/migration-guide-fronteggangular-v2-v3)
 
-### 1. Install Frontegg Libraries 
+### 1. Install Frontegg Libraries
 
 Run the following command to Install Frontegg Angular library:
 
@@ -92,7 +92,7 @@ export class AppComponent implements OnDestroy {
 </div>
 ```
 
-### 3. Getting the user context 
+### 3. Getting the user context
 
 Frontegg exposes the user context and the authentication state via a `FronteggAppService`. You can access the whole authentication state via the `FronteggAppService`. To have an access to memoized
 authentication substates like user state, SSO state, MFA state, etc. use `FronteggAuthService` as in the following
@@ -115,9 +115,9 @@ export class AppComponent implements OnInit, OnDestroy {
   user?: any;
 
   constructor(
-    private fronteggAuthService: FronteggAuthService, 
+    private fronteggAuthService: FronteggAuthService,
     private fronteggAppService: FronteggAppService) {
-  	this.loadingSubscription = 
+  	this.loadingSubscription =
       fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
   }
 
@@ -145,7 +145,7 @@ Update `app.component.html` to display the user's name and avatar:
 
 ```
 
-### 4. Add FronteggAuthGuard to your routing module 
+### 4. Add FronteggAuthGuard to your routing module
 
 Use the `FronteggAuthGuard` to redirect the user to the login page if the user not authenticated and trying to reach a private route.
 

angular.json

@@ -43,7 +43,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -97,19 +96,6 @@
             "scripts": []
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/example/tsconfig.app.json",
-              "projects/example/tsconfig.spec.json",
-              "projects/example/e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -121,6 +107,15 @@
               "devServerTarget": "example:serve:production"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/example/**/*.ts",
+              "projects/example/**/*.html"
+            ]
+          }
         }
       }
     },
@@ -151,19 +146,21 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "projects/frontegg-app/tsconfig.lib.json",
-              "projects/frontegg-app/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "projects/frontegg-app/**/*.ts",
+              "projects/frontegg-app/**/*.html"
             ]
           }
         }
       }
     }
   },
-  "defaultProject": "frontegg-app"
+  "cli": {
+    "analytics": false,
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
+  }
 }

package.json

@@ -13,39 +13,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.0.5",
-    "@angular/common": "~12.0.5",
-    "@angular/compiler": "~12.0.5",
-    "@angular/core": "~12.0.5",
-    "@angular/forms": "~12.0.5",
-    "@angular/platform-browser": "~12.0.5",
-    "@angular/platform-browser-dynamic": "~12.0.5",
-    "@angular/router": "~12.0.5",
+    "@angular/animations": "^16.0.6",
+    "@angular/common": "^16.0.6",
+    "@angular/compiler": "^16.0.6",
+    "@angular/core": "^16.0.6",
+    "@angular/forms": "^16.0.6",
+    "@angular/platform-browser": "^16.0.6",
+    "@angular/platform-browser-dynamic": "^16.0.6",
+    "@angular/router": "^16.0.6",
     "@frontegg/js": "6.109.0",
     "csstype": "^3.0.8",
     "rxjs": "~6.6.0",
     "stream": "^0.0.2",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1100.7",
-    "@angular/cli": "^12.0.5",
-    "@angular/compiler-cli": "^12.2.16",
-    "@types/jasmine": "~3.6.0",
+    "@angular-devkit/build-angular": "^16.0.6",
+    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
+    "@angular/cli": "^16.0.6",
+    "@angular/compiler-cli": "^16.0.6",
+    "@types/jasmine": "~3.8.0",
     "@types/node": "^12.20.55",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.6.0",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
+    "eslint": "^8.33.0",
+    "jasmine-core": "~3.8.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.0.0",
+    "karma": "~6.4.2",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^11.0.0",
+    "ng-packagr": "^16.1.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.2.3"
+    "typescript": "~4.9.5"
   }
-}
+}

projects/example/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "projects/example/tsconfig.(app|spec).json",
+          "projects/example/e2e/tsconfig.json"
+        ]
+      },
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

projects/example/src/app/app.module.ts

@@ -12,28 +12,25 @@ import { CheckoutDialogModule } from './checkout-dialog/checkout-dialog.module';
 
 
 @NgModule({
-  declarations: [ AppComponent, NotFoundComponent, AppHomeComponent, EmptyAppComponent, PrivateRouteComponent ],
-  imports: [
-    CommonModule,
-    BrowserModule,
-    AppRoutingModule,
-    FronteggAppModule.forRoot(
-      {
-        contextOptions: {
-          // @ts-ignore
-          baseUrl: process.env.FRONTEGG_BASE_URL || 'https://demo.frontegg.com',
-          // @ts-ignore
-          clientId: process.env.FRONTEGG_CLIENT_ID || 'b6adfe4c-d695-4c04-b95f-3ec9fd0c6cca',
-        },
-        authOptions: {
-          keepSessionAlive: true,
-        },
-      },
-    ),
-    CheckoutDialogModule,
-  ],
-  entryComponents: [ FronteggComponent ],
-  bootstrap: [ AppComponent ],
+    declarations: [AppComponent, NotFoundComponent, AppHomeComponent, EmptyAppComponent, PrivateRouteComponent],
+    imports: [
+        CommonModule,
+        BrowserModule,
+        AppRoutingModule,
+        FronteggAppModule.forRoot({
+            contextOptions: {
+                // @ts-ignore
+                baseUrl: process.env.FRONTEGG_BASE_URL || 'https://demo.frontegg.com',
+                // @ts-ignore
+                clientId: process.env.FRONTEGG_CLIENT_ID || 'b6adfe4c-d695-4c04-b95f-3ec9fd0c6cca',
+            },
+            authOptions: {
+                keepSessionAlive: true,
+            },
+        }),
+        CheckoutDialogModule,
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
 }

projects/example/src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

projects/example/src/test.ts

@@ -4,20 +4,7 @@ import 'zone.js/dist/zone-testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp
-  ): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // 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);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});