feat: Update Angular package dependencies and example app to Angular 17 (#3319)

Author: JanCizmar

.github/workflows/publish-examples-check.yml

@@ -58,6 +58,9 @@ jobs:
       - name: Recreate package-lock
         run: |
           npm install --package-lock-only --force
+        # this tests the previous command
+          npm install --package-lock-only
+
         working-directory: testapps/${{ matrix.project }}
 
       # NOT publishing here

.github/workflows/publish-examples.yml

@@ -59,6 +59,8 @@ jobs:
       - name: Recreate package-lock
         run: |
           npm install --package-lock-only --force
+        # this tests the previous command
+          npm install --package-lock-only
         working-directory: testapps/${{ matrix.project }}
 
       - name: Commit & Push files

packages/core/package.json

@@ -58,7 +58,8 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "concurrently": "7.3.0",
     "intl-messageformat": "^9.9.1",
-    "jest": "^27.2.4",
+    "jest": "~27.5.1",
+    "jest-environment-jsdom": "~27.5.1",
     "jest-fetch-mock": "^3.0.3",
     "rollup": "^2.56.3",
     "rollup-plugin-bundle-size": "^1.0.3",

packages/format-icu/package.json

@@ -57,7 +57,8 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "concurrently": "7.3.0",
     "intl-messageformat": "^9.9.1",
-    "jest": "^27.2.4",
+    "jest": "~27.5.1",
+    "jest-environment-jsdom": "~27.5.1",
     "jest-fetch-mock": "^3.0.3",
     "rollup": "^2.56.3",
     "rollup-plugin-bundle-size": "^1.0.3",

packages/i18next/package.json

@@ -49,7 +49,8 @@
     "@types/node": "^18.6.1",
     "concurrently": "7.3.0",
     "i18next": "^23.5.1",
-    "jest": "^27.2.4",
+    "jest": "~27.5.1",
+    "jest-environment-jsdom": "~27.5.1",
     "jest-fetch-mock": "^3.0.3",
     "rollup": "^2.78.1",
     "rollup-plugin-bundle-size": "^1.0.3",

packages/ngx/angular.json

@@ -42,7 +42,6 @@
       }
     }
   },
-  "defaultProject": "ngx-tolgee",
   "cli": {
     "analytics": false
   }

packages/ngx/package.json

@@ -19,42 +19,39 @@
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "~13.1.1",
-    "@angular/common": "~13.1.3",
-    "@angular/compiler": "~13.0.3",
-    "@angular/core": "~13.1.3",
-    "@angular/forms": "~13.1.3",
-    "@angular/platform-browser": "~13.1.3",
-    "@angular/platform-browser-dynamic": "~13.3.9",
-    "@angular/router": "~13.1.3",
+    "@angular/animations": "17.3.7",
+    "@angular/common": "17.3.7",
+    "@angular/compiler": "17.3.7",
+    "@angular/core": "17.3.7",
+    "@angular/forms": "17.3.7",
+    "@angular/platform-browser": "17.3.7",
+    "@angular/platform-browser-dynamic": "17.3.7",
+    "@angular/router": "17.3.7",
     "@tolgee/web": "5.25.0",
-    "rxjs": "~7.5.5",
-    "tslib": "^2.4.0",
-    "zone.js": "~0.11.5"
+    "rxjs": "~7.5.7",
+    "tslib": "^2.6.2",
+    "zone.js": "0.14.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.3.5",
-    "@angular/cli": "~13.3.5",
-    "@angular/compiler-cli": "~13.0.3",
-    "@angular/language-service": "~13.3.8",
-    "@testing-library/angular": "^10.11.1",
-    "@testing-library/jest-dom": "5.16.4",
+    "@angular-devkit/build-angular": "17.3.6",
+    "@angular/cli": "^17.3.6",
+    "@angular/compiler-cli": "17.3.7",
+    "@angular/language-service": "17.3.7",
+    "@testing-library/angular": "^16.0.0",
+    "@testing-library/jest-dom": "^6.4.5",
     "@tolgee/format-icu": "5.25.0",
