Angular v19 compatibility

package.json

@@ -1,69 +1,69 @@
 {
-  "name": "fuse-angular",
+    "name": "fuse-angular",
-  "version": "20.0.0",
+    "version": "21.0.0",
-  "description": "Fuse - Angular Admin Template and Starter Project",
+    "description": "Fuse - Angular Admin Template and Starter Project",
-  "author": "https://themeforest.net/user/srcn",
+    "author": "https://themeforest.net/user/srcn",
-  "license": "https://themeforest.net/licenses/standard",
+    "license": "https://themeforest.net/licenses/standard",
-  "private": true,
+    "private": true,
-  "scripts": {
+    "scripts": {
-    "ng": "ng",
+        "ng": "ng",
-    "start": "ng serve",
+        "start": "ng serve",
-    "build": "ng build",
+        "build": "ng build",
-    "watch": "ng build --watch --configuration development",
+        "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+        "test": "ng test"
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "@angular/animations": "19.0.5",
+        "@angular/animations": "19.0.5",
-    "@angular/cdk": "19.0.4",
+        "@angular/cdk": "19.0.4",
-    "@angular/common": "19.0.5",
+        "@angular/common": "19.0.5",
-    "@angular/compiler": "19.0.5",
+        "@angular/compiler": "19.0.5",
-    "@angular/core": "19.0.5",
+        "@angular/core": "19.0.5",
-    "@angular/forms": "19.0.5",
+        "@angular/forms": "19.0.5",
-    "@angular/material": "19.0.4",
+        "@angular/material": "19.0.4",
-    "@angular/material-luxon-adapter": "19.0.4",
+        "@angular/material-luxon-adapter": "19.0.4",
-    "@angular/platform-browser": "19.0.5",
+        "@angular/platform-browser": "19.0.5",
-    "@angular/platform-browser-dynamic": "19.0.5",
+        "@angular/platform-browser-dynamic": "19.0.5",
-    "@angular/router": "19.0.5",
+        "@angular/router": "19.0.5",
-    "@ngneat/transloco": "6.0.4",
+        "@jsverse/transloco": "7.5.1",
-    "apexcharts": "3.49.1",
+        "apexcharts": "4.3.0",
-    "crypto-js": "4.2.0",
+        "crypto-js": "4.2.0",
-    "highlight.js": "11.9.0",
+        "highlight.js": "11.11.1",
-    "lodash-es": "4.17.21",
+        "lodash-es": "4.17.21",
-    "luxon": "3.4.4",
+        "luxon": "3.5.0",
-    "ng-apexcharts": "1.10.0",
+        "ng-apexcharts": "1.15.0",
-    "ngx-quill": "26.0.1",
+        "ngx-quill": "27.0.0",
-    "perfect-scrollbar": "1.5.5",
+        "perfect-scrollbar": "1.5.6",
-    "quill": "2.0.2",
+        "quill": "2.0.3",
-    "rxjs": "7.8.1",
+        "rxjs": "7.8.1",
-    "tslib": "2.6.3",
+        "tslib": "2.8.1",
-    "zone.js": "0.15.0"
+        "zone.js": "0.15.0"
-  },
+    },
-  "devDependencies": {
+    "devDependencies": {
-    "@angular-devkit/build-angular": "19.0.6",
+        "@angular-devkit/build-angular": "19.0.6",
-    "@angular/cli": "19.0.6",
+        "@angular/cli": "19.0.6",
-    "@angular/compiler-cli": "19.0.5",
+        "@angular/compiler-cli": "19.0.5",
-    "@tailwindcss/typography": "0.5.13",
+        "@tailwindcss/typography": "0.5.15",
-    "@types/chroma-js": "2.4.4",
+        "@types/chroma-js": "2.4.5",
-    "@types/crypto-js": "4.2.2",
+        "@types/crypto-js": "4.2.2",
-    "@types/highlight.js": "10.1.0",
+        "@types/highlight.js": "10.1.0",
-    "@types/jasmine": "5.1.4",
+        "@types/jasmine": "5.1.5",
-    "@types/lodash": "4.17.5",
+        "@types/lodash": "4.17.13",
-    "@types/lodash-es": "4.17.12",
+        "@types/lodash-es": "4.17.12",
-    "@types/luxon": "3.4.2",
+        "@types/luxon": "3.4.2",
-    "autoprefixer": "10.4.19",
+        "autoprefixer": "10.4.20",
-    "chroma-js": "2.4.2",
+        "chroma-js": "2.4.2",
-    "jasmine-core": "5.1.2",
+        "jasmine-core": "5.1.2",
-    "karma": "6.4.3",
+        "karma": "6.4.4",
-    "karma-chrome-launcher": "3.2.0",
+        "karma-chrome-launcher": "3.2.0",
-    "karma-coverage": "2.2.1",
+        "karma-coverage": "2.2.1",
-    "karma-jasmine": "5.1.0",
+        "karma-jasmine": "5.1.0",
-    "karma-jasmine-html-reporter": "2.1.0",
+        "karma-jasmine-html-reporter": "2.1.0",
-    "lodash": "4.17.21",
+        "lodash": "4.17.21",
-    "postcss": "8.4.38",
+        "postcss": "8.4.49",
-    "prettier": "3.3.2",
+        "prettier": "3.4.2",
-    "prettier-plugin-organize-imports": "3.2.4",
+        "prettier-plugin-organize-imports": "4.1.0",
-    "prettier-plugin-tailwindcss": "0.6.3",
+        "prettier-plugin-tailwindcss": "0.6.9",
-    "tailwindcss": "3.4.4",
+        "tailwindcss": "3.4.17",
-    "typescript": "5.5.4"
+        "typescript": "5.6.3"
-  }
+    }
 }

