Using Sweet alert with the Typescript class

Question

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

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

I am trying to convert this to use Sweet Alert, so inside the method I just put this. But typescript does not recognize this. He throws awayCannot find name swal

swal("hello");

I imported the sweet warning 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()only in a simple *.jsfile, it will work fine. This only happens when it is in the file *.ts.

Answer 1

Typescript

typescript . .ts :

import * as swal from 'sweetalert';

,

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
   }
});

docs.

npm

sweetalert npm

npm install sweetalert --save

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

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

, js css index.html.

swal(..) is not a function

js .

CLI aurelia

aurelia.json.

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

app.html

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

Answer 2

@TomAalbers, Angular 5 sweetalert, . 5, :

import * as swal from 'sweetalert';

:

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

,

, Angular CLI, - dev. , v6.0.0-beta.4

Answer 3

You should import this into the top of your class:

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

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