Angular-cli is encountering an Uncaught ReferenceError with global variables in Karma

My Angular 4.0 project was created using angular-cli 1.0.

I am utilizing global variables such as API endpoints that change based on the environment during deployment through Octopus Deploy.

global-tokens.js

var apis = {
    foo: 'http://foobar.foo'
}

Everything works fine when served locally or in upper environments, except when running unit tests.

I have already attempted to include global tokens js in the "files" node in tsconfig.spec.json, in addition to "assets" and "scripts" in .angular.cli.json.

However, when running ng test, I encounter:

Uncaught ReferenceError: apis is not defined

Upon further investigation, I noticed that global-tokens.js is not being included in index.html while debugging tests.

Any suggestions on how I can ensure that file is present in my testing environment?

edit: added scripts attempt

angulartypescriptglobal-variableskarma-jasmineangular-cli

Answer №1

To set up the configuration in karma.conf.js, you will need to include global-tokens.js file (make sure to specify the correct path) in the files array.

Make sure your karma.config.js file looks like this:

config.set({
   ..
   files: ['global-tokens.js']
   ..
});

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

Finding keys corresponding to specific values in an object using Typescript

I have a straightforward scenario in mind. I am looking to create a function called pluckOnlyStringValues that takes an object obj and a key. The main requirement is that the key passed should correspond to a string value in the object, ensuring that pluck ...

typescripttypescript-genericstypescript-utility

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

My issue revolves around an external JS library that contains a global parameter: function Thing() { ... } ... var thing = new Thing(); I have a TypeScript definition file named thing.d.ts with the following content: declare var thing: ThingStatic; ex ...

javascripttypescripttypescript-typings

Weird occurrences in Typescript generics

function resizeImage<T extends File | Blob>(input: T, width: number, height: number): Promise<T> { return Promise.resolve(new File([new Blob()], 'test.jpg')) } Error: (48, 3) TS2322:Type 'Promise' is not assignable to ...

typescript

What is the best way to generate a switch statement based on an enum type that will automatically include a case for each enum member?

While Visual Studio Professional has this feature, I am unsure how to achieve it in VS Code. Take for instance the following Colors enum: enum Colors { Red, Blue, When writing a switch statement like this: function getColor(colors: Colors) { swi ...

reactjstypescriptvisual-studio-codeenumsvscode-snippets

Is it possible to assign a type conditionally depending on the value of a boolean?

While grappling with this issue, the title question arose in my mind: How can I handle the situation where the library function getResponse returns { a: number } for Android phones and { b: number } for iOS phones? The code snippet below initially led to ...

javascripttypescript

How can I uniquely combine a code with an existing CSS class and make modifications to it?

I am using ngx-skeleton-loader and I would like to change the color, but I am facing some difficulties. Here is an image that illustrates the issue. When looking at the developer tools, you can see the styles action in the styles action bar. .loader ...

javascriptnode.jsangulartypescript

Tips for saving multiple pieces of data in a single field with Laravel

Is it possible to save multiple data at once using a simple form? controller $status= new PostTable(); $status->language = $request->language; blade <input type="checkbox" value="hindi" name="language[]" id="language"> Hindi model pro ...

phpjsonangularlaravel

Experimenting with retrieving input from other components while implementing setTimeout

In continuation of the previous question (linked here), I am still working on tutorials for Angular testing using the same files. The current issue revolves around the setTimeout function. Within both ngOnInit and ngAfterViewInit, I have included a setTim ...

angulartypescriptunit-testingkarma-runner

Switch the Follow/Following button depending on the user's current follow status with the individual

I am currently working on a functionality to toggle between the Follow and Following buttons based on whether the current user is following another individual. I have implemented an NgIF statement in my code, but I am facing challenges in properly checking ...

htmlangularjstypescriptparse-platformionic2

The Angular Universal error arises due to a ReferenceError which indicates that the MouseEvent is not

I am encountering an error while trying to utilize Angular Universal for server-side rendering with the command npm run build:ssr && npm run serve:ssr. This is being done in Angular8. /home/xyz/projects/my-app/dist/server/main.js:139925 Object(tslib__WEB ...

javascriptnode.jsangulartypescriptruntime-error

Converting a string into an array of objects using Angular TypeScript

Can anyone help me with converting the following string into an array of objects? {"Car": "[" {"Carid":234,"CompanyCode":null}"," {"Carid":134,"CompanyCode":"maruti"}"," {"Carid":145,"CompanyCode":"sedan"}"," "]" } I attempted using JSON.parse, ...

jsonangulartypescript

Encountering Typescript issues while trying to access @angular/core packages

Recently, I made an update to my Ionic app from Angular 7 to Angular 8, and an odd error popped up: https://i.sstatic.net/icZOb.png The issue lies in the fact that I am unable to access any of the standard classes stored in the @angular/core module. This ...

angulartypescriptvisual-studio-code

What could be the reason for Angular Router to receive query parameters twice?

I have an application that consists of two pages with lists. On Page A, clicking on an item will display the corresponding detail page. The detail page contains a list of sub-items, and clicking on any sub-item navigates to Page B with the sub-item's ...

htmlangulartypescriptangular-router

Creating a TypeScript interface that inherits properties from another interface is a powerful way to define

My question pertains to a programming interface I have created called PersonInterface. Within this interface, I have included a property called 'address' which has a type of AddressInterface - another interface that I have defined. I am wondering ...

classtypescripttypesinterface

Can someone please provide instructions on dynamically adding bootstrao col-lg {n} based on the length of a record?

Here is the desired outcome: 1. If there is only one record, it should be displayed as "col-lg-12". 2. In the case of 2 records, they should be represented as "col-lg-6" & "col-lg-6". 3. For 3 records, use "col-lg-4" & "col-lg-4" & "col-lg-4 ...

angularbootstrap-4

Adaptively linking to the property of a deeply nested object

Attempting to bind to a property of a nested object using [(ngModel)], but facing the challenge that the path to the property is dynamically set. Consider the following three classes: class A { p1: C constructor() { p1 = new C("A") } } class B { p2: ...

javascriptangulartypescriptangular-ngmodel

Filtering incoming data from a Firestore database: A step-by-step guide

I'm facing a challenge while trying to incorporate this filtering mechanism into my code. FILTERING An issue arises when I attempt to implement the following lines of code: function search(text: string, pipe: PipeTransform): Country[] { return CO ...

javascriptangularfirebasegoogle-cloud-firestoreangularfire2

Extracting Table(Array) Index into a Component in Angular

For my data on the HTML page, I created a 2-dimensional array. <tbody> <tr *ngFor="let i of myarray2"> <td *ngFor="let j of i"> {{j}} </td> </tr> </tbody> This is how it appears: https://i.sstatic.ne ...

htmlnode.jsangulartypescript

After calling the PHP API, the http.get method in Ionic 2 is returning a value of isTr

Even though a similar question has been posted before, I am still puzzled about why I am receiving: 'isTrusted': true every time I call a PHP API from Ionic 2. The code I am using is as follows: getProduct(id: string){ if(this._product){ con ...

phpjsonangularxmlhttprequestionic2

Problem with Scroll Listener on Image in Angular 4: Window Scroll Functioning Properly

Hello, I am a newcomer who is currently working on creating a small application that allows users to zoom in on an image using the mouse scroll. <img (window:scroll)="onScroll($event) .....></img> The code above works well, however, it detec ...

javascripthtmlangularscroll