Angular 7 的 SweetAlert

Question

我正在尝试在我的 angular 项目中使用 sweet alert。

这就是我使用 sweet alert 的方式：

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: 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'.

有人可以帮我吗？

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;

Answer 2

首先……我最近更新了 node_modules……但出现了一些问题。最后一个，就是这个！

我试过 npm install sweetalert2... 但仍然给我带来问题...... 所以最终的解决方案是...... 删除该行并且工作正常，没有错误..！

Answer 3

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

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

const swal: SweetAlert = _swal as any;

出于某种原因，名称 "swal" 显示错误，如果您将别名更改为“_swal”，它应该可以工作

Answer 4

对于 SweetAlert2，您只需使用这一行来导入它：

import * as Swal from 'sweetalert2';

然后这样使用：

Swal.fire('Hello world!');

Answer 5

我不知道我刚刚做了什么，但显然，这就是编译器希望我做的，因为当我遇到同样的问题时它起作用了：

在文件“/node_modules/sweetalert/typings/sweetalert.d.ts”中，替换行
中的swal类型 "swal: SweetAlert" 与 "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;

Answer 6

当我删除存在于

中的简单代码行时，我就解决了这个问题

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

Answer 7

你可以试试

import Swal from 'sweetalert2'; 

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

Angular 7 的 SweetAlert

SweetAlert with Angular 7

sweetalert

angular