Reference Error: FB is not defined. (Angular 6)

Dando1996 commented 6 years ago

I'm having the same issue as others with a fresh project. In Angular 6. The error I'm getting is:

Uncaught (in promise): ReferenceError: FB is not defined ReferenceError: FB is not defined at FacebookService.push../node_modules/ngx-facebook/dist/esm/providers/facebook.js.FacebookService.init (facebook.js:32) at new AppComponent (app.component.ts:18)

In my index.html file:

<html>
<head>
  <meta charset="utf-8">
  <title>ngx-facebook Example Project</title>
  <!--<base href="/">-->

  <!-- including bootstrap so the example is not so ugly -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <!-- We need to include the Facebook script tag here -->
  <!-- in this project, the app bundle files are added automatically by the build process at the end of the file  -->
  <script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

In my app.module file:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { FacebookModule } from 'ngx-facebook';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    FacebookModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

My app.component.ts file:

import { FacebookService, LoginResponse, LoginOptions, UIResponse, UIParams, FBVideoComponent } from 'ngx-facebook';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(
    private fb: FacebookService
  ) {

    console.log('Initializing Facebook');

    fb.init({
      appId: "my-app-id",
      version: 'v3.1'
    });

  }

  login() {
  this.fb.login()
    .then((res: LoginResponse) => {
      console.log('Logged in', res);
    })
    .catch(this.handleError);
}

private handleError(error) {
  console.error('Error processing action', error);
}

}

And finally the app.component.html file:

  <h1>
    Welcome to {{ title }}!
  </h1>
  <button (click)="login()" class="btn btn-lg btn-primary btn-block">
    Login
  </button>
</div>

gambheera commented 5 years ago

I'm also having the same issue.

raquelsf commented 5 years ago

I'm also having the same issue.

surajaddanki commented 4 years ago

I'm also having the same issue how can we clear this error

zyra / ngx-facebook

Reference Error: FB is not defined. (Angular 6) #142