CODEWITHSUNDEEP
angularalertifyjs
Rika
Rika

Reputation: 353

Alertify Error "ReferenceError: alertify is not defined " in Angular 6

I try to use alertify.js in my project .So I followed this material https://signl.uk/tutorial/index/notify-service-with-angular-5. But I got a error ReferenceError: alertify is not defined when click button in my application.

alertifyjs css and js files I add into angular.json file.

![enter image description here

alertify.service.ts

![enter image description here

Help me for identify my mistake.

Edit

I import AlertifyService in component.ts file as private alertify: AlertifyService and In app module import { AlertifyService } from './services/alertify.service'; and added AlertifyService in provider as providers: [AlertifyService]

I use alertify in my login component

login.component.ts

login(){
let email = this.loginForm.get("email").value;
let password = this.loginForm.get("password").value;
this.loading = true;
this.authService.login(email, password).subscribe(response => {

  this.alertify.success('Successfully Login');

  this.loading = false;

  // Save data to sessionStorage
  localStorage.setItem('isLoggedIn', "true");
  localStorage.setItem('currentUserID', response.user.uid);
  this.router.navigate(['/dashboard'])
}, error => {
  this.loading = false;
 });
}

Upvotes: 4

Views: 10951

Answers (3)

posix
posix

Reputation: 33

In my case, instead of alertifyjs I used alertify.js on both styles.css and angular.json.

@import "~alertify.js/build/css/themes/bootstrap.min.css"; 

"./node_modules/alertify.js/build/alertify.min.js"

Upvotes: 0

Alper Kuyucu
Alper Kuyucu

Reputation: 29

you should add to scripts section under the build part.Probably you are adding test section.(in angular.json)

"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/shop",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "aot": false,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/alertifyjs/build/alertify.min.js"

        ]
      },

Upvotes: 2

Rika
Rika

Reputation: 353

  1. Restart server.

  2. If get error like

    no such file or directory, open 'D:\testProject\node_modules\alertifyjs\build\alertify.min.js'

then Change

"../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/alertifyjs/build/css/alertify.min.css", "../node_modules/alertifyjs/build/css/themes/bootstrap.min.css",

to 

"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/alertifyjs/build/css/alertify.min.css",
"./node_modules/alertifyjs/build/css/themes/bootstrap.min.css",

Upvotes: 3

Related Questions