title: How to include 3rd party library that uses older import approach to Angular4.x?
body: <p>What is the proper workflow to <a href="https://yarnpkg.com/en/package/mathjs" rel="nofollow noreferrer">include the library</a> to angular 4.0 and use it inside a component?</p>
  
  <p>My steps:</p>
  
  <pre><code>yarn add mathjs
  </code></pre>
  
  <p>Then there should be a way to injects js libraries in one of the build lifecycles so the angular4 component can use it. JHipster utilizes Webpack and Yarn.</p>
  
  <p>Then I tried to add to Component (<a href="https://www.typescriptlang.org/docs/handbook/modules.html" rel="nofollow noreferrer">docs</a>):</p>
  
  <pre><code>import { mathjs } from "./mathjs";  
  </code></pre>
  
  <p>and</p>
  
  <pre><code>var math = require('mathjs');
  </code></pre>
  
  <p>Those were not working. What am I missing?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>It seems like mathjs uses older approach suggesting <code>var math = require('mathjs')</code>. Maybe it is similar to <a href="https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack">JQuery question</a> in some way...</p>
  
  <p><a href="https://webpack.js.org/plugins/provide-plugin/" rel="nofollow noreferrer">UPDATE2</a></p>