ERROR ReferenceError: Q is not defined in Angular 11 project

Question

I have added a custom javascript file in my Angular 11 project (myCustomJS.js) that utilizes Q library.

However, I am getting "ERROR ReferenceError: Q is not defined" at below line of code in my javascript file.

Error : "ERROR ReferenceError: Q is not defined"

On Line : var deferred = Q.defer();

FYI, I have added following packages in package.config:

{
    "@types/q": "^1.5.4",
    "q": "^1.5.1",
}

I have added following in angular.json file:

"scripts": [
    "node_modules/q/q.js",  // Added reference to Q Library
    "src/assets/js/myCustomJS.js"   // My Custom Javascript File
]

Added following types in tsconfig.app.json file:

"types": [
    "jquery",
    "q" // Added q type definitions
]

Not sure if I am missing any more reference(s) in my Angular 11 project. Please suggest how to fix Q is not defined error.

Answer 1

I was able to resolve “Q not defined” issue by commenting 2 lines (Line# 46 and 47 - else if block) in /node_modules/q/q.js file (see below screenshot). Due to those 2 lines, it was not able to define Q as global variable, as specially when it finds RequireJS. Once commented, it falls into another else if block where it defines Q global variable.

Here are couple of articles and different solutions related to this issue:

• Running Q on page with Require.js
• How to load Q library with Require.js