import typings of package with different name

Question

I am converting exiting project to typescript. The project is using a package ng-idle and it has @types package with name angular-idle and the file @types/angular-idle/index.d.ts contains

declare module 'angular' {
    export namespace idle {
         ....

How do I import this package

   import * as ngIdle from 'angular-idle'

or

   import * as ngIdle from 'ng-idle'

Bruno Grieder · Accepted Answer · 2017-09-18T08:22:49.833

1

There are a few ways to do this

import {idle} from 'angular'
const blah = idle.BLAH

You can even rename the namespace on import

import {idle as ng_idle} from 'angular'
const blah = ng_idle.BLAH

If you already import angular

 import * as angular from 'angular'
 import idle = angular.idle
 const blah = idle.BLAH

(or use angular.idle directly)

edited Sep 18 '17 at 08:22

answered Sep 18 '17 at 07:27

Bruno Grieder

28,128
8
69
101

1

but the package name is `ng-idle` and `angular-idle` and not `angular`, so the package name has nothing to do with the name specified in quotes while doing import?? – harishr Sep 18 '17 at 09:12
if I use `angular-idle` directly, webpack gives error – harishr Sep 18 '17 at 09:20
It does not matter. What matters to the compiler is 1) that there is module named "angular" in node_modules, 2) that the name `idle` is exported in the definition files of external module "angular". Use the imports above and check [this example](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/angular-idle/angular-idle-tests.ts) for usage – Bruno Grieder Sep 18 '17 at 09:22
while what you said works in case of ngIdle, same thing is not working in case of ngStorage, I have very similar issue like this with angular.storage and there it does not work.. [question here](https://stackoverflow.com/questions/46276113/import-ngstorage-with-webpack) – harishr Sep 18 '17 at 09:39

import typings of package with different name

1 Answers1