How to use JS File in Angular Typescript

Question

So i bought this bootstrap Theme and it uses the aos.js library, so i installed the lib via npm and added it to the scripts tag of my angular.json like this:

            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "node_modules/aos/dist/aos.js"
            ]

I can activate the AOS Plugin itself by calling it in the app.component.ts

import {Component, OnInit} from '@angular/core';
import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'something';

  ngOnInit(): void {
    AOS.init();
  }
}

But the Theme comes with the aos.js file, providing options for the AOS plugin:

//
// aos.js
// Theme module
//

'use strict';

(function() {

  //
  // Functions
  //

  function init() {
    var options = {
      duration: 700,
      easing: 'ease-out-quad',
      once: true,
      startEvent: 'load'
    }
    AOS.init(options);
  }


  //
  // Events
  //

  if (typeof AOS !== 'undefined') {
    init();
  }

})();

You can see that it's already calling the AOS.init() function so I assume that instead of calling the Plugin directly from my app.component.ts I have to import the themes aos.js file and call its init() method instead. After this the app.component.ts file looks like this:

import {Component, OnInit} from '@angular/core';
import * as AOSTheme from '../assets/js/aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'paydpromo-app';

  ngOnInit(): void {
    AOSTheme.init();
  }
}

When i run it via ng serve the plugin and animations are working but the console displays an error TypeError: _assets_js_aos__WEBPACK_IMPORTED_MODULE_2__.init

What's the right way of importing DOM-manipulating js libs into your angular app?

Answer 1

after adding the js script to the angular.json file.. declare the library inside the component as shown below without importing it..

import {Component, OnInit} from '@angular/core';
declare var AOS: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'something';

  ngOnInit(): void {
    AOS.init();
  }
}