error using isBrowser function in angular universal

Question

I'm trying to use the isBrowser function in angular universal but I keep getting the same error when I build. I did install the npm package of angular-universal

npm i angular2-universal --save

'ng build -prod -aot'

 ERROR in Illegal state: symbol without members expected, but got {"filePath":"C:/dir/universal/website/node_modules/@angular/platform-browser/platform-browser.d.ts","name":"__platform_browser_private__","members":["BROWSER_SANITIZATION_PROVIDERS"]}.

    ERROR in ./src/main.ts
    Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:/dir/universal/website\src'
     @ ./src/main.ts 4:0-74
     @ multi ./src/main.ts

this is my app.module.ts:

//modules
import { HomeModule } from './home/home.module';
import { IntakeFormulierModule } from './intake-formulier/intake-formulier.module';
import { BrowserModule } from '@angular/platform-browser';
import { UniversalModule } from 'angular2-universal/browser';

import { NgModule } from '@angular/core';

//routing
import { routing } from "./app.routing";

//pages
import { AppComponent } from './app.component';

//isbrowser
import { isBrowser } from 'angular2-universal';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({
        appId: 'website-u - (starter)'
    }),
    HomeModule,
    IntakeFormulierModule,
    routing,
  ],
  providers: [
  { provide: 'isBrowser', useValue: isBrowser }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

this is my app/home/landing/landing.ts

import { Component, Inject } from '@angular/core';
import { Router } from '@angular/router';

@Component({
...
})
export class LandingComponent {

  constructor(//public updateTop: TopImageUpdateService, 
  public router: Router,
   @Inject('isBrowser') public isBrowser: boolean) {}

  navigateToResults(name) {
    if (this.isBrowser) {  
    let scrollToTop = window.setInterval(() => {
      let pos = window.pageYOffset;
      if (pos > 0) {
        window.scrollTo(0, pos - 10); // how far to scroll on each step
      } else {
        window.clearInterval(scrollToTop);
        this.router.navigate(['home/page', name]);
      }
    }, 9)
  }
}

}

Camilla

Answer 1

It looks like they are using isPlatformBrowser() instead of isBrowser() in the angular universal example. https://github.com/angular/universal#universal-gotchas

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

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

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

  ngOnInit(){
    if (isPlatformBrowser(this.platformId)) {
     //Client only code.
    } else {
     //Server only code.
    }
  }
}

Burst

Thanks.this is helpful for me also.I need to update meta tags in server .for that I am getting httpclient api response and updated it .Before doing that i need to check for network connectivity.We can't use navigator in server right.how can i achiev this.pls help me – Roommate