Search code examples
angularecmascript-6systemjs

Cannot load phoenix js library with SystemJS in angular2

I followed the Angular2 quickstart typescript tutorial (here).

Now I am trying to include the phoenix.js package so that I can connect to my Elixir Phoenix channels.

I've added phoenix from this package to my package.json and installed it.

I've added a line to systemjs.config.js like this:

'phoenix': 'node_modules/phoenix/web/static/js/phoenix.js'

I'm trying to import it into my Angular2 service like this (I'm using ES6 and have read through this issue):

import { Socket } from 'phoenix';

I get the error 

app/app.phoenix_channels.service.ts(2,24): error TS2307: Cannot find module 'phoenix'.

I'm not actually 100% sure how the SystemJS config file is included and run. It's included in the HTML prior to the application, but I can't see it being included or parsed when I'm compiling typescript.

I've been through this question on Stack but I can't work out how to get the dependency loaded using the framework that the Angular tutorial provides.

I tried adding additional_deps as a key to the systemjs.config.js like this:

additional_deps: {
  src: 'node_modules/phoenix/priv/static/phoenix.js',
  inject: 'libs'
},

But that doesn't seem to work.

How can I get this dependency to load so that I can import from this library?

Solution

  • You have the JS file, which is for runtime, but the error is a compilation error because it's looking for a typescript file. For libraries, TypeScript definition files are used but some libraries don't have TypeScript support so we need to install external modules with the type definitions.

    Some JS projects you may not find a definition file out there, and you need to write your own. Or you can just do what the poster in the answer you linked to did. Just declare random any type variables (don't import)

    declare var Socket: any;

    Now you can use Socket. The problem with this though is that you don't have any strong typing or intellisense.

    Luckily it looks like someone wrote a definition file for phoenix

    npm install --save-dev @types/phoenix

    That should get it to work. As far as runtime, your SystemJS configuration looks like it should be good.