Adding css-element-queries to an angular 6 project

I am currently attempting to install and utilize the css-element-queries library.

To install, I executed the following command:

npm i css-element-queries

Following that, I attempted to import the ResizeSensor class from the library in this manner:

import { ResizeSensor } from 'css-element-queries';

Unfortunately, I encountered an error with the compiler:

An issue arose stating: Could not find a declaration file for module 'css-element-queries'. The path 'c:/PrjNET/Elevation3/FW/4.00/Mainline/Framework/Development/Client/ElevationJS/ngcore/node_modules/css-element-queries/index.js' is implicitly assigned an 'any' type. Consider using 

npm install @types/css-element-queries
or adding a new declaration file (.d.ts) containing `declare module 'css-element-queries';

In response to the error message, I ran the following npm command:

npm install @types/css-element-queries

However, another error was returned by the compiler:

The npm command returned a code of E404, indicating that @types/css-element-queries@latest could not be found.

How can I successfully import the css-element-queries library?

angulartypescriptnpm

Answer №1

While I am not familiar with Angular, I recently encountered a situation where I needed to import ResizeSensor into a typescript-based application. Interestingly, I discovered that the ResizeSensor.d.ts file included in the css-element-queries package was incorrect. As a result, I took it upon myself to report this issue on gitHub.

In my quest to find a solution, I delved into the world of module types and learned about creating typings files from the typescript documentation.

This exploration ultimately led me to the correct way of defining the typings file for ResizeSensor. I simply had to modify the export line from:

export default ResizeSensor;

to 

export = ResizeSensor;

By making this adjustment, I was able to successfully import ResizeSensor using the following syntax:

import ResizeSensor = require('Libs/css-element-queries/ResizeSensor');

It's worth noting that your path to css-element-queries may vary since you might not be able to retrieve it from npm until the .d.ts file is fixed by the package maintainer.

For further information, you can refer to the github issue linked here.

Answer №2

Even though there isn't an official typings package available yet, I've managed to successfully utilize the css-element-queries package by including these imports:

import * as ElementQueries from 'css-element-queries/src/ElementQueries';
import * as ResizeSensor from 'css-element-queries/src/ResizeSensor';

Although Atom continues to throw info warnings regarding the absence of a declaration file, the functionality still remains intact. Hopefully, this solution proves helpful!

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

Tips for Optimizing Typescript Queries to SQL Server

In my C# application, I have the following function: foreach (var p in proglist) { programData.GetData1= new List<GetData1_ViewModel>(GetData1(programid, reportingdate)); programData.GetData2= new List<GetData2_ViewModel>(GetData2(programid ...

javascripttypescript

Organizing Activities in Angular Version 5

Looking for an event calendar solution for Angular 5 After thorough research, I came across FullCalendar. However, I encountered several issues while trying to implement it in my Angular project 5. Is there any alternative to FullCalendar that is compati ...

angulartypescriptfullcalendarangular-cliangular5

TypeScript multi-dimensional array type declaration

I currently have an array that looks like this: handlers: string[][] For example, it contains: [["click", "inc"], ["mousedown", "dec"]] Now, I want to restructure it to look like this: [[{ handler: "click" ...

javascripttypescript

Can Angular Universal help pinpoint the location of a window reference error?

My Angular Universal project was running smoothly until I added a significant amount of code and included some external npm libraries like Quill. Now, I am encountering a Reference error related to the window object. It seems that every time I reference wi ...

angularnpmangular-universalangular-ngselectngx-quill

What is the approach to merge an inner observable in RxJs with the outer observable and produce a single array as output

Whenever I execute the following code: timer(1000).pipe( expand(() => of('a')), take(3) ) .subscribe(data => alert(data)); I receive three alerts: one with 0, another with 'a', and a third one also with 'a'. I wo ...

angularrxjsexpand

Ensuring proper extension of Request headers in Typescript

I am having trouble retrieving the userId from req.headers, how can I fix this issue? Initially, I attempted the following: interface ISpot{ thumbnail: File, company: string, price: number, techs: string } interface IReqCustom<T& ...

node.jstypescriptexpresstypesbackend

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

javascriptreactjstypescriptreact-typescript

Modifying the text hues within the selection

Looking for a way to style the 'Type' in blue and the '*' in red using CSS? Check out the code below: <option value = '' disabled selected><span style="color:blue">Type </span><span style="col ...

htmlcssangulartypescript2.0

What are the steps to fix the Maximum call stack size exceeded error in gitbook-cli?

After setting up a Ubuntu 18 server, I installed Node.js, npm, and gitbook-cli. Here are the version details: node -v: v8.10.0 npm -v: 3.5.2 gitbook --version: CLI version: 2.3.2<br>GitBook version: 3.2.3 You can find my gitbook repository here: ...

node.jsnpmgitbook

Challenges with bundling in Angular 2 using webpack

Here is the content of my package.json file with the dependencies for webpack included. I am unsure if my dependencies and scripts are set up correctly. When I run npm start, it initiates the bundling process and launches the angular2 project in the browse ...

node.jsangularwebpackbundling-and-minificationtypescript-typings

What are some ways to resolve this console error: "TS2307: Could not locate module '@components/common/ButtonBlock' or its corresponding type declarations."

While the project is running smoothly, I am noticing a multitude of errors appearing in the console of VS Code. How can I eliminate these error messages? It seems to be related to TypeScript. Additionally, I am encountering an error in the browser as well ...

reactjstypescript

Struggling to retrieve variable within the .catch function in Ionic 3

I am having trouble accessing the toast variable from the constructor in order to toast errors. It keeps showing as undefined, and I'm not sure why. This issue seems to only occur in this class, which is strange. The error message reads "ERROR TypeErr ...

angulartypescriptionic3

Tips for presenting random images from an assortment of pictures on a webpage

I'm looking to enhance my website by adding a unique feature - a dynamic banner that showcases various images from a specific picture pool. However, I'm unsure of how to find the right resources or documentation for this. Can you provide any guid ...

javascripthtmlcssangular

Applying Validators manually in Angular 2 beta 17

We are currently working on a legacy project that needs to be maintained until the final version with angular-final is deployed. Once we upgrade to the final version, I will be able to easily apply conditional Validators using: this.myForm.controls[&apos ...

validationangulartypescriptangular2-forms

An error has occurred in the tipo-struttura component file in an Angular application connected with a Spring backend and SQL database. The error message indicates that there is a TypeError where the

Working on my project that combines Spring, Angular, and MYSQL, I encountered a challenge of managing three interconnected lists. The third list depends on the second one, which in turn relies on user choices made from the first list. While attempting to l ...

mysqlarraysangularspring-bootonchange

Angular refreshes outdated DOM element

Within my Angular (v9) application, I have a simple component. The main goal of this component is to display the current date and time when it is first shown, and then after a 2-second delay, enable a button. Here's the code snippet from app.component ...

angular

What is the significance of var-less variables in TypeScript class definitions?

Why is it that when creating a component class in Angular2, we don't need to use var when declaring a new variable? For example: @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> ` }) export class AppCo ...

typescriptangularvariable-declaration

Warnings popped up unexpectedly when trying to load the module

Recently, I have incorporated a module from npm called "jwerty" into my project. While it functions correctly, I am encountering numerous warnings in the console. These warnings look similar to the examples below. Currently, my setup involves webpack@1 and ...

npmwebpack

Using Angular: Passing a service as a parameter

I have a desire to improve the organization of my code by moving certain functions into an external file and accessing them from multiple components. These functions rely on a service: The MyFunctions Class import { Service1 } from "../_services&quo ...

angulartypescriptservice

Steps for defining a function in AngularJS

I created a function and implemented it in the following manner: JavaScript : function updateInstitution (isValid) { alert('hi'); if (!isValid) { $scope.$broadcast('show-errors-check-validity', 'vm.form.institutio ...

javascriptangularjsangular