Using Sweet alert with Typescript class

问题

I have a method inside a typescript class that just looks like this

    var confirmation = confirm("Run Agent Job?");
    if (confirmation) {
        console.log('yes');
    } else {
        console.log('no');
    }

I'm trying to convert this to use Sweet Alert, so inside the method I just put this. But Typescript doesn't recognize this It throws a Cannot find name swal

swal("hello");

I have imported sweet alert as follows

<link href="~/Content/css/sweetalert.css" rel="stylesheet" />
<script src="~/Scripts/sweetalert.min.js"></script>

What am I doing wrong? If I try to use swal() in just a plain *.js file, it'll work fine. It's only when it's in a *.ts file.

回答1:

Typescript

I got it to work with typescript the following way. In the top of your .ts file use:

import * as swal from 'sweetalert';

Then use the function like this

swal({
  title: "Are you sure?",
  text: "You will not be able to undo this action",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: true
},
confirmed => {
   if(confirmed) {
       // Do what ever when the user click on the 'Yes, delete it' button
   }
});

You can find more examples in the docs.

Installation via npm and typings

I installed the sweetalert package the via npm

npm install sweetalert --save

and the typings

// the old way
typings install dt~sweetalert --save --global 

// new way
npm install --save @types/sweetalert

After this, make sure you have included the js and the css file in your index.html.

If you get the following error

swal(..) is not a function

then you have not included the js file properly.

For aurelia CLI users

You can add the following to your aurelia.json.

      {
        "name": "sweetalert",
        "path": "../node_modules/sweetalert",
        "main": "dist/sweetalert.min",
        "resources": [
          "dist/sweetalert.css"
        ]
      },

and in app.html use

<require from="sweetalert/dist/sweetalert.css"></require>

回答2:

In addition @TomAalbers answer, there is a bug with Angular 5 and sweetalert which will also cause this error. If you are using angular 5, then you can't use:

import * as swal from 'sweetalert';

Instead you need this ugly work around:

import * as _swal from 'sweetalert';
import { SweetAlert } from 'sweetalert/typings/core';
const swal: SweetAlert = _swal as any;

Credit where it's due

This seems to be related to this bug in Angular CLI where default exports are handled differently in dev. They seem to have fixed it in v6.0.0-beta.4

回答3:

You have to import this in top of your class:

import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'

and don´t forget to add this in your app.module.ts file

来源：https://stackoverflow.com/questions/38958932/using-sweet-alert-with-typescript-class

标签

javascript

jquery

sweetalert