CODEWITHSUNDEEP
javascriptangular
asdf
asdf

Reputation: 667

Importing tracking.js into an angular project

  1. I have downloaded tracking.js and added it to my /src/assets folder

  2. In my angular-cli.json file I have added to my scripts:

"scripts": [ "../src/assets/tracking/build/tracking-min.js" ],

  1. issue here - In my angular component, I import tracking as follows:

import tracking from 'tracking';

and in the chrome inspection window I can hover over 'tracking' and see all of the properties as shown:

enter image description here

I can even call the ColorImage constructor in the console window! :

enter image description here

However when it tries to execute the constructor in my code I get the error about tracking being undefined: enter image description here

I had assumed it was because I wasn't passing in the tracking object through the constructor in the traditional DI fashion, but when doing so I got the error that the namespace couldn't be used as a type: enter image description here

The only other thing I could think of was to try and add the external reference in the main index.html file, but I got an error about strict MIME checking.

To clarify: this is all happening in my angular component constructor (when the tracking methods get exercised)

Any ideas?

Upvotes: 3

Views: 1255

Answers (3)

SoroushNeshat
SoroushNeshat

Reputation: 674

another solution is to reference the tracking.js via script tag :

<html>
   <head></head>
   <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking- 
        min.js"></script>
   </body>
</html>

and in your component.ts write :

(window as any).tracking.ColorTracker(["magenta"]);

Upvotes: 0

SoroushNeshat
SoroushNeshat

Reputation: 674

go to your node_modules folder and find this file : "node_modules/tracking/build/tracking.js" . open the file and add this line of code to end of the file :

module.exports = window.tracking

save file and in use this code to import it :

import * as tracking from 'tracking';

Upvotes: 1

Chris Satchell
Chris Satchell

Reputation: 749

I don't think you can use DI with that external library. However, you should be able to create a new instance in the constructor:

import tracking from 'tracking';

constructor(...) {
    this.colors = new tracking.ColorTracker(...);
}

myFunction() {
    this.colors.doWhateverIWant();   
}

If you only want a single tracking instance throughout your app, then you'll have to create your own trackingService and inject that.

Upvotes: 0

Related Questions