importing jquery as a global library causes typescript code importing jquery to transpile as a blank object

[shahmirn]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 7

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.18
node: 4.4.5
os: win32 x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

add "../node_modules/jquery/dist/jquery.js" to angular-cli.json

Have a typescript file import * as $ from "jquery";

The log given by the failure.

Normally this include a stack trace and some more information.

Results in code in main.js like:
var $ = webpack_require(209);

Pasting webpack_require(209) in the browser's console results in it returning Object {}

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[deebloo]

@shahmirn can you try just accessing jquery as a global rather then importing it and see if that works? as script added in the angular-cli.json is added as a global.

[filipesilva]

Related to #2760

[Meligy]

I don't think you can use aliases like import * as $ from "jquery"; without configuring Webpack, which the CLI does not allow today.

Can you try changing it to import * as $ from "jquery/dist/jquery"; and see if it works?

[shahmirn]

@deebloo @Meligy The use-case I gave above is simplified. In my use-case, I can't do either of those things, 'cause I'm actually importing a dependency whose code I can't change, but I do have access to it's code, so I know that it's doing

import * as $ from "jquery";

[filipesilva]

Currently it kinda sucks if you need to use a lib both as a global and as an import. I haven't had the time to look at it, and tbh don't even know if there is a good solution.

Even if hypothetically we fixed things and you wouldn't get an empty object, you'd never get the same global object either. And this is very important for stuff like jquery plugins... you need the same instance of jquery everywhere.

So currently I think the workaround is that, when using a lib as a global and as an import, to:

• add it to the scripts array
• add declare var jquery: any in src/typings.d.ts so TS doesn't complain about unknown vars
• just use jquery in your code without ever importing it.

This way you'll just get the one in window I think.

[obiwan007]

Used the approach with declaration in typings.d.ts - but I had to use

declare var jquery: any;
declare var $: JQueryStatic;

But - unfortunatley Tests referencing $ or jquery are failing now. If I Import via Import * as $ from ... it is working, but then the running app is failing.

ReferenceError: Can't find variable: $ in src/test.ts

Any idea on how to make jquery known to Karma?

[Meligy]

I have no clue how the Angular CLI injects the src/typings.d.ts file, but maybe you can import it manually at the beginning of the src/test.ts file.

Based on how you describe what works for you, I'm guessing you added jQuery to angular-cli.json file in the scripts array. I think I read somewhere that these are not included in the unit tests (a bug if that's correct). If this is correct, this still won't work. You might want to try removing it from there, and importing it as import $ from 'jquery/dist/jquery';.

Note that import $ from ... is not the same as import * as $ from ....

[filipesilva]

Closing in favor of #2141 (same issue)