src/@fuse/version/fuse-version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('20.0.0').full;
+export const FUSE_VERSION = new Version('21.0.0').full;

src/app/app.config.ts

@@ -10,7 +10,7 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
 import { provideFuse } from '@fuse';
-import { TranslocoService, provideTransloco } from '@ngneat/transloco';
+import { TranslocoService, provideTransloco } from '@jsverse/transloco';
 import { appRoutes } from 'app/app.routes';
 import { provideAuth } from 'app/core/auth/auth.provider';
 import { provideIcons } from 'app/core/icons/icons.provider';

src/app/core/transloco/transloco.http-loader.ts

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { Translation, TranslocoLoader } from '@ngneat/transloco';
+import { Translation, TranslocoLoader } from '@jsverse/transloco';
 import { Observable } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })

src/app/layout/common/languages/languages.component.ts

@@ -13,7 +13,7 @@ import {
     FuseNavigationService,
     FuseVerticalNavigationComponent,
 } from '@fuse/components/navigation';
-import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
+import { AvailableLangs, TranslocoService } from '@jsverse/transloco';
 import { take } from 'rxjs';
 
 @Component({

src/app/mock-api/common/navigation/data.ts

@@ -973,7 +973,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon: 'heroicons_outline:megaphone',
                 link: '/docs/changelog',
                 badge: {
-                    title: '20.0.0',
+                    title: '21.0.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full',
                 },
             },

src/app/modules/admin/dashboards/project/project.component.ts

@@ -14,7 +14,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { Router } from '@angular/router';
-import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoModule } from '@jsverse/transloco';
 import { ProjectService } from 'app/modules/admin/dashboards/project/project.service';
 import { ApexOptions, NgApexchartsModule } from 'ng-apexcharts';
 import { Subject, takeUntil } from 'rxjs';
@@ -191,7 +191,6 @@ export class ProjectComponent implements OnInit, OnDestroy {
                 hover: {
                     filter: {
                         type: 'darken',
-                        value: 0.75,
                     },
                 },
             },
@@ -261,7 +260,6 @@ export class ProjectComponent implements OnInit, OnDestroy {
                 hover: {
                     filter: {
                         type: 'darken',
-                        value: 0.75,
                     },
                 },
             },

src/app/modules/admin/docs/changelog/changelog.ts

@@ -8,6 +8,20 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 })
 export class ChangelogComponent {
     changelog: any[] = [
+        // v21.0.0
+        {
+            version: 'v21.0.0',
+            releaseDate: 'Dec 29, 2024',
+            changes: [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material to v19',
+                        '(Dependencies) Updated other packages',
+                    ],
+                },
+            ],
+        },
         // v20.0.0
         {
             version: 'v20.0.0',

tailwind.config.js

@@ -66,7 +66,7 @@ const themes = {
  * Tailwind configuration
  */
 const config = {
-    darkMode: 'class',
+    darkMode: ['selector', '.dark'],
     content: ['./src/**/*.{html,scss,ts}'],
     important: true,
     theme: {