4
votes

SweetAlert avec Angular 7

J'essaie d'utiliser Sweet Alert dans mon projet angulaire.

C'est comme ça que j'utilise Sweet Alert:

import swal from 'sweetalert';

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

J'obtiens l'erreur suivante:

ERREUR dans node_modules / sweetalert / typings / sweetalert.d.ts (4,9): erreur TS2403: les déclarations de variables suivantes doivent avoir le même type. La variable 'swal' doit être du type 'typeof import ("C: / Users / user / Desktop / University / Thesis / workspace / web / myProject / project / node_modules / sweetalert / typings / sweetalert")', mais ici a le type ' SweetAlert ».

Quelqu'un peut-il m'aider?

angular sweetalert

4 commentaires

pouvez-vous ajouter le code complet

Semble fonctionner très bien: stackblitz.com/edit/angular-t7omte . Pouvez-vous reproduire le problème dans stackblitz?

Vérifiez votre package.json et assurez-vous que vous utilisez la bonne dépendance d'alerte douce. J'ai utilisé celui-ci "sweetalert": "^ 2.1.2" sans problème.

Merci les gars. La solution était de changer la version dactylographiée. Je ne sais pas pourquoi mais a travaillé pour moi

7 Réponses :

5
votes

La solution simple pour compiler le projet Angular est Accédez au dossier de votre projet \ node_modules \ sweetalert \ typings \ sweetalert.d.ts

Dans ce fichier, commentez simplement la ligne // const swal: SweetAlert;

et votre fichier final ressemble à ceci:

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

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

export default swal;
export as namespace swal;

0 commentaires

-1
votes

AVANT TOUT .. J'ai récemment mis à jour node_modules ... et quelques problèmes sont apparus. Le dernier de ceux-ci était celui-ci!

J'ai essayé avec npm install sweetalert2 .... mais cela me pose encore des problèmes ... donc la solution finale était ... éliminer cette ligne et FONCTIONNE BIEN, SANS ERREURS ..!

0 commentaires

4
votes

J'ai eu le même problème, ma solution était la suivante.

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

const swal: SweetAlert = _swal as any;

pour une raison quelconque, le nom "swal" affiche une erreur, si vous changez l'alias par "_swal" cela devrait fonctionner p >

3 commentaires

Où a fait ce changement?

en haut du fichier, par exemple lorsque j'ai besoin d'utiliser le sweetalert sur un composant ou un service particulier.

import * comme _swal depuis 'sweetalert'; import {SweetAlert} de 'sweetalert / typings / core'; classe d'exportation MyComponent {... updateHospital (hôpital: hôpital) {let url = URL_SERVICE + '/ hôpital /' + hospital._id; url + = ? token = $ {this._userService.token} ; const swal: SweetAlert = _swal comme tout; return this.http.put (url, hôpital) .pipe (map ((res: any) => {swal ('mis à jour', nom.hôpital, 'succès'); return res.hospital;})); }

0
votes

Pour SweetAlert2, vous devez simplement utiliser cette ligne pour l'importer:

Swal.fire('Hello world!');

puis l'utiliser de cette façon:

import * as Swal from 'sweetalert2';

0 commentaires

0
votes

Je n'ai aucune idée de ce que je viens de faire, mais apparemment, c'est ce que le compilateur voulait que je fasse car cela a fonctionné quand j'ai eu le même problème:

Dans le fichier "/ node_modules / sweetalert / typings / sweetalert .d.ts ", remplacez le type de swal dans la ligne
"swal: SweetAlert" avec "swal: typeof swal"

Donc, ceci (avant):

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

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

export default swal;
export as namespace swal;

devient ceci (après): p >

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

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

export default swal;
export as namespace swal;

0 commentaires

0
votes

C'est résolu avec moi lorsque je supprime une simple ligne de code existant dans:

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

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

export default swal;
export as namespace swal;

Le code ressemblera à ceci:

node_modules/sweetalert/src/sweetalert.d.ts

Supprimez simplement cette ligne: const swal: SweetAlert;

Et vous pouvez vérifier ceci sur gitgub: https://github.com/AlbinoDrought/sweetalert-sans-ts-namespace/commit/699f10b8546ae52441dp>566bp>

0 commentaires

0
votes

Vous pouvez essayer

import Swal from 'sweetalert2'; 

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

0 commentaires