Include codebird in angular2 project

Question

I want to include codebird in angular2 project. I am using angular-cli. The issue is that I have integrated codebird js module but while building I get this error - 'Cannot read property provide of null'. Can someone give the step by step procedure of integrating codebird in angular2?

@Jublo These are the steps I followed. I did npm install codebird. Imported it in my app.module.ts as -> import * as Codebird from codebird and integrated it with my app. Whwn I start my server or when I build using (ng build) it says 'Cannot read property provide of null'. — Keshav Dhawan, Aug 21 '17 at 06:12

score 0 · Answer 1 · answered Mar 09 '18 at 16:43

Here's my workaround.

Include CodeBird in angular-cli.json

"scripts": [
    ...
    "./assets/js/codebird.js",
    ...
]

Then create a folder called TwitterAuth in your services directory. (You can use any name)

Then create following files there. I'll include the contents of the files I have.

index.ts

export { TwitterAuth } from './twitterAuth';

twitterAuthd.d.ts

export declare class TwitterAuth {
    twitterLogin(): void;
}

twitterAuth.js

export let TwitterAuth = (function () {
  function TwitterAuth() {
  }
  TwitterAuth.prototype.twitterLogin = function () {
    let cb = new Codebird;
    cb.setConsumerKey("iuJN6zUs0TdggP3NvszVa5z2", "RNUnzMwFPn6vl5aaHW2YSbAAjevfW1LMRFzET6ugNV6a5bOAsz");

    localStorage.removeItem("oauth_token");
    localStorage.removeItem("oauth_token_secret");
    let oauth_token = localStorage.getItem("oauth_token");
    let oauth_token_secret = localStorage.getItem("oauth_token_secret");
    if (oauth_token && oauth_token_secret) {
    cb.setToken(oauth_token, oauth_token_secret);
    } else {
    cb.__call(
      "oauth_requestToken", {
        oauth_callback: location.origin
      },
      function (reply, rate, err) {
        if (err) {
        }
        if (reply) {
          console.log(reply);
          // stores it
          cb.setToken(reply.oauth_token, reply.oauth_token_secret);

          // save the token for the redirect (after user authorizes)
          // we'll want to compare these values
          localStorage.setItem("oauth_token", reply.oauth_token);
          localStorage.setItem("oauth_token_secret", reply.oauth_token_secret);

          // gets the authorize screen URL
          cb.__call(
            "oauth_authenticate", {},
            function (auth_url) {
              // JSFiddle doesn't open windows:
              window.location.replace(auth_url);
              // $("#authorize").attr("href", auth_url);

              // after user authorizes, user will be redirected to
              // http://127.0.0.1:49479/?oauth_token=[some_token]&oauth_verifier=[some_verifier]
              // then follow this section for coding that page:
              // https://github.com/jublonet/codebird-js#authenticating-using-a-callback-url-without-pin
            });
        }
      });
    }
  };
  return TwitterAuth;
}());

Then in your component import the file like this.

import {TwitterAuth} from "../../services/twitterAuth/twitterAuth";

Let me know if you got any issues.

Include codebird in angular2 project

1 Answers1