Could not import js file into component.ts

Question

Hello I developped an angular 12 app. I imported js to each component in the previous app on angular 9 like this :

js file:

var mainHandler = {
  init: function(){
    this.responsiveHandler();
  },


  responsiveHandler: function() {
    var self = this;

    // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
    let vh = window.innerHeight * 0.01;
    // Then we set the value in the --vh custom property to the root of the document
    document.documentElement.style.setProperty('--vh', `${vh}px`);

    window.addEventListener('resize', () => {
      // We execute the same script as before
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    });

    $('.btn--toggle-menu').unbind('click').bind('click', function(e){

      /* Toggle Button */
      $(this).add('.header--main').toggleClass('opened');

      /* Toggle Main menu */
      if( !$('.header--main').hasClass('opened') ){
        closeMenu();
      } else {
        openMenu();
      }
    });

    // Close menu on item click / Lang select
    $(document).on('click', '.nav--main li a, .megamenu strong, .megamenu a', function(){
        //e.preventDefault();
                $(this).add('.header--main').removeClass('opened');
                closeMenu();
      });

    $(document).on('click touchstart', 'body', function(e){
      if( $('.header--main').hasClass('opened') && !$(e.target).is('.btn--toggle-menu') && $('.btn--toggle-menu').has(e.target).length === 0 && !$(e.target).is('.megamenu') && $('.megamenu').has(e.target).length === 0 ){
        $(this).add('.header--main').removeClass('opened');
        closeMenu();
      }
    });



    var $viewportWidth = window.innerWidth || document.documentElement.clientWidth;

    // On resize events, recalculate and log
    window.addEventListener('resize', function () {

      $viewportWidth = window.innerWidth || document.documentElement.clientWidth;

      if(window.innerWidth >= 1024){
        $('.btn--toggle-menu, .header--main').removeClass('opened');
      }
    }, false);

    function openMenu(){
      /* $('body').css({
        'overflow': 'hidden'
      });
      stopBodyScrolling(true); */
    }
    function closeMenu(){
      /* $('body').css({
        'overflow': ''
      });
      stopBodyScrolling(false); */
    }

    var freezeVp = function(e) {
      e.preventDefault();
    };

    function stopBodyScrolling (bool) {
      if (bool === true) {
        document.addEventListener("touchmove", freezeVp, {passive: false});

      } else {
        document.removeEventListener("touchmove", freezeVp, {passive: false});
      }
    }
  },

  closeMenu: function() {
    $('.header--main').removeClass('opened');
    $('body').css({
      'overflow': ''
    });
  }

};
module.exports = mainHandler;

component.ts file:

import * as script from 'src/.../file.js';

ngOnInit() {
  script.init()
}

and it worked very well but in the angular 12 app it doesn't anymore and returns me this error:

Could not find a declaration file for module 'src/assets/js/file.js'. 'c:/Users/.../src/assets/js/file.js' implicitly has an 'any' type.

Answer 1

I finaly found a solution, maybe it's not the best way but it works. just add :

"noImplicitAny": false,

to your compilerOptions in the tsconfig.json. You may have new error when you define constant but just ad as any to it.