How to use regular 3rd party js libs with Jhipster 4?

Question

I'm using Jhipster 4 with Angular 2 and need to use a 3rd party lib in my project, however the library is no on npm and doesn't have an .d.ts file. I need to include directly the js. Import inside vendor.ts works for libraries installed via npm but won't work with my js, how can I use this file in my project?

Answer 1

I am also trying to figure this out right now.. I actually couldn't get libraries installed via yarn to work by importing them in the vendor.ts file either though..

My current workaround (...until I can figure out the correct way to do this) was to copy the .js files I needed into src/main/webapp/content/js/ and reference it from webpack.common.js in the CopyWebpackPlugin plugin:

Under plugins in webpack.common.js, I added an entry to CopyWebpackPlugin:

new CopyWebpackPlugin([
            { from: './node_modules/core-js/client/shim.min.js', to: 'core-js-shim.min.js' },
            { from: './node_modules/swagger-ui/dist', to: 'swagger-ui/dist' },
            { from: './src/main/webapp/swagger-ui/', to: 'swagger-ui' },
            { from: './src/main/webapp/favicon.ico', to: 'favicon.ico' },
            { from: './src/main/webapp/robots.txt', to: 'robots.txt' },
            { from: './src/main/webapp/i18n', to: 'i18n' },
            { from: './src/main/webapp/content/js/FooLib.js', to: 'FooLib.js'}
]),

And then added an import to the webapp/index.html

    <script src='FooLib.js'></script>

And then declared it in the component that I was using it with:

declare var Foo: any;