Wrapped the code in the ngOnInit in a conditional statement to only r…

…un it in the browser (a fix regarding the SSR)
ftischler · Apr 24, 2018 · 0c1f6c0 · 0c1f6c0
1 parent 85728e8
commit 0c1f6c0
Showing 1 changed file with 33 additions and 26 deletions.
diff --git a/src/client/app/components/recipes/recipes.component.ts b/src/client/app/components/recipes/recipes.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
 import { RecipeItem } from './recipes-list/recipe-item/recipe-item.component';
 import { RecipesService } from '../../services/recipes.service';
 import { AuthService } from '../../services/auth.service';
 import { FormControl, Validators } from '@angular/forms';
 import { ActivatedRoute, Params, Router } from '@angular/router';
+import { isPlatformBrowser } from '@angular/common';
 
 @Component({
   selector: 'app-recipes',
@@ -24,41 +25,47 @@ export class RecipesComponent implements OnInit {
 
   email: string;
   password: string;
+  inBrowser: boolean;
 
   constructor(
     private readonly recipesService: RecipesService,
     private readonly authService: AuthService,
     private readonly route: ActivatedRoute,
-    private readonly router: Router
+    private readonly router: Router,
+    @Inject(PLATFORM_ID) private readonly platformId: Object
   ) { }
 
   ngOnInit() {
-    this.route.queryParams.subscribe((params: Params) => {
-      if (Object.keys(params).length) {
-        // Facebook Login
-        if (params.code && params.state) {
-          this.authService.facebookSignIn(params.code)
-            .subscribe((params: Params) => {
-              this.router.navigate(['/']);
-            });
-        } else if (params.oauth_token && params.oauth_verifier) {
-          // Twitter Login
-          this.authService.twitterSignIn(params.oauth_token, params.oauth_verifier)
-            .subscribe((params: Params) => {
-              this.router.navigate(['/']);
-            });
-        } else if (params.code) {
-          // Google Login
-          this.authService.googleSignIn(params.code)
-            .subscribe((params: Params) => {
-              this.router.navigate(['/']);
-            });
+    this.inBrowser = isPlatformBrowser(this.platformId);
+
+    if (this.inBrowser) {
+      this.route.queryParams.subscribe((params: Params) => {
+        if (Object.keys(params).length) {
+          // Facebook Login
+          if (params.code && params.state) {
+            this.authService.facebookSignIn(params.code)
+              .subscribe((params: Params) => {
+                this.router.navigate(['/']);
+              });
+          } else if (params.oauth_token && params.oauth_verifier) {
+            // Twitter Login
+            this.authService.twitterSignIn(params.oauth_token, params.oauth_verifier)
+              .subscribe((params: Params) => {
+                this.router.navigate(['/']);
+              });
+          } else if (params.code) {
+            // Google Login
+            this.authService.googleSignIn(params.code)
+              .subscribe((params: Params) => {
+                this.router.navigate(['/']);
+              });
+          }
         }
-      }
-    });
+      });
 
-    this.recipesService.getRecipes()
-      .then((recipes: RecipeItem[]) => this.recipes = recipes);
+      this.recipesService.getRecipes()
+        .then((recipes: RecipeItem[]) => this.recipes = recipes);
+    }
   }
 
   testApi() {