Unable to import in Angular2 with TypeScript.

[aryarohit07]

Hi, First of all, thanks for this awesome library. I am trying to import this library into my angular2 project but getting error:

File '/Users/.../node_modules/@types/marker-animate-unobtrusive/index.d.ts' is not a module.

I have followed this process for installation:

npm install marker-animate-unobtrusive  --save
npm install @types/marker-animate-unobtrusive --save
typings install dt~google.maps --global --save
typings install dt~marker-animate-unobtrusive --global --save

I am trying to import like this:

import * as SlidingMarker from 'marker-animate-unobtrusive';

[viskin]

Thank you.

I'm not sure, but I think you can add references to all the needed by this library js files in index.html, instead of using module loader. Then, in typescript instead of doing 'import * as' you can add

  /// <reference path="./marker-animate-unobtrusive.d.ts" />

This will tell typescript that you will take care to load SlidingMarker by yourself.

Please tell me if it works.

[aryarohit07]

Yes, I can do that and will work. But I was more interested in module import.

I also noticed that you created the type definition in DefinitelyTyped which later was changed to use index.d.ts instead of marker-animate-unobtrusive.d.ts. Is that change has anything to do with this import error?

Anyway, I will look for solutions and will post if I found one.

[DanielRivas75]

Hi @aryarohit07 was you able to import this module successfully? i'm in the same point than you

[navneet35371]

Is there any solution to this issue.. even i am unable to import it in the ionic2 project

[viskin]

I'll try to build a demo solution for this...

[navneet35371]

my index.d.ts looks like this

/// <reference path="globals/google.maps/index.d.ts" /> /// <reference path="globals/marker-animate-unobtrusive/index.d.ts" /> /// <reference path="globals/socket.io-client/index.d.ts" /> Still i am getting can't find variable SlidingMarker

[navneet35371]

Uncaught ReferenceError: google is not defined at markerAnimate.umd.js:28 at Object. (markerAnimate.umd.js:5) at google.maps.Marker.animateTo.defaultOptions.duration (markerAnimate.umd.js:6) at Object. (markerAnimate.umd.js:15) at webpack_require (bootstrap ddf4005…:19) at $ (SlidingMarker.js:7) at Object. (SlidingMarker.js:15) at webpack_require (bootstrap ddf4005…:19) at Object. (main.js:28882) at __webpack_require__ (bootstrap ddf4005…:19)

[viskin]

I'll check it ASAP (in few days). I'll add demo project with angular2 cli. Or maybe something like plunker. Do you know some good (with intellisense) online typescript code sharing tool?

[viskin]

@navneet35371 I added simple TypeScript demo here. It includes the js libraries at index.html, and provides TypeScript access with "@Types/..." installed with npm. No "import" needed, google.maps and SlidingMarker are both accessible from the global scope. Please tell if it works for you.

[coderroggie]

@viskin Sweet project. I don't suppose you were going to add that angular 2 example... My angular 2 project isn't compiling using the instructions you provided to install into the project. I believe it really needs an import, similar to how something like lodash works in an angular 2 project. I'm a bit of a noob in the TS world though, so I haven't dug in enough to provide a pull request.

[viskin]

@coderroggie In your project, do you include scripts in index.html? Like this? Also, how your tsconfig.json looks like?

[coderroggie]

@viskin - I'm not including scripts in index.html like that. I'm importing them in the components. I would assume this lib could do something similar to what lodash and rxjs are doing... but again, I'm barely treading water in this space.

Example of lodash and rxjs from app.component.ts:

import {Observable}               from "rxjs";
import * as _                     from "lodash";

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "",
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

[viskin]

@coderroggie Well, the project is implemented in a way that you cannot import it. It is global, and you need to include it in index.html. Sorry, don't have time to make it modular. node_modules/@types should contain marker-animate-unobtrusive, please check it.

[coderroggie]

@viskin I did finally get these to load within my ionic 2/typescript 2 project using the following import statement:

import * as SlidingMarker         from "../../../node_modules/marker-animate-unobtrusive";

Hope that helps someone else out there. Thanks for looking into it!

[viskin]

@coderroggie Thanks for sharing!

[konasunny]

I am still gettign the same issue while using angualr cli for angualr 5 project.

error TS2306: File 'D:/personal-git-repo/CupCake/node_modules/@types/marker-animate-unobtrusive/index.d.ts' is not a module.

[bamboona]

@coderroggie using your answer the error disappeared. Thanks a lot !