CODEWITHSUNDEEP
javascriptnode.jsangularangular2-directives
trance_dude
trance_dude

Reputation: 101

Angular2 - require module on client side

In the context of a Node.js / Express / Angular2 / typescript (IDE=Visual Studio) app, I am trying to load a third party .js utility (packery) onto the client side (for use in a directive). Someone made typescript definitions for it. The d.ts file looks like:

declare module "packery" {
    interface PackeryOptions {  stuff...  }
    class Packery { stuff .... }
    export = Packery;
}

I refer to this d.ts file, tell the browser where the .js packery script lives, and then import the module as such:

import Packery = require('packery');

This compiles without complaint. However, upon running, the browser attempts (and fails) to find "packery" at http://localhost/packery as opposed to knowing packery is an imported library. This is in contrast to the other import statements I have made on the client such as:

import {Http, HTTP_PROVIDERS} from 'angular2/http';

which work - as far as I can tell the only two pieces of information I gave it for those were also a d.ts file and the location of the .js file, just like packery. But, I must be missing something. Have tried many combinations of file locations and linking and can't get it to work. How can I get the proper linking to "packery"?

Thanks!

Upvotes: 2

Views: 685

Answers (2)

trance_dude
trance_dude

Reputation: 101

I found a workaround for this and thought I'd post in case it helps anyone, although I am still having difficulty with the setup posed in the original question, that is, getting statements of the type:

import foo = require('foo')

to run on the CLIENT side. These work for me in node.js on the server, but on the client, for third party libraries that have been loaded via a script tag, I cannot get it to work, even if I add mapping entries to the system.js config file, irrespective of if I point to a .js file or a d.ts file.

Anyway, what does work is if you load the library using the script tag, then in your IDE put a reference path as such at the top of the CLIENT side code

/// <reference path="foo.d.ts" />

and ensure that your d.ts file does not declare a module/namespace but rather exports methods etc. directly. This lets the IDE compile without complaint, and the client side code is able to access the third party library.

However, I'm not sure if it is preferable / best practices to do what I did or if one should be configuring System.js somehow.

Upvotes: 1

Langley
Langley

Reputation: 5344

Typings are empty definitions of js libraries that aren't written in a typed language. They are only useful in development for IDEs hints and stuff, in your app, you'll still use the library as you normally would, adding the js file in your index.html or w/e you load your js files from.

Upvotes: 0

Related Questions