Check isPlatformBrowser value "false" in template during server-side render

[GetTaxSolutions]

Hi,

I have component which have scripts which are browser specific and we have to run them when open the page in browser. But after last changes to angular 5 if I hit the route to this view directly, isBrowser is false and the script is not executed. If I hit another route and switch to the first will execute it and looks ok (isBrowser is true). I'm using follow code to get isBrowser:

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';
...........................
constructor( @Inject(PLATFORM_ID) private platformId: Object) { }
..........................
public isBrowser = isPlatformBrowser(this.platformId);

What is wrong here. Is it normal to return that isBrowser=false when hit firstly the route?

Thank you
Gettaxsolutions Ltd

[MarkPieszak]

The Browser console is returning false, or a Node console log?

[GetTaxSolutions]

Very strange. I print the value of isBrowser in the console and its's true:

@Component({
  selector: 'app-recent-projects-module',
  templateUrl: './recent-projects-module.component.html',
  styleUrls: ['./recent-projects-module.component.scss']
})
export class RecentProjectsModuleComponent implements OnInit, AfterViewInit, AfterContentInit {
....
ngOnInit() {
    console.log("Is browser: " + this.isBrowser);
}

result is: 'Is browser: true'

But this component have attached view (recent-projects-module.component.html) and in the view this code return false:

============================
      <span>{{isBrowser}}</span>
============================

Result rendered by the component:

============================ false =============================

I tried to investigate and issue appears when we have follow component into the view:
<owl-carousel [options]="carouselOptions" [carouselClasses]="['projects-carousel', 'touch-carousel']" *ngIf="isBrowser"> from ngx-owl-carousel package. It have no errors but isBrowser which is not in this component stay on false state on first load of the page directly from URI.

[MarkPieszak]

The Node server rendered version is going to come out false, but once client-side rendering takes over it'll flip over to true.

You're trying to not use owl-carousel for the Node version I'm guessing.

Try wrapping that directive/component with ng-container, that's typically the best way of conditionally doing it.

<ng-container *ngIf="isBrowser">
  ... stuff you don't want to be SSR'd
</ng-container>

Hope that helps!

[GetTaxSolutions]

It's the same. my stuff (owl-carousel) components it's not visible into the browser's DOM like before because the value of the variable stay in false state.