Use external lib with Angular

You don't need to include your libs in angular.json. Import it just where u need it.

First, install the packages:

npm install jquery jquery-animated-headlines --save

Then, go to the desired component and import them:

import * as $ from 'jquery' // in case u haven't imported it globally.
import * as animatedHeadline from 'jquery-animated-headlines;


@Component()
...
constructor () {
    $(document).ready(() => $('.selector').animatedHeadline())
}

Here is how I got it to work, but there must be a better way. I created a new project using @angular/cli version6.

npm install --save jquery jquery-animated-headlines

In the angular.json file, add "node_modules/jquery-animated-headlines/dist/css/jquery.animatedheadline.css" to the styles array.

Update the app.component.html to:

<h2 #foo>Here are some links to help you start: </h2>

app.component.ts

import { Component, AfterContentInit, ViewChild, ElementRef } from '@angular/core';

import * as jQuery from 'jquery';
import 'jquery-animated-headlines';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  @ViewChild('foo') fooElement: ElementRef<any>;

  ngAfterContentInit(): void {
    $(this.fooElement.nativeElement).animatedHeadline();
  }
}

Now things should work at this point, but don't seem to due to the way that the plugin library is written. I also had to go into the node_modules/jquery-animated-headlines/dist/js/jquery.animatedhealdine.js file and update the way that it is importing jquery.

The file comes looking like:

(function($) {
  .
  .
  .
}(jQuery));

and I had to update it to:

(function (factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    }
    else if(typeof module !== 'undefined' && module.exports) {
        module.exports = factory(require('jquery'));
    }
    else {
        factory(jQuery);
    }
}(function ($, undefined) {
  .
  .
  .
}));

I'm not sure if there is a better way to handle this in Angular and this won't work well with an automated build system, but for local development it should work fine.

UPDATE

The way to get this working in your application is as follows.

In the angular.json file add:

"node_modules/jquery/dist/jquery.js",
"node_modules/jquery-animated-headlines/dist/js/jquery.animatedheadline.js"

to the scripts property.

In your component, use declare var $: any;. For example:

import { Component, AfterContentInit, ViewChild, ElementRef } from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit {
  @ViewChild('foo') fooElement: ElementRef<any>;

  ngAfterContentInit(): void {
    $(this.fooElement.nativeElement).animatedHeadline();
  }
}

GitHub repo.