Angular 7 中使用 SweetAlert

Question

我正在尝试在我的Angular项目中使用SweetAlert。

这是我如何使用SweetAlert：

import swal from 'sweetalert';

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

我遇到了以下错误：

ERROR in node_modules/sweetalert/typings/sweetalert.d.ts(4,9): error TS2403: 后续变量声明必须具有相同的类型。变量'swal'的类型必须为“typeof import("C:/Users/user/Desktop/University/Thesis/workspace/web/myProject/project/node_modules/sweetalert/typings/sweetalert")”，但此处的类型为“SweetAlert”。

有人能帮我解决这个问题吗？

- Paraskevas Louka

---

你能添加完整的代码吗？ - Rahul Sharma

看起来运行得很好：https://stackblitz.com/edit/angular-t7omte。 你能在 stackblitz 中重现这个问题吗？ - peinearydevelopment

检查你的 package.json 文件，确保你正在使用正确的 sweetalert 依赖。我一直在使用这个 "sweetalert": "^2.1.2"，没有出现任何问题。 - guzmanoj

谢谢大家。解决方案是更改 TypeScript 版本。不确定为什么，但对我起作用了。 - Paraskevas Louka

Answer 1

编译 Angular 项目的简单解决方案是进入您的项目文件夹\node_modules\sweetalert\typings\sweetalert.d.ts

在此文件中，只需注释掉以下行：// const swal: SweetAlert;

这样，您的最终文件看起来像这样：

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

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

export default swal;
export as namespace swal;

- OmkieIT Solutions

---

对我来说也是:D，这是一个Vue.js的问题，但现在已经解决了:D - Manuel Lazo

如果您删除了node_modules文件夹并运行npm i，这并不能解决问题。您可以编写一个小脚本，在每次构建之前注释掉那一行，但是如果开发人员能够自己做到这一点就更好了。 - Ambrus Tóth

Answer 2

我遇到了同样的问题，我的解决方案是这样的。

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

const swal: SweetAlert = _swal as any;

由于某些原因，名称“swal”会显示错误，如果您将别名更改为“_swal”，则应该可以正常工作。

- Gerardo Cetzal

---

这个更改是在哪里进行的？ - Takatalvi

例如，当我需要在特定组件或服务中使用sweetalert时，将其放置在文件顶部。 - Gerardo Cetzal

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

Answer 3

当我删除存在于以下代码中的简单行时，问题得到了解决：

node_modules/sweetalert/src/sweetalert.d.ts 

代码将会是这样的：

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

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

export default swal;
export as namespace swal;

只需删除此行：const swal: SweetAlert;

您可以在gitgub上检查此内容：https://github.com/AlbinoDrought/sweetalert-sans-ts-namespace/commit/699f10b8546a524000dd3e3b41bf7a7e599a2666

- Abd Abughazaleh

Answer 4

我完全不知道我做了什么，但显然编译器希望我这样做，因为当我遇到和你一样的问题时它可以工作：

在文件“/node_modules/sweetalert/typings/sweetalert.d.ts”中，将"swal: SweetAlert"行中的swal类型替换为"swal: typeof swal"

所以，变成了这个（之前）：

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

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

export default swal;
export as namespace swal;

变成这样（之后）：

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

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

export default swal;
export as namespace swal;

- Sarah

Answer 5

我曾经遇到过同样的问题，原因是我导入sweetalert的方式不正确。 必须使用以下方式进行导入： const swal = require('sweetalert'); 而不是 import swal from 'sweetalert';

- Mouhamed Sylla

Answer 6

你可以尝试一下

import Swal from 'sweetalert2'; 

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

- Praneeth Kalluri

Answer 7

对于SweetAlert2，您只需使用以下代码行进行导入：

import * as Swal from 'sweetalert2';

然后这样使用：

Swal.fire('Hello world!');

- Saeed Falsafin

Answer 8

首先，我最近更新了node_modules...然后出现了一些问题。其中最后一个问题就是这个！

我尝试使用npm install sweetalert2....但仍然出现问题...所以最终的解决方案是...删除那行代码，一切都正常，没有错误..！

- Ignacio Trezza