Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Dando1996 opened this issue Sep 28, 2018 · 3 comments
Open

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

Dando1996 opened this issue Sep 28, 2018 · 3 comments

Comments

@Dando1996
Copy link

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
Copy link

I'm also having the same issue.

1 similar comment
@raquelsf
Copy link

I'm also having the same issue.

@surajaddanki
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gambheera @Dando1996 @raquelsf @surajaddanki