I keep solving this problem, so it’s time to write it down for my future self!

I know your story. You want to use jQuery inside an Angular CLI app, but the whole WebPack magic is turning everything bad.

Or perhaps things are even more complex. You want to use a 3rd party product, like Semantic UI, which augments existing jQuery objects in global scope, from your Angular CLI app, and it’s not happening for you.

Your web searches are awash with old advice.

This is the page you have been looking for.

Here’s something that works with 1.0.0-beta.31 of the CLI (and probably earlier WebPack-based versions too).

Watch the vid on YouTube, or scroll down for the steps in text form

First, npm install the libraries you need

In my case, I’m working with Semantic UI. This framework both has CSS and JS component - and depends on jQuery for heavy lifting.

So I need npm install those libs first.

npm install jquery --save
npm install semantic-ui-css --save

Once those are installed, you should be able to spy them in the ./node_modules/ directory in the root of your project.

All good so far.

Next, import your global JS libs in browser global scope using angular-cli.json

You’ll find a angular-cli.json in the root directory of your project. This is the config file for the CLI, and you can tell the CLI about your global styles and JS there.

You’ll need to make insertions in the styles and scripts arrays. Here’s the extract from mine that deals with the CSS and JS I need:

"styles": [
    "styles.css",
    "../node_modules/semantic-ui-css/semantic.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/semantic-ui-css/semantic.js"
  ],

You notice I slurped in my global styles in the styles section - and they are the path to the node_modules we installed earlier. The path is double-dot `../node_modules/‘ remember.

Same for the scripts block. Import what you need and you’re set.

Finally, declare the global JavaScript to your TypeScript

In my case, Semantic is augmenting the existing jQuery object, so I’ll need to “declare” that global variable so TypeScript knows about it.

For that you need a line like this at the top of your class file:

declare var jQuery: any;

And with that inplace, you can now call the jQuery() methods you’ve been looking for.

Note: You don’t need any <link> or <script> tags. The CLI/WebPack has done all the bundling work for you. Just start using stuff!

So, for example, to invoke the SideNav from Semantic UI, you’d normally call the sidebar() method on the jQuery object.

Here’s the full sample code (with that declare magic) to follow along at home:

import { Component } from '@angular/core';

declare var jQuery: any;

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

    title = 'jQuery works!';

    onToggle() {
        jQuery('.ui.sidebar').sidebar('setting', 'transition', 'push').sidebar('toggle');
    }

}

And the matching HTML that it’s invoking:

<h1>
{{title}}
</h1>

<div class="ui left demo vertical inverted sidebar labeled icon menu" id="sidenav">
<a class="item">
    <i class="home icon"></i>
    Home
</a>
<a class="item">
    <i class="block layout icon"></i>
    Topics
</a>
<a class="item">
    <i class="smile icon"></i>
    Friends
</a>
</div>

<button (click)="onToggle()">Toggle Me</button>

Which gives you the goodness:

jQuery with Angular CLI

Hope it helps next time you need jQuery (or Semantic UI) in your Angular CLI app!