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.
Advertisement
Answer
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.