Cannot find name 'FB' [ts]

Question

I am trying to initialize JavaScript SDK to use Facebook Graph API eventually. But it keep saying that Cannot find name FB, not sure why. Here is what I did,

componentDidMount() {
    (window as any).fbAsyncInit = function() {
        FB.init({ // this FB errors out
            appId            : "my-app-id",
            autoLogAppEvents : true,
            xfbml            : true,
            version          : "v2.11"
        });
    };

    (function(d: any, s: any, id: any) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return; }
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "facebook-jssdk"));
}

P.S. I am using TSLint, that is why I have all those typedef any

Answer 1

Install https://www.npmjs.com/package/@types/facebook-js-sdk and add facebook-js-sdk to types in your tsconfig.ts or tsconfig.app.json if you have nested applications when using Angular CLI.

Example tsconfig.app.json:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "types": [
      "node",
      "gapi", // google
      "gapi.auth2", // google
      "facebook-js-sdk" // facebook
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}