角度通用中使用isBrowser函数时出错

问题描述

我试图在角度通用中使用isBrowser函数，但是在构建时始终出现相同的错误.我确实安装了角度通用的npm软件包

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'

'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

这是我的app.module.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 { }

这是我的app/home/landing/landing.ts

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)
  }
}

}

推荐答案

在角度通用示例中，似乎他们使用的是isPlatformBrowser()而不是isBrowser(). https://github.com/angular/universal#universal-gotchas

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.
    }
  }
}

这篇关于角度通用中使用isBrowser函数时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！