FB is not defined in Angular universal

[lukaszkukawski]

Hi, i have issue.

I installed the script correctly because everything works, i can login/logout/get info about user.
But when i refresh (using F5) page in console i have Error:

`
ERROR { Error: Uncaught (in promise): ReferenceError: FB is not defined
ReferenceError: FB is not defined
at FacebookService.init (webpack:///.//ngx-facebook/dist/esm/providers/facebook.js?:34:36)
at LoginFacebookComponent.ngOnInit (webpack:///./src/app/components/user/login/loginFacebook.component.ts?:26:17)
at checkAndUpdateDirectiveInline (webpack:///.//@angular/core/@angular/core.es5.js?:10916:19)
at checkAndUpdateNodeInline (webpack:///.//@angular/core/@angular/core.es5.js?:12295:17)
at checkAndUpdateNode (webpack:///.//@angular/core/@angular/core.es5.js?:12263:16)
at prodCheckAndUpdateNode (webpack:///.//@angular/core/@angular/core.es5.js?:12716:5)
at Object.View_AppComponent_0.WEBPACK_IMPORTED_MODULE_0__angular_core._37.co [as updateDirectives] (webpack:///./aot/src/app/components/app.component.ngfactory.ts?:265:9)
at Object.updateDirectives (webpack:///.//@angular/core/@angular/core.es5.js?:12631:72)
at checkAndUpdateView (webpack:///.//@angular/core/@angular/core.es5.js?:12230:14)
at callViewAction (webpack:///.//@angular/core/@angular/core.es5.js?:12545:17)
at execComponentViewsAction (webpack:///.//@angular/core/@angular/core.es5.js?:12491:13)
at Object.checkAndUpdateView (webpack:///.//@angular/core/@angular/core.es5.js?:12236:5)
at ViewRef_.detectChanges (webpack:///.//@angular/core/@angular/core.es5.js?:10327:63)
at eval (webpack:///.//@angular/core/@angular/core.es5.js?:5257:63)
at Array.forEach (native)
at new Error (native)
at resolvePromise (webpack:///.//zone.js/dist/zone-node.js?:712:31) [angular]
at Function.ZoneAwarePromise.reject (webpack:///.//zone.js/dist/zone-node.js?:789:20) [angular]
at FacebookService.init (webpack:///.//ngx-facebook/dist/esm/providers/facebook.js?:37:28) [angular]
at LoginFacebookComponent.ngOnInit (webpack:///./src/app/components/user/login/loginFacebook.component.ts?:26:17) [angular]
at checkAndUpdateDirectiveInline (webpack:///.//@angular/core/@angular/core.es5.js?:10916:19) [angular]
at checkAndUpdateNodeInline (webpack:///.//@angular/core/@angular/core.es5.js?:12295:17) [angular]
at checkAndUpdateNode (webpack:///.//@angular/core/@angular/core.es5.js?:12263:16) [angular]
at prodCheckAndUpdateNode (webpack:///.//@angular/core/@angular/core.es5.js?:12716:5) [angular]
at Object.View_AppComponent_0.WEBPACK_IMPORTED_MODULE_0__angular_core._37.co [as updateDirectives] (webpack:///./aot/src/app/components/app.component.ngfactory.ts?:265:9) [angular]
at Object.updateDirectives (webpack:///.//@angular/core/@angular/core.es5.js?:12631:72) [angular]
at checkAndUpdateView (webpack:///.//@angular/core/@angular/core.es5.js?:12230:14) [angular]
at callViewAction (webpack:///.//@angular/core/@angular/core.es5.js?:12545:17) [angular]
at execComponentViewsAction (webpack:///./~/@angular/core/@angular/core.es5.js?:12491:13) [angular]

`

This info is from node, but is it a issue from ng2-facebook-sdk , angular 4 or webpack library?

[ihadeed]

Are you using Angular Universal?

If so, I recommend wrapping any Facebook specific code (that runs by itself without user action) in a isPlatformBrowser.

[lukaszkukawski]

thx for fast reply.

Yes i using Angular universal, latest version.
Do you have example, how to use isPlatformBrowser?

[ihadeed]

@lukaszkukawski

1. Import the following:

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

2. Inject PLATFORM_ID:

constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }

3. Wrap your Facebook calls with isPlatformBrowser:

// example
if(isPlatformBrowser(this.platformId) {
  // do something here that should only run in browser
}

[lukaszkukawski]

This platformId i must added in some configuration? Because i have error:platformId is not defined

[ihadeed]

@lukaszkukawski you need to inject it in a component or a service using @Inject()

[lukaszkukawski]

I used @Inject but this error not disappeared.
But this is not a problem with ng2-facebook-sdk. I will not disturb you anymore with this, so thank you for your help!

[ihadeed]

@lukaszkukawski check the stuff you have imported in the app's main module. Here's are some code snippets from an Angular Universal app that I have. PLATFORM_ID injects fine in this app, so there might be something you missing that I have here:

// app.module.ts
import { NgModule } from '@angular/core';
import {RouterModule} from "@angular/router";
import { routes } from './app.routes';
import {AppComponent} from "./app.component";
import {HomePage} from "./pages/home/home";
import {TransferHttpModule} from "../modules/transfer-http/transfer-http.module";
import {HttpModule} from "@angular/http";
import {CommonModule} from "@angular/common";
import { NotFoundPage } from "./pages/404/404";
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        CommonModule,
        HttpModule,
        TransferHttpModule,
        RouterModule.forRoot(routes),
        FormsModule
    ],
    declarations: [
        AppComponent,
        NotFoundPage,
        HomePage
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

// browser.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { BrowserTransferStateModule } from '../modules/transfer-state/browser-transfer-state.module';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        BrowserModule.withServerTransition({
            appId: 'zyramedia'
        }),
        BrowserTransferStateModule,
        AppModule
    ]
})
export class BrowserAppModule {}

// server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ServerTransferStateModule } from '../modules/transfer-state/server-transfer-state.module';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { TransferState } from '../modules/transfer-state/transfer-state';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        BrowserModule.withServerTransition({
            appId: 'zyramedia'
        }),
        ServerModule,
        ServerTransferStateModule,
        AppModule
    ]
})
export class ServerAppModule {

    constructor(private transferState: TransferState) { }

    // Gotcha
    ngOnBootstrap = () => {
        this.transferState.inject();
    }
}

[lukaszkukawski]

You are great!

Missing this fragment:

BrowserModule.withServerTransition({ appId: 'zyramedia' }),

[azkarmoulana]

@ihadeed can you suggest any solution for this issue with ngx-facebook module with Angular Universal,
#146 (comment)

simply I get this error Error: Cannot find module './components/fb-comment-embed/fb-comment-embed' when I run the command npm run serve:ssr.
Angular Version - 8.3.8