BREAKING CHANGE: Angular 19 support (#271)

BREAKING CHANGE: Angular 19 support
sweetalert2 · Jan 26, 2025 · 0117cb4 · 0117cb4
1 parent 4a349dd
commit 0117cb4
Show file tree

Hide file tree

Showing 36 changed files with 4,927 additions and 2,824 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,4 @@
+#Ignore files
+
+/node_modules
+/dist
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "tabWidth": 4,
+  "useTabs": false,
+  "printWidth": 120
+}
diff --git a/angular.json b/angular.json
@@ -35,6 +35,12 @@
               "browsers": "ChromeHeadlessCI"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["projects/ngx-sweetalert2/**/*.ts", "projects/ngx-sweetalert2/**/*.html"]
+          }
         }
       }
     },
@@ -46,12 +52,15 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/ngx-sweetalert2-demo",
+            "outputPath": {
+              "base": "dist/ngx-sweetalert2-demo"
+            },
             "index": "projects/ngx-sweetalert2-demo/src/index.html",
-            "main": "projects/ngx-sweetalert2-demo/src/main.ts",
-            "polyfills": "projects/ngx-sweetalert2-demo/src/polyfills.ts",
+            "polyfills": [
+              "projects/ngx-sweetalert2-demo/src/polyfills.ts"
+            ],
             "tsConfig": "projects/ngx-sweetalert2-demo/tsconfig.app.json",
             "aot": true,
             "assets": [
@@ -64,7 +73,8 @@
             "allowedCommonJsDependencies": [
                 "sweetalert2"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "projects/ngx-sweetalert2-demo/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -79,8 +89,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -99,18 +107,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "ngx-sweetalert2-demo:build"
+            "buildTarget": "ngx-sweetalert2-demo:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "ngx-sweetalert2-demo:build:production"
+              "buildTarget": "ngx-sweetalert2-demo:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ngx-sweetalert2-demo:build"
+            "buildTarget": "ngx-sweetalert2-demo:build"
           }
         },
         "test": {
@@ -136,6 +144,12 @@
               "browsers": "ChromeHeadlessCI"
             }
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["projects/ngx-sweetalert2-demo/**/*.ts", "projects/ngx-sweetalert2-demo/**/*.html"]
+          }
         }
       }
     }

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,33 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      semi: ["error", "always"],
+      "no-console": ["error", { allow: ["warn", "error"] }],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@angular-eslint/directive-selector": "error",
+      "@angular-eslint/component-selector": "error",
+      "@angular-eslint/prefer-standalone": "warn",
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  },
+);
diff --git a/package.json b/package.json
@@ -23,38 +23,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~16.0.0",
-    "@angular/common": "~16.0.0",
-    "@angular/compiler": "~16.0.0",
-    "@angular/core": "~16.0.0",
-    "@angular/forms": "~16.0.0",
-    "@angular/platform-browser": "~16.0.0",
-    "@angular/platform-browser-dynamic": "~16.0.0",
-    "@angular/router": "~16.0.0",
+    "@angular/animations": "~19.1.3",
+    "@angular/common": "~19.1.3",
+    "@angular/compiler": "~19.1.3",
+    "@angular/core": "~19.1.3",
+    "@angular/forms": "~19.1.3",
+    "@angular/platform-browser": "~19.1.3",
+    "@angular/platform-browser-dynamic": "~19.1.3",
+    "@angular/router": "~19.1.3",
     "rxjs": "~7.5.7",
     "sweetalert2": "^11.5.2",
     "tslib": "^2.4.0",
-    "zone.js": "~0.13.0"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~16.0.0",
-    "@angular/cli": "~16.0.0",
-    "@angular/compiler-cli": "~16.0.0",
-    "@angular/language-service": "~16.0.0",
+    "@angular-devkit/build-angular": "~19.1.4",
+    "@angular/cli": "~19.1.4",
+    "@angular/compiler-cli": "~19.1.3",
+    "@angular/language-service": "~19.1.3",
     "@types/jasmine": "^4.3.0",
     "@types/jasminewd2": "~2.0.10",
-    "@types/node": "^18.11.0",
+    "@types/node": "^22.10.10",
+    "angular-eslint": "19.0.2",
+    "eslint": "^9.19.0",
     "jasmine-core": "^5.0.0",
     "jasmine-spec-reporter": "^7.0.0",
     "karma": "^6.4.1",
     "karma-chrome-launcher": "~3.1.1",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^16.0.0",
