SweetAlert with Angular 7

Question

I am trying to use sweet alert in my angular project.

That's how I use sweet alert:

import swal from 'sweetalert';

swal({
    title: "Problem",
    text: "Try again later!",
    icon: "error"
  })

I get the following error:

ERROR in node_modules/sweetalert/typings/sweetalert.d.ts(4,9): error TS2403: Subsequent variable declarations must have the same type. Variable 'swal' must be of type 'typeof import("C:/Users/user/Desktop/University/Thesis/workspace/web/myProject/project/node_modules/sweetalert/typings/sweetalert")', but here has type 'SweetAlert'.

Anyone can help me with that?

Seems to work just fine: https://stackblitz.com/edit/angular-t7omte. Can you reproduce the issue in stackblitz? — peinearydevelopment, Feb 26 '19 at 16:12
Check your package.json and make sure you're using the right sweet alert dependency. I've been using this one "sweetalert": "^2.1.2" without issues. — WSD, Feb 26 '19 at 16:32
Thank you guys. The solution was to change typescript version. Not sure why but worked for me — Paraskevas Louka, Feb 28 '19 at 21:18

score 12 · Answer 1 · answered Jun 15 '19 at 06:40

12

The simple solution to compile the Angular project is Go to your project folder \node_modules\sweetalert\typings\sweetalert.d.ts

In this file simply comment the line // const swal: SweetAlert;

and your final file looks like this:

import swal, { SweetAlert } from "./core";

declare global {
  // const swal: SweetAlert;
  const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;

answered Jun 15 '19 at 06:40

OmkieIT Solutions

424
4
10

for me too :D, it was an issue with Vue.js but works :D – Manuel Lazo Jan 19 '21 at 20:08
It will not solve the problem in the case you delete the node_modules folder and then ```npm i```. You could make a little script that runs before every build to comment that line out, but it would be great if the developers would do that. – Ambrus Tóth Mar 26 '21 at 18:38

Gerardo Cetzal · Accepted Answer · 2019-12-02T18:41:12.823

4

I had the same issue, my solution was this.

import * as _swal from 'sweetalert';
import { SweetAlert } from 'sweetalert/typings/core';

const swal: SweetAlert = _swal as any;

for some reason the name "swal" show error, if you change alias by "_swal" it should work

edited Dec 02 '19 at 18:41

answered Jul 09 '19 at 21:02

Gerardo Cetzal

170
1
8

Where did make this change? – Takatalvi Sep 20 '19 at 16:25
1

at the top of the file, for example when i need to use the sweetalert on a particular component or service. – Gerardo Cetzal Sep 20 '19 at 20:55
1

`import * as _swal from 'sweetalert'; import { SweetAlert } from 'sweetalert/typings/core'; ` export class MyComponent { ... `updateHospital(hospital: Hospital) { let url = URL_SERVICE + '/hospital/' + hospital._id; url += `?token=${this._userService.token}`; const swal: SweetAlert = _swal as any; return this.http.put(url, hospital).pipe(map((res:any) => { swal('updated', hospital.name, 'success'); return res.hospital; })); }` – Gerardo Cetzal Sep 20 '19 at 20:56

score 1 · Answer 3 · answered Jun 04 '20 at 21:31

It's solved with me when i remove simple line of code existing in :

node_modules/sweetalert/src/sweetalert.d.ts

Code will be look like this :

import swal, { SweetAlert } from "./core";

declare global {
  const swal: SweetAlert;
  const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;

Just remove this line : const swal: SweetAlert;

And you can check this on gitgub : https://github.com/AlbinoDrought/sweetalert-sans-ts-namespace/commit/699f10b8546a524000dd3e3b41bf7a7e599a2666

score 0 · Answer 4 · answered Nov 24 '19 at 08:46

0

For SweetAlert2 you just should to use this line to import it:

import * as Swal from 'sweetalert2';

then use it this way:

Swal.fire('Hello world!');

answered Nov 24 '19 at 08:46

Saeed Falsafin

556
6
15

score 0 · Answer 5 · answered Apr 08 '20 at 17:26

I've got no idea what I just did, but apparently, that's what the compiler wanted me to do cause it worked when I had your same problem:

In the file "/node_modules/sweetalert/typings/sweetalert.d.ts", replace the type of swal in the line
"swal: SweetAlert" with "swal: typeof swal"

So, this (before):

import swal, { SweetAlert } from "./core";

declare global {
const swal: SweetAlert;
const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;

becomes this (after):

import swal, { SweetAlert } from "./core";

declare global {
const swal: typeof swal;
const sweetAlert: SweetAlert;
}

export default swal;
export as namespace swal;

score 0 · Answer 6 · answered Aug 12 '20 at 04:05

0

You can try

import Swal from 'sweetalert2'; 

Swal.fire('Error', 'Please Enter Username', 'error');

answered Aug 12 '20 at 04:05

Praneeth Kalluri

154
1
3

score 0 · Answer 7 · answered May 08 '23 at 17:09

0

I had the same problem it was due to the way I imported sweetalert it is necessary to put const swal = require('sweetalert'); INSTEAD OF import swal from 'sweetalert';

answered May 08 '23 at 17:09

Mouhamed Sylla

1

score -2 · Answer 8 · edited Jun 27 '19 at 19:51

-2

BEFORE ALL.. I'm recently update node_modules... and some issues appeared. The last of those, was this one!

I tried with npm install sweetalert2.... but the still giving me problems... so the final solution was.... eliminate that line and WORKS FINE, WITHOUT ERRORS..!

edited Jun 27 '19 at 19:51

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Jun 27 '19 at 19:10

Ignacio Trezza

1
2

SweetAlert with Angular 7

8 Answers8