7

I am trying to get AlertifyJS (v1.9.0) to work in my angular 2 app. I have the following in vendor.ts

import "alertifyjs/build/alertify.min.js";
import "alertifyjs/build/css/alertify.min.css";

with the following call to alertify 

openConfirmationDialog(message: string, okCallback: () => any) {

    alertify.confirm(message, function (e: any) {
        if (e) {
            okCallback();
        } else {
        }
    });
}

but keep getting the error

: Cannot find name 'alertify'.
Tee-Jay
  • 736
  • 2
  • 9
  • 28

9 Answers9

4

OK folks, I got it working. it was as simple as just putting this line

var alertify = require('alertifyjs');

just immediately after my imports statements

Tee-Jay
  • 736
  • 2
  • 9
  • 28
3

Install package:

npm install alertify.js@^1.0.12 --save

and then you can use in your component by importing it in file,

import * as alertify from 'alertify.js';//import

alertify.logPosition('bottom right').log("Pattern Selected");//example

I specified version because i tested it with and its working fine for me. previous version was not working.

Abhijit Jagtap
  • 2,740
  • 2
  • 29
  • 43
1

I had the same problem.

By mistake I added css and js paths to "style" but for "test"

There are two "style" sections in the angular.json file :)

Ps Angullar 11 we don't need add services to app.module (providers array).

 "styles": [
          "./node_modules/alertifyjs/build/css/alertify.min.css",
          "./node_modules/alertifyjs/build/css/themes/bootstrap.min.css",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.less"
        ],
        "scripts": [
          "./node_modules/alertifyjs/build/alertify.min.js"
        ]
Energo-dom
  • 11
  • 1
0

alertify.js plugin file include index.html

import { Component, OnInit } from '@angular/core';
declare var alertify:any;

alertify message inside function.
alertify.success(response.msg);
Ram Pukar
  • 1,583
  • 15
  • 17
0

You can use

import alertifyjs from 'alertifyjs';

For this you have to install alertifyjs package

So use the below command

npm i alertifyjs
skillsmuggler
  • 1,862
  • 1
  • 11
  • 16
nick
  • 425
  • 4
  • 12
0

First you need to install it with npm install alertifyjs --save

Next you have to import the following in the angular.json file

"node_modules/alertifyjs/build/alertify.min.js" in the scripts array and

"node_modules/alertifyjs/build/css/alertify.min.css" and

"node_modules/alertifyjs/build/css/themes/default.min.css" in the styles array

You also need to import the alertifyjs in the component you have to use it. Write import * as alertify from 'alertifyjs'; at the top of the component to import it in your component. for eg: alertify.minimalDialog || alertify.dialog('minimalDialog',function(){ return { main:function(content){ this.setContent(content); } }; }); alertify.minimalDialog("Minimal button-less dialog.");

Community
  • 1
  • 1
cyperpunk
  • 664
  • 7
  • 13
0

It's through a two-step approach:

// import 
import alertifyjs from 'alertifyjs';

// set for global if you wish to use outside of this file (such as Laravel app.js)
window.alertify = alertifyjs;

If you only want to use in that file, just import and use as alertify.success() without setting as global variable.

Jonathan Bird
  • 313
  • 5
  • 19
0

For angular 11

npm install alertifyjs --save

and then on angular.json under styles array put these lines

"styles": [
    "node_modules/alertifyjs/build/css/alertify.min.css",
    "node_modules/alertifyjs/build/css/themes/bootstrap.min.css"
],

And then under on angular.json file under scripts array put this line.

"scripts": [
  "node_modules/alertifyjs/build/alertify.min.js"
]

After that create new service called alertify.service.ts

import { Injectable } from '@angular/core';
declare let alertify: any;

@Injectable({
  providedIn: 'root'
})
export class AlertifyService {

  constructor() { }
  
  confirm(message: string, okCallback: () => any) {
    alertify.confirm(message, function(e:any) {
      if (e) {
        okCallback();
      }
    });
  }

  success(message: string) {
    alertify.success(message);
  }

  error(message: string) {
    alertify.error(message);
  }

  warning(message: string) {
    alertify.success(message)
  }

  message(message: string) {
    alertify.message(message)
  }
}

Now register this service in app.module.ts at provider array

  providers: [
    AlertifyService
  ]

Now inject this service in your componenet.

Malik Haseeb
  • 471
  • 9
  • 20
0

First step install the alertify library

npm install alertifyjs --save

Import the alertify in your service

import alertifyjs from 'alertifyjs';

User this example code

  success(message: string) {
    alertify.success(message);
  }
Usama
  • 140
  • 5