如何将第3方JS库加载到我的Angular6项目中？

Question

There is an awesome JS library called 't.js'. It's used to make a cool looking typewriter effect. This library cannot be downloaded via npm , you have to download its t.min.js file.

Usually when adding libraries to an Angular6 project, you have to install it via npm , but as I said, you can't. So I tried pasting a script tag in my html file to reference it. But, now it keeps giving me an error:

$(...).t is not a function

You can check out t.js' website here . You will then see their documentation and understand the use of the .t I used.

So does anyone maybe know how I can add a 3rd party JS library to my Angular6 project when it can't be installed via npm ?

After some Google-ing some people said the error is that the library is .js and not .ts , if this helps.

Here is also some of the code I used:

<script src="assets/t.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
  setTimeout(() => {
    $('#main').t({
      beep: true,
      caret: '<span style="color: hotpink;">·</span>',
      typing: (elm, chr) => {
        if (chr.match(/\-trigger/)) {
          $('#pow-txt').show().delay(500).fadeOut(0);
        }
      }
    });
  }, 4200);
});

I would also recommend this video .

Answer 1

You should not use jquery in angular it will cause so many problems later. But if you want to do this cool stuff in angular then you can easily do that by adding a script tag in index.html file.

Following are some steps that you can follow to achieve what you need:-

1. Add assets folder and put your jquery.js and t.js file.
2. Link these script in index.html . ex

     <script src="./assets/js/jquery.min.js" type="text/javascript"></script> <script src="./assets/js/t.min.js" type="text/javascript"></script> 

3. In your component ts file you have to declare jQuery variable to link it with global jQuery variable. Use this variable to do all jquery operation.

In component ts file

import { Component } from '@angular/core';
declare var jQuery;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  runDemo1() {
    jQuery('#demo_1').t({
      beep: true,
      caret: '<span style="color:hotpink;">•</span>',
      typing: function (elm, chr) {
        if (chr.match(/\-trigger/))
          jQuery('#pow-txt').show().delay(500).fadeOut(0);
      }
    });
  }
}

In component html file

<button (click)="runDemo1()">Run demo</button>

<pre id="demo_1">
######<ins><span id="pow-txt" style="display:none;color:tomato;">---[POW!]</span></ins>
##<del>\<ins>1.5</ins></del><del id="pow-trigger">|</del>\
</pre>

you can follow this stackblitz

Answer 2

That looks like an error that'd be thrown if jQuery isn't installed & loaded. As an alternative, you could try TypeIt, an animated typing utility I wrote. It has no jQuery dependency, and can be easily installed with npm : npm install typeit .

Site/Docs: https://typeitjs.com/

Github: https://github.com/alexmacarthur/typeit