Typescript error when importing a single 3rd party javascript file in an Ionic 2 project

Question

I am migrating a html site into a Ionic app.

The html site uses a legacy javascript animation runtime file called "Swiffy":http://www.gstatic.com/swiffy/v5.4/runtime.js

Generally this is how it was used in the old site:

1) Including the runtime and declare a swiffyObject with a bunch of generated code.

<script type="text/javascript" src="...path/to/swiffy.js"></script>
<script>swiffyobject = {"internedStrings":["::::50g2s..... a bunch of really long code...</script>

2) Start the Swiffy object when document is ready

$(document).ready(function(){

var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);
stage.setBackground(null);
stage.start();

....

I tried to do the same in a brand new Ionic 2 project:

1) Including the script in src/index.html

<script type="text/javascript" src="...path/to/swiffy.js"></script>
<script>swiffyobject = {"internedStrings":["::::50g2s..... a bunch of really long code...</script>

2) Insert the script in Homepage ionViewDidLoad:

ionViewDidLoad() {

var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);
stage.setBackground(null);
stage.start();
}

Unfortunately, it doesnt work. When running ionic serve, two errors happen:

Cannot find name 'swiffy'.
Cannot find name 'swiffyobject'.

I am a newbie in Angular 2, I am quite sure the homepage typescript file is not aware of the global variables swifft and swiffyobject declared in the index.html

I tried this:

var stage = new window["swiffy"].Stage(document.getElementById('swiffycontainer'),window["swiffyobject");
stage.setBackground(null);
stage.start();
}

No Typescript compilation but it doesnt work too, complaining Cannot read property 'Stage' of undefined

How can I get the variables declared in index.html?

Answer 1

declare those variable in your AppModule file

declare let swiffy : any;
declare let swiffyobject: any;

@NgModule({
   //...
})
export class AppModule{}

Answer 2

Cannot find name 'swiffy'.

Cannot find name 'swiffyobject'.

In order to avoid these errors (since it's just typescript complaining about knowing nothing about these types) you could declare them in the same component file where you want to use them, like this:

declare var swiffy: any;
declare var swiffyobject: any;

@Component({...})
...

That's enough to make Typescript happy.

But, in the other hand, now we should inspect in the console if these two properties are being created and set by the script you're importing. If they are not being set, please check if the path to the js library is ok, and take a look at that code to see if the properties are being created as global objects.

The second line of the scripts you're importing seems to create the swiffyobject, but I woudln't know if the swiffy one is also being created properly.