CODEWITHSUNDEEP
angularangular5frontendsweetalertsweetalert2
dEs12ZER
dEs12ZER

Reputation: 848

sweetalert_1.default is not a function : Angular 5

I'm about discovering SweetAlert in the official link , so i wanted to use it in my app angular5 .

i have installed it this way : 

npm install sweetalert --save

I have imported it in my component : edit-client.component with this : 

  import swal from 'sweetalert';

Here is the file editClient.component.ts where i tried to use it :

import swal from 'sweetalert';

Component({
  selector: 'app-edit-clients',
  templateUrl: './edit-clients.component.html',
  styleUrls: ['./edit-clients.component.scss']
})
export class EditClientsComponent implements OnInit {

EditClient(){
    this.clientService.updateClient(this.client)
      .subscribe(data=>{
        console.log(data);

        swal('mise a jour effecture !');

        this.router.navigate([ '../../../list' ], { relativeTo: this.activatedRoute });
        },err=>{
        console.log(err);
        alert("Probleme");
      })
  }


}

But while running this exemple , i can't see the alert and i get an error instead : 

RROR TypeError: sweetalert_1.default is not a function
    at SafeSubscriber.eval [as _next] (edit-clients.component.ts:39)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:240)
    at SafeSubscriber.next (Subscriber.js:187)
    at Subscriber._next (Subscriber.js:128)
    at Subscriber.next (Subscriber.js:92)

What i'm doing wrong ?

Upvotes: 2

Views: 1900

Answers (2)

sh6210
sh6210

Reputation: 4540

In my case, I was importing from 'sweetalert'. Once i correct the import statement, the problem was gone.

The correct import line was.

import swal from "sweetalert2";

Upvotes: 0

dEs12ZER
dEs12ZER

Reputation: 848

For those who faced the same problem i imported instead :

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

And used then : 

swal('hello world');

this fixed the issue.

Upvotes: 7

Related Questions