+    "ng-packagr": "^19.1.1",
     "npm-run-all": "^4.1.5",
     "semantic-release": "^21.0.0",
-    "ts-node": "~10.9.1",
-    "typescript": "~4.9.3"
+    "prettier": "^3.4.2",
+    "ts-node": "~10.9.2",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "8.18.0"
   }
 }
diff --git a/projects/ngx-sweetalert2-demo/src/app/app-routing.module.ts b/projects/ngx-sweetalert2-demo/src/app/app-routing.module.ts
diff --git a/projects/ngx-sweetalert2-demo/src/app/app.component.html b/projects/ngx-sweetalert2-demo/src/app/app.component.html
@@ -6,60 +6,70 @@ <h3>Using the <code>[swal]="['title', 'text', 'icon']"</code> syntax</h3>
 
 <button [swal]="['Hello world!', 'How\'s the world going?', 'question']">Show modal</button>
 
-<hr>
+<hr />
 
-<h3>Using the <code>[swal]="{{ '{ title: \'title\', ... }' }}"</code> syntax</h3>
+<h3>
+    Using the <code>[swal]="{{ "{ title: 'title', ... }" }}"</code> syntax
+</h3>
 
-<button [swal]="{ title: 'Hello world!', text: 'How\'s the world going?', icon: 'question' }">Show modal</button>
+<button
+    [swal]="{
+        title: 'Hello world!',
+        text: 'How\'s the world going?',
+        icon: 'question',
+    }"
+>
+    Show modal
+</button>
 
-<hr>
+<hr />
 
 <h3>Using the <code>[swal]="swalRef"</code> syntax with a <code>&lt;swal #swalRef&gt;&lt;/swal&gt;</code> component</h3>
 
 <button [swal]="swal1">Show modal</button>
 <swal #swal1 title="Hello world!" text="How's the world going?" icon="question"></swal>
 
-<hr>
+<hr />
 
 <h3><code>&lt;swal [swalFireOnInit]="true"&gt;&lt;/swal&gt;</code></h3>
 
 <button (click)="modalFireCondition = true">Fire! by setting modalFireCondition = true</button>
 <p>
-    The modal's presence in the DOM is conditioned by the <code>modalFireCondition</code> variable.<br>
-    As soon as this variable is set to <code>true</code>, the <code>*ngIf</code> on the <code>&lt;swal&gt;</code> element
-    creates the component, and the modal fires immediately since it has <code>[swalFireOnInit]="true"</code>.<br>
+    The modal's presence in the DOM is conditioned by the
+    <code>modalFireCondition</code> variable.<br />
+    As soon as this variable is set to <code>true</code>, the <code>*ngIf</code> on the
+    <code>&lt;swal&gt;</code> element creates the component, and the modal fires immediately since it has
+    <code>[swalFireOnInit]="true"</code>.<br />
     When the modal is closed, <code>modalFireCondition</code> is reset to <code>false</code>, the modal component is
     then destroyed by <code>*ngIf</code>, so you can click the button again.
 </p>
 <swal
     *ngIf="modalFireCondition"
     text="modalFireCondition = {{ modalFireCondition }}"
     [swalFireOnInit]="true"
-    (didClose)="modalFireCondition = false">
+    (didClose)="modalFireCondition = false"
+>
 </swal>
 
-<hr>
+<hr />
 
 <h3><code>&lt;swal [swalVisible]="isSwalVisible"&gt;&lt;/swal&gt;</code></h3>
 
 <button (click)="isSwalVisible = true">Fire! by setting isSwalVisible = true</button>
 
 <p>
     <code>[swalVisible]</code> provides a reactive way to change the modal visibility, if you do not want to use
-    <code>SwalComponent.fire()</code> or <code>SwalComponent.dismiss()</code>.<br>
+    <code>SwalComponent.fire()</code> or <code>SwalComponent.dismiss()</code>.<br />
     This example uses a simple variable, but another common use case could be using an observable, binding it like this:
-    <code>&lt;swal [swalVisible]="currentError$ | async" [title]="currentError$ | async"&gt;</code>. Don't forget to reset
-    <code>currentError$</code> after though! (maybe <code>[swalFireOnInit]</code> with an <code>*ngIf</code> would be
-    simpler here).
+    <code>&lt;swal [swalVisible]="currentError$ | async" [title]="currentError$ | async"&gt;</code>. Don't forget to
+    reset <code>currentError$</code> after though! (maybe <code>[swalFireOnInit]</code> with an <code>*ngIf</code> would
+    be simpler here).
 </p>
 
