Search code examples
javascriptangularwebpackwow.js

How to use WOW.js in Angular 2 Webpack?

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?

Solution

  • 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...