How to use WOW.js in Angular 2 Webpack?

Question

I know we need typings file for wow.js but I couldn't find it anywhere. Is there any other solution for loading this external js into webpack?

Answer 1

Do the following steps:

1. Install exports-loader

   
       npm i exports-loader --save-dev
   
   

2. Add to webpack.config.js this loader

   
       {
           test: require.resolve('wow.js/dist/wow.js'), 
           loader: 'exports?this.WOW'
       }
   
   

3. Create typings.d.ts file in your typings folder:

   
       declare module "wow.js/dist/wow.js" {
           var noTypeInfoYet: any;
           export = noTypeInfoYet;
       }
   
   

4. add import to your *.component.ts file

   
       import * as WOW from 'wow.js/dist/wow.js';
   
   

5. Use it well!

   
       ngOnInit(){
           new WOW().init();
       }
   
   

Of course you can use your own webpack configuration without exports-loader, etc...