CODEWITHSUNDEEP
angulartypescriptnpm
Ricardo Rocha
Ricardo Rocha

Reputation: 16276

Importing css-element-queries to an angular 6 application

I'm trying to install and use the css-element-queries library.

For installing, I used the following command:

npm i css-element-queries

After that, I tried to import the class ResizeSensor from the library like this:

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

But the compiler retrieves the following error:

Could not find a declaration file for module 'css-element-queries'. 'c:/PrjNET/Elevation3/FW/4.00/Mainline/Framework/Development/Client/ElevationJS/ngcore/node_modules/css-element-queries/index.js' implicitly has an 'any' type. Try npm install @types/css-element-queries if it exists or add a new declaration (.d.ts) file containing `declare module 'css-element-queries';

Based on the error message, I tried to run the following npm command:

npm install @types/css-element-queries

But the compiler retrieved the following error:

npm ERR! code E404 npm ERR! 404 Not Found: @types/css-element-queries@latest

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

Upvotes: 2

Views: 1888

Answers (2)

Greg Veres
Greg Veres

Reputation: 1900

I don't use Angular, but I just ran into importing ResizeSensor into a typescript based application. I don't know when css-element-queries added ResizeSensor.d.ts, but it is part of the package now.

However, that file is incorrect. I have filed an issue on gitHub for it. Yesterday I did some investigation on how to get it imported and ended up reading about the different module types and how to create a typings file in the typescript documentation.

This led me to the proper way to define the typings file for ResizeSensor. Basically take the one from the github repository and change the export line from:

export default ResizeSensor;

to 

export = ResizeSensor;

then you can use this as your import:

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

Your path to css-element-queries will be different because you wont be able to pull it from npm until the package maintainer fixes the .d.ts file.

Here is a link to the github issue.

Upvotes: 3

Michael Gira
Michael Gira

Reputation: 63

While there isn't typings package yet, I'm able to use the css-element-queries package using these imports:

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

Atom still gives info warnings about not being able to find a declaration file, but it still works. Hope this helps!

Upvotes: 0

Related Questions