Webpack - Call external JS in Angular 2

Question

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.

why won't to try angular-cli ? it will handle all the webpack ceremony for you. — angularconsulting.au
– angularconsulting.au, Commented Feb 1, 2017 at 23:54

user3333134 · Accepted Answer · 2017-02-02 16:21:12Z

1

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>

answered Feb 2, 2017 at 16:21

user3333134

3991 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack - Call external JS in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related