CODEWITHSUNDEEP
javascriptangulartypescript
Artur
Artur

Reputation: 38

Angular 2 external JS library Skycons

I have problem implementing Skycons in my Angular 2 app. I have installed Skycons via npm i skycons.

typings.d.ts

declare module 'skycons'

weather.component.ts (part that is responsible for Skycons)

import * as Skycons from 'skycons';
import * as jQuery from 'jquery';

ngOnInit() {
    this.todayDate();
    this.getWeather();
    this.findLocation(52.4069200, 16.9299300);

var skyconType = function (icon) {
  if (icon === 'rain')
    return Skycons.RAIN
  else if (icon === 'snow')
    return Skycons.SNOW
  else if (icon === 'sleet')
    return Skycons.SLEET
  else if (icon === 'hail')
    return Skycons.SLEET
  else if (icon === 'wind')
    return Skycons.WIND
  else if (icon === 'fog')
    return Skycons.FOG
  else if (icon === 'cloudy')
    return Skycons.CLOUDY
  else if (icon === 'partly-cloudy-day')
    return Skycons.PARTLY_CLOUDY_DAY
  else if (icon === 'partly-cloudy-night')
    return Skycons.PARTLY_CLOUDY_NIGHT
  else if (icon === 'clear-day')
    return Skycons.CLEAR_DAY
  else if (icon === 'clear-night')
    return Skycons.CLEAR_NIGHT

  return Skycons.CLOUDY
}

jQuery(function () {
  var skycons = new Skycons({ "color": "#111" })

  jQuery('.skycon canvas').each(function (i, elem) {
    skycons.add(elem, skyconType(elem.className))
  })


  skycons.play()
})


}

weather.component.html (part that is responsible for Skycons)

<div class="skycon">
          <canvas width="84" height="84" id="icon" class="{{   weather.currently.icon }}">{{  weather.currently.icon }}</canvas>
        </div>

{{ weather.currently.icon }} returns for example string "partly-cloudy-day"

This is the first time i am using external JS libraries in Angular app.

In Developer Tools i get two errors (no errors during Angular compilation):

jQuery.Deferred exception: skycons.add is not a function TypeError: skycons.add is not a function

Uncaught TypeError: skycons.add is not a function

Versions of software:

Angular CLI: 1.7.4 Node: 9.4.0 OS: win32 x64 Angular: 2.4.10

Upvotes: 0

Views: 412

Answers (1)

jeninja
jeninja

Reputation: 848

Assuming that your skycons folder is in your node_modules folder, try using the following to declare Skycons object in your component.ts file.

const Skycons = require("skycons")(window);

Upvotes: 1

Related Questions