-    "@tolgee/testing": "5.25.0",
     "@types/jasmine": "~3.10.3",
     "@types/jasminewd2": "~2.0.3",
-    "@types/jest": "27.5.0",
-    "@types/node": "^17.0.36",
-    "codelyzer": "^6.0.0",
-    "jest": "27.5.1",
-    "jest-environment-jsdom": "27.5.1",
-    "jest-preset-angular": "11.1.2",
-    "ng-packagr": "^13.3.1",
-    "protractor": "~7.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "20.11.17",
+    "jest": "~29.7.0",
+    "jest-environment-jsdom": "~29.7.0",
+    "jest-preset-angular": "^14.0.4",
+    "ng-packagr": "17.3.0",
     "ts-jest": "^27.1.4",
-    "ts-node": "~10.8.1",
-    "tslint": "~6.1.0",
-    "typescript": "~4.4.4"
+    "ts-node": "10.8.1",
+    "typescript": "5.4.5",
+    "@tolgee/testing": "5.25.0"
   },
   "publishConfig": {
     "access": "public"

packages/ngx/projects/ngx-tolgee/jest.config.js

@@ -1,23 +1,5 @@
-const { pathsToModuleNameMapper } = require('ts-jest');
-const { compilerOptions } = require('../../tsconfig.json');
-
 module.exports = {
-  preset: 'ts-jest',
-  resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
-  transformIgnorePatterns: ['node_modules/.*/node_modules/(?!@angular)'],
-  transform: {
-    '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
-  },
-  testEnvironment: 'jsdom',
-  unmockedModulePathPatterns: ['/node_modules/*', '/ngx-tolgee/src/__mocks'],
-  modulePathIgnorePatterns: ['cypress'],
-  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
-    prefix: '<rootDir>/../../',
-  }),
-  globals: {
-    'ts-jest': {
-      tsconfig: '<rootDir>/tsconfig.spec.json',
-    },
-  },
+  preset: 'jest-preset-angular',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globalSetup: 'jest-preset-angular/global-setup',
 };

packages/ngx/projects/ngx-tolgee/src/lib/namespace.resolver.ts

@@ -1,12 +1,9 @@
-import {
-  ActivatedRouteSnapshot,
-  Resolve,
-} from '@angular/router';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { TranslateService } from './translate.service';
 import { Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
-export class NamespaceResolver implements Resolve<void> {
+export class NamespaceResolver  {
   constructor(public service: TranslateService) {}
 
   async resolve(

packages/ngx/projects/ngx-tolgee/src/lib/translate.pipe.ts

@@ -1,7 +1,17 @@
-import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  OnDestroy,
+  Pipe,
+  PipeTransform,
+} from '@angular/core';
 import { TranslateService } from './translate.service';
 import { Subscription } from 'rxjs';
-import { getTranslateProps, TFnType, TranslateProps, TranslationKey } from '@tolgee/web';
+import {
+  getTranslateProps,
+  TFnType,
+  TranslateProps,
+  TranslationKey,
+} from '@tolgee/web';
 
 @Pipe({
   name: 'translate',
@@ -13,7 +23,10 @@ export class TranslatePipe implements PipeTransform, OnDestroy {
 
   private subscription: Subscription;
 
-  constructor(protected translateService: TranslateService, private _cdr: ChangeDetectorRef) {}
+  constructor(
+    protected translateService: TranslateService,
+    private _cdr: ChangeDetectorRef
+  ) {}
 
   ngOnDestroy(): void {
     this.unsubscribe();
@@ -56,9 +69,11 @@ export class TranslatePipe implements PipeTransform, OnDestroy {
 
   private subscribe(props: TranslateProps) {
     this.unsubscribe();
-    this.subscription = this.translateService.translate(props).subscribe((r) => {
-      this.value = r;
-      this._cdr.markForCheck();
-    });
+    this.subscription = this.translateService
+      .translate(props)
+      .subscribe((r) => {
+        this.value = r;
+        this._cdr.detectChanges();
+      });
   }
 }