-<swal
-    text="isSwalVisible = {{ isSwalVisible }}"
-    [swalVisible]="isSwalVisible"
-    (didClose)="isSwalVisible = false">
+<swal text="isSwalVisible = {{ isSwalVisible }}" [swalVisible]="isSwalVisible" (didClose)="isSwalVisible = false">
 </swal>
 
-<hr>
+<hr />
 
 <h3><code>*swalPortal</code> demos</h3>
 
@@ -75,7 +85,7 @@ <h3><code>*swalPortal</code> demos</h3>
 
 <button [swal]="swalWithPortals">Show swal with lots of portals</button>
 
-<hr>
+<hr />
 
 <a routerLink="nested" routerLinkActive="nested-active">Load submodule</a>
 <router-outlet></router-outlet>
diff --git a/projects/ngx-sweetalert2-demo/src/app/app.component.spec.ts b/projects/ngx-sweetalert2-demo/src/app/app.component.spec.ts
@@ -1,24 +1,18 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterModule } from '@angular/router';
-import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';
-import { AppComponent } from './app.component';
+import { TestBed, waitForAsync } from "@angular/core/testing";
+import { RouterModule } from "@angular/router";
+import { SweetAlert2Module } from "@sweetalert2/ngx-sweetalert2";
+import { AppComponent } from "./app.component";
 
-describe('AppComponent', () => {
+describe("AppComponent", () => {
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            declarations: [
-                AppComponent
-            ],
-            imports: [
-                RouterModule.forRoot([]),
-                SweetAlert2Module.forRoot()
-            ]
+            imports: [RouterModule.forRoot([]), SweetAlert2Module.forRoot(), AppComponent],
         });
 
         TestBed.compileComponents();
     }));
 
-    it('should create the app', () => {
+    it("should create the app", () => {
         const fixture = TestBed.createComponent(AppComponent);
         const app = fixture.debugElement.componentInstance;
         expect(app).toBeTruthy();

diff --git a/projects/ngx-sweetalert2-demo/src/app/app.component.ts b/projects/ngx-sweetalert2-demo/src/app/app.component.ts
@@ -1,24 +1,25 @@
-import { Component } from '@angular/core';
-import { SwalPortalTargets } from '@sweetalert2/ngx-sweetalert2';
+import { Component, Inject } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { SwalPortalTargets, SweetAlert2Module } from "@sweetalert2/ngx-sweetalert2";
 
 @Component({
-    selector: 'demo-app',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+    selector: "app-demo-app",
+    templateUrl: "./app.component.html",
+    styleUrls: ["./app.component.css"],
+    imports: [RouterModule, SweetAlert2Module],
 })
 export class AppComponent {
     public modalFireCondition = false;
 
     public isSwalVisible = false;
 
-    private readonly dynamicTextChunks = 'This dynamic content is controlled by Angular'.split(' ');
+    private readonly dynamicTextChunks = "This dynamic content is controlled by Angular".split(" ");
 
     private dynamicTextChunksIntervalHandle?: any;
 
     private currentTextChunkOffset = 0;
 
-    public constructor(public readonly targets: SwalPortalTargets) {
-    }
+    public constructor(@Inject(SwalPortalTargets) public readonly targets: SwalPortalTargets) {}
 
     public get currentTextChunk(): string {
         return this.dynamicTextChunks[this.currentTextChunkOffset % this.dynamicTextChunks.length];

diff --git a/projects/ngx-sweetalert2-demo/src/app/app.config.ts b/projects/ngx-sweetalert2-demo/src/app/app.config.ts
@@ -0,0 +1,12 @@
+import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from "@angular/core";
+import { routes } from "./app.routes";
+import { provideRouter, withComponentInputBinding, withRouterConfig } from "@angular/router";
+import { SweetAlert2Module } from "@sweetalert2/ngx-sweetalert2";
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideZoneChangeDetection({ eventCoalescing: true }),
+        provideRouter(routes, withComponentInputBinding(), withRouterConfig({ paramsInheritanceStrategy: "always" })),
+        importProvidersFrom(SweetAlert2Module.forRoot()),
+    ],
+};