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.

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.

• javascript
• jquery
• sweetalert

• You need to get the type definitions so that the TypeScript compiler will recognize it. – Mike Cluck Commented Aug 15, 2016 at 16:36
• @MikeC just installed them but still won't recognize it – user3325783 Commented Aug 15, 2016 at 17:29
• @Jimenemex did you fixed it? – Zack Kaytranada Commented Sep 6, 2016 at 14:20
• @ZackKaytranada No I wasn't able to fix it – user3325783 Commented Sep 12, 2016 at 18:27

5 Answers 5

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>

We can't use the function swal({...}) but we can use the second overload of Swal.fire({...}) method, casting the parameters to SweetAlertOptions... My code looks like this...

import Swal, {SweetAlertOptions} from 'sweetalert2';
Swal.fire({
        title: 'Are you sure?',
        text: 'You won\'t be able to revert this!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      } as SweetAlertOptions).then((result) => {
        if (result.value) {
           //Do something here
        }
      });

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

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

Typescript

In this way working for me, I am using angular 7 and sweetalert2.

Installation

• npm install sweetalert2

OR

• <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

.ts

   openDateDialog() {
    swal({
      html: '<h1>Sweet2 with angularJS</h1>',
      showConfirmButton: true,
      customClass: 'swal2-overflow'
    }).then(function(isConfirm){ if (isConfirm) {
      console.log('confirm, do any function');
    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }});
  }

.html

<mat-select [(value)]="dateselected" (selectionChange)="onChangeDate(dateselected)">
            <mat-option value="0" (click)="openDateDialog()" >Sur-Mesure</mat-option>
            <mat-option value="thisMonth" >Ce mois-ci</mat-option>
            <mat-option value="all" >Toute la période</mat-option>
          </mat-select>