An error has occurred: Noty (notification library) is not defined in this AngularJS Web Application

I am currently diving into the world of AngularJS and building a web application from scratch. As a newbie to AngularJS, I want to point out that I might be missing something crucial.

An issue has arisen:

After installing the Noty library (npm install noty), I implemented some code for a basic Noty dialog:

var confirmSubmit = new Noty({
    text: 'Your feedback has been submitted!',
    buttons: [
        Noty.button('Close', 'btn btn-default', function() {
            confirmSubmit.close();
        })
    ]
});

This code resides in an already integrated JavaScript file separate from the main app.js. Here's the structure:

(function() {
    var app = angular.module('JStest-reviews', []);
    ...
})();

However, upon launching the web application in Chrome, I encountered the following error in the console:

Uncaught ReferenceError: Noty is not defined

The official documentation () provides minimal guidance on prerequisites beyond installing Noty and creating a Noty object. I've attempted using statements like:

import Noty from 'noty'; or const Noty = require('noty'); before instantiating the object, but none have resolved the error.

Since my web app was built from scratch, there isn't an automatically generated package.json file. I'm wondering if including specific code in there could help resolve this issue (currently, my manually created package.json only contains basic information like name and version).


Any suggestions or solutions would be greatly appreciated.

Your assistance and time are valuable. Thank you.

Answer №1

Answer provided by @Phil:

Make sure that the Noty script inclusions have the correct path to the Noty library files.

For example, my fix was:

<link href="node_modules/noty/lib/noty.css" rel="stylesheet">
<script src="node_modules/noty/lib/noty.js" type="text/javascript"></script>

Instead of using:

<link href="lib/noty.css" rel="stylesheet">
<script src="lib/noty.js" type="text/javascript"></script>

You can find more information in the official documentation here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Utilizing Ionic version 2 to initiate a function from the calling page within a provider

I am facing an issue where I need to call a function (f1) from a provider and then from that function (f1), call another function on the page. Here is the code for page1.ts: import { Component } from '@angular/core'; import { NavController } ...

There are various IDs in the output and I only require one specific ID

I have a JSON fetcher that is functioning properly. However, whenever I request an ID, it returns all the IDs present in the JSON data. Is there a way to retrieve only the latest ID? This is my first time working with JSON so I am still learning. $(docu ...

Is it possible to have separate ports for front-end and back-end in NODEJS?

As I develop my NodeJS website, incorporating both front-end and back-end components, it is recommended to organize the files in such a way that the front-end specifically requests data from the back-end via an API. I am curious whether it is considered a ...

Obtaining the latest record ID from MySQL using node.js

I am currently working on a project where I need to add new user information to a MySQL database. I'm looking for a way to retrieve the ID of the most recently added record so that I can create login details for the user. The environment in which this ...

Issue encountered during installation of mongojs in nodejs is as follows

Encountering an error while attempting to download MongoDB. Any advice you could offer? https://i.stack.imgur.com/UwvgF.png Managed to fix some Python setup errors, but still facing issues with Kerberos. Assistance would be greatly appreciated. https:// ...

A JavaScript async function that can be activated either by clicking the search button or by hitting the "enter" key in the input field

Recently, I've been working on an async function in Vanilla Javascript that is triggered by a click event on the search button. However, I would like to modify it so that the function can also be initiated when the "enter" key on the keyboard is press ...

Retrieve the directory path to the npm module folder that does not have a main file specified

What is the process for obtaining the path to the directory where an npm module is located? I attempted to use require.resolve, but encountered the following error: Error: Cannot find module 'bower-strapless'. (despite having already install ...

Issue with Vue plugin syntax causing component not to load

I'm facing an issue with a Vue plugin that I have. The code for the plugin is as follows: import _Vue from "vue"; import particles from "./Particles.vue"; const VueParticles = (Vue: typeof _Vue, options: unknown) => { _Vue. ...

I am having trouble with searching for places using the Google API in my Node

Recently, I've been working on integrating the Google Maps API places feature into my project. Thankfully, I came across an npm module that simplifies the process of connecting it to node. Check out the npm module here! After downloading the module ...

Clearing the filename in a file type input field using React

When using this input field, only video files are accepted. If any other types of files are uploaded by enabling the "all files" option, an alert will be displayed. While this functionality is working correctly, a problem arises if a non-video file is adde ...

Transferring a PHP session variable to JavaScript in a separate file

I successfully imported data from a CSV file into PHP and organized it into a nested array. To ensure the data is easily accessible across different files, I stored the array as a session variable. Now, the challenge lies in accessing this session variable ...

Error: npm is not found in the Ubuntu 12.04 LTS installation

pp@pp-desktop:~$ sudo apt-get install npm Package lists have been read and processed successfully. Dependencies are being resolved and the state information is being read. However, it seems that there are some packages that could not be installed. This ...

A new option to replace package.json, specifically tailored for globally installed npm packages

My project has a standard package.json file that lists the packages being used. In addition to these packages, I need to install some global packages. Rather than doing this manually every time, I'd like to have them listed in a separate file called ...

Testing a Jest unit on a function that invokes another function which in turn returns a Promise

I have a function that triggers another function which returns a Promise. Below is the code snippet for reference: export const func1 = ({ contentRef, onShareFile, t, trackOnShareFile, }) => e => { trackOnShareFile() try { func2(conte ...

What is the best way to incorporate JavaScript code as React syntax?

For my project, I am using the OpenLayers API Map. I'm unsure of the correct way to incorporate JavaScript code in React or vice versa. Here is an answer on how to use markers in the map, but I am struggling to implement it in my current code since I ...

The Chrome extension functions properly when the page is refreshed or loaded, but it does not work with internal navigation

When landing on a YouTube page starting with w*, I have a script that triggers an alert with the URL. However, this only works when entering the page directly or upon refreshing. I am trying to make the alert trigger when navigating internally to that page ...

Issues with installing mongoose on Windows 7 using npm

Struggling to set up mongoose on Windows 7, I've exhausted all resources on Stack Overflow related to my issues with no success. Upgraded npm version to 2.4.1 If anyone can offer assistance, it would be greatly appreciated. Here is the error log: F ...

How can I retrieve a specific key from a nested array while using ng-repeat to iterate through it

I have successfully created a code snippet that retrieves JSON data and displays it in HTML using AngularJS. <div class="activity" ng-app="stream" ng-controller="streamCtrl"> <ul ng-repeat="x in myData"> <p class="au ...

Update an existing JSON document

Looking for a solution to update the json file while retaining specific strings and values? const fs = require('fs'); var logPath = 'log.json' var logRead = fs.readFileSync(logPath) var logFile = JSON.parse(logRead) LogChannel = &apo ...

The Kudu console is freezing up during the npm install process

I have been experimenting with Azure Functions and wanted to incorporate some dependencies into my code. I followed the instructions provided HERE. However, after running 'npm install' and waiting for an extended period of time, the Kudu console ...