Importing related @Types in Angular libraries

I'm currently in the process of developing a small npm package collection that includes some helpful utilities for Jasmine testing. The code can be found on my GitHub page https://github.com/DrMueller/MLAH.Testing. At this point, it consists of only 2 functions and a type. I've encountered a bit of confusion regarding how d.ts files are imported: Based on the official documentation:

By default, all visible "@types" packages are included in your compilation. Packages located in node_modules/@types within any parent directory are considered visible; specifically, those within ./node_modules/@types/

This means that creating a type like

     export type SpyOf<T> = {
       [Method in keyof T]: jasmine.Spy;
     };

My assumption was that removing typeRoots would make the jasmine typings accessible, but I still encounter

Error TS2503: Cannot find namespace 'jasmine'.

Taking into consideration other options like include or types, as per the documentation they limit the discovered typings, so omitting them should include all types in node_modules/@types.

The only solution that has worked thus far is manually adding it to each file like so:

/// <reference path="../../node_modules/@types/jasmine/index.d.ts" />

While this resolves the compilation issue, it causes an exception when the npm package is not in the same relative folder as the code.

Am I overlooking something here, or is jasmine a special type of module?

Answer №1

When I first encountered this issue, I was concerned that solving it would involve specific expertise in Angular - something I lacked. However, upon closer inspection, I realized that the problem lies within the angular.json file referencing src/tsconfig.app.json. By executing tsc -p src/tsconfig.app.json, I was able to replicate the issue successfully.

To resolve this issue, simply remove the "types": [] line from src/tsconfig.app.json. This particular line disables the automatic loading of all visible @types packages.

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

Directive does not support the new animations in Angular 2 RC 4

It appears that in the current release, we are only able to add animations to components and cannot define them as directives. For example: The following code works: @Component({ selector: "animate-demo", animations: [ trigger('openC ...

Is it still necessary to include /// reference path=" in TypeScript 2.0?

Do you still need to use /// reference path="" in TypeSctipt 2.0, like this: ///<reference path="../../../../typings/app.d.ts"/> or does TS now search all directories specified in tsconfig? I would appreciate a detailed answer... Thanks, Sean ...

Exploring the functionalities of FormArray in Angular 2.4

Currently working with Angular 2.4, I am trying to create dynamic forms using "FormArray." However, my HTML does not seem to recognize my arrays at all, resulting in an error message as follows: caused by: Cannot find control with name: '0' Type ...

Using Ng-bootstrap modal to display content from a separate component

Currently in the process of building a web app with the MEAN stack, I've been encountering issues while trying to implement the modal feature of ng-bootstrap. My goal is to display a registration modal when a user clicks on the register option within ...

Troubleshoot: ng-bootstrap Carousel Functionality Issue

While testing the various components on ng-bootstrap, I encountered an issue with getting the carousel to work. Strangely enough, all the other ng-bootstrap components are functioning perfectly. Upon implementing the code from https://ng-bootstrap.github.i ...

Is it acceptable to include a @types library as a regular dependency in the package.json file of a Typescript library?

Should the library also be compatible with Typescript projects? I am developing a Typescript library that utilizes node-fetch and @types/node-fetch, which will be shared through an internal NPM registry within the company. If I only include @types/node-f ...

In Angular, use the ngFor directive to iterate through items in a collection and add a character to each item except

Currently, I am iterating through my data list and displaying it in the view using spans: <span *ngFor="let d of myData"> {{d.name}}, </span> As shown above, I am adding a comma ',' at the end of each item to ensure a coherent displ ...

My application is functioning properly, yet Angular keeps throwing an error

I created a data filtering pipeline that functions perfectly, but I am encountering an error. Why is this happening? The error message: ERROR TypeError: Cannot read property 'filter' of undefined at FilterPipe.push../src/app/filter.pipe.ts. ...

Angular 6 form validation for input fields

I have 3 input fields that are required, but I want to implement a logic where if one of them is filled, the other two should not be required anymore. I have managed to get this working, but the issue arises when I fill out the form and then remove the val ...

Verify the type without making any assumptions about the checked type

Take a look at this type definition: interface ISmth<T> { id: number; data: T; } Now, I am interested in creating an array that contains elements of this type: var a = [{ id: 1, data: [], }, { id: 2, data: 4, }, { id: 3, data: "abc ...

Having trouble with enzyme in React Typescript application

One of my components is called app.tsx import React, { useState } from "react"; const TestComponent = () => { return( <> <div className="head">hey there</div> <select name="xyz" id=&qu ...

How to process response in React using Typescript and Axios?

What is the proper way to set the result of a function in a State variable? const [car, setCars] = useState<ICars[]>([]); useEffect(() =>{ const data = fetchCars(params.cartyp); //The return type of this function is: Promise<AxiosRespo ...

Can you explain the concept of a type object in typescript?

Can you explain the concept of the type object and its use? Some say it's like a blackbox. Which approach is better, A or B, when dealing with a parameter that may have unknown types of object keys? A const modifyData: (data: object) => void = da ...

Retrieve the component's name using ReactElement.type.name

In my current project, I am working with React and Typescript. I need to retrieve the name of a functional component, which I have discovered can be accessed through the 'type' property of the component like this: component.type.name. Initially, ...

Warning: Node encountering unexpected Unhandled Promise Rejection ERROR

I've encountered a problem in my code that is triggering an UnhandledPromiseRejectionWarning in Node, but I'm struggling to understand the root cause. Here's a simplified version of the code: export class Hello { async good(): Promise<s ...

Using TypeScript to asynchronously combine multiple Promises with the await keyword

In my code, I have a variable that combines multiple promises using async/await and concatenates them into a single object const traversals = (await traverseSchemas({filename:"my-validation-schema.json"}).concat([ _.zipObject( [&quo ...

The database did not respond, causing the API to resolve without sending a response for the specified endpoint (/api/dates). This could potentially lead to requests becoming stalled in Next

I have been attempting to retrieve a list of dates from my database in a straightforward manner, but unfortunately, I am not receiving any response (even after trying to log the response data to the console). The only feedback I seem to be getting when sel ...

Tips for adjusting the focus effect of mat-icon-button

I am encountering an issue with a button on my page. Here is the code for the button: <button mat-icon-button color="black" style="height: 21px; bottom: 8px;" *ngIf="!transaction.HasMatch" (click)="matchPayable($event, ...

Adding support for Typescript in Leaflet plugins is a useful feature that can enhance the

I'm currently working on integrating TypeScript support for the Leaflet Plugin found here: https://github.com/yakitoritabetai/Leaflet.LabelTextCollision Is there anyone familiar with how I can accomplish this task? I've been attempting to create ...

Is it possible to modify the output type of a function depending on a parameter's characteristic?

In my code, I have a custom utility function that wraps document.querySelector function querySelector<T extends HTMLElement>(selector: string) { return document.querySelector<T>(selector); } I modified it to include an option to throw an e ...