Webpack - Call external JS in Angular 2

1
votes

I'm looking to swap to webpack from systemJS. Most of the setup seems to be working besides getting one of my external scripts running again.

Previously with systemJS I had a setup where I would import an external .js script in my index.html.

In my angular service I could interact with that script by doing the following - 

declare var ExternalCode: any;
.
.
.
ExternalCode.RunProcess(data, infomation);

In webpack I now have 3 files being exported and injected into my index.html - app.js, vendor.js and polyfills.js. In my vendor file I import the code like so,

import "./AppScripts/ExternalCode";

If I then look into vendor.js I see my ExternalCode wrapped like so,

(function(module, exports, __webpack_require__) {

   eval( EXTERNAL CODE IS ALL HERE );
})

What I can't seem to wrap my head around is how I now call my external code from the webpack vendor.js bundle in my service. Is there anyway to now import / run the code from within my angular 2 service?

I've also tried just importing the script again in the index.html file, but on the webpack-dev-server it will always throw a 404 from the existing path that use to work when I ran the project with IIS Express and SystemJS.

1
javascriptangularwebpackwebpack-dev-server
why won't to try angular-cli ? it will handle all the webpack ceremony for you. - angularrocks.com

1 Answers

1
votes

Figured out how to make it work the same way as I previously had with SystemJS. In vendor.ts as mentioned above import the script so thats its included in the webpack-dev-server.

import "./externaljs/ExternalCode.js";

Instead of treating the import like it's in a relative location to index.html, just pass the full path like so -

<script src="./src/externaljs/ExternalCode.js"></script>