angular2 using twitter module from npm

Question

I had problem with LODASH importing to Angular2 app, got answer on this post here and all working now.

Next problem I have is that I do not know how to make "twitter" npm module to work within the app.

Now I installed "npm install twitter" and tried to import it with:

import * as Twitter from 'twitter';

but I get "cannot find module 'twitter'. I tried adding to system.config without luck.

What am I doing wrong here? How should the code look like for import and using this twitter module?

Here is system.config in index.html:

  System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    },
    map: {
      lodash: 'node_modules/lodash/lodash.js',
      twitter: 'node_modules/twitter/index.js'
    },
    meta: {
      lodash: { format: 'amd' },
      twitter: { format: 'amd' }
    }
  });

looks like a issue with your systemjs config, its better to post it as well in the question — Angular University, Feb 01 '16 at 14:13
The NPM module you're trying to import (`npm install twitter`) is a client side API which is meant to be used in NodeJS. — Bryan, Feb 01 '16 at 15:15

score 1 · Answer 1 · answered Feb 01 '16 at 15:06

I believe you have to add the definition file of the twitter module to a typings folder. Or install it using tsd. After that you can use it in your typescript code using a reference:

download manually

Download the definition file from here
Add it to a typings folder in your source root

or

install using tsd

Open cmd in source folder
npm install tsd -g
tsd install twitter --save

After that add the reference in the top of your typescript file

/// <reference path="../typings/twitter.d.ts"/>

score 0 · Answer 2 · answered Feb 01 '16 at 15:43

The twitter module is a commonjs module, so it won't work with amd. Try the following config to see if it works:

System.config({
  packages: {
  app: {
    format: 'register',
    defaultExtension: 'js'
  }
},
map: {
  lodash: 'node_modules/lodash/lodash.js',
  twitter: 'node_modules/twitter'
},
meta: {
  lodash: { format: 'commonjs' },
  twitter: { format: 'commonjs' }
}
});

try the import like this:

import * as Twitter from 'twitter/index';

Does it work? I don't think lodash is an amd module as well, its also commonjs. You probably can remove the full meta section, systemJs will auto-detect the type of module system successfully most of the times.

score 0 · Answer 3 · answered Mar 25 '16 at 09:55

I don't think you could use this module in such scenario as its a server-side module and needs Node running. I've managed to implement twitter authentication using other module: https://github.com/jublonet/codebird-js

I've been working for a while on a simple project implementing social media logins. If you want you can take a look at: https://github.com/bkulov/EventOrgApp

angular2 using twitter module from npm

3 Answers3