angular - Angular 6 Universal 不等待完成解析器

Question

我刚刚安装了 Angular Universal 启动工具包第 6 版并在其中创建了我的组件。该组件应在加载时通​​过 API 获取用户信息并将其显示以供查看。

问题是 API 结果显示在浏览器中，但未显示在“查看源代码”中。什么是万能的好处呢？！

我的getUserscommponent代码：

@Component({
  selector: 'app-get-users',
  templateUrl: './get-users.component.html',
  styleUrls: ['./get-users.component.css'],
  providers: [HttpClient]
})
export class SportFixturesComponent implements OnInit {
  ngOnInit() {
    this.route.params.subscribe(params => {
        this.route.data.subscribe( data =>{
            if (data) {
                this.usersList = data;
            }else{
                this.usersList = [];
            }
        })          
    });
  }
}

在app.module.ts代码中：

import { getUserscommponent } from './get-users-component';
import { getUsersResolver } from './get-users-resolver';

@NgModule({
  declarations: [
    AppComponent,
    getUserscommponent
  ],
  imports: [
    BrowserModule.withServerTransition({appId: 'my-app'}),
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full'},
      { 
        path: 'get-users', 
        component: SportFixturesComponent ,
        resolve  : {fxResolvedList:getUsersResolver} ,
        pathMatch: 'full'
      }
    ]),
    TransferHttpCacheModule,
    HttpModule,
    HttpClientModule
  ],
  providers: [getUsersResolver],
  bootstrap: [AppComponent]
})
export class AppModule { }

在get-users-resolver代码中：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute , Router , Resolve , ActivatedRouteSnapshot , RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class getUsersResolver implements Resolve<any>{

    constructor(private router: Router,private route: ActivatedRoute,private httpClient:HttpClient){}

    resolve(route: ActivatedRouteSnapshot , state: RouterStateSnapshot): Observable<any>|Promise<any>|any {
        interface fxInterface{
            status   : boolean ,
            users : any
        }
        return this.httpClient.post("/api/get-users" , {} , {})
    }
}

当我查看例如关于我们的来源时，我看到：

<router-outlet></router-outlet>
  <app-about-view>
    <h3>About Us text... </h3>
  </app-about-view>
</app-root>

但是当我查看源代码时，我会获取用户组件，请参阅：

<router-outlet></router-outlet></app-root>

即使没有

你能帮我解决这个问题吗？

编辑：

经过一些编辑，现在我收到了这个错误：

    ERROR { Error: Uncaught (in promise): Error
    at resolvePromise (webpack:///./node_modules/zone.js/dist/zone-node.js?:813:31)
    at resolvePromise (webpack:///./node_modules/zone.js/dist/zone-node.js?:770:17)
    at eval (webpack:///./node_modules/zone.js/dist/zone-node.js?:872:17)
    at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:420:31)
    at Object.onInvokeTask (webpack:///./node_modules/@angular/core/fesm5/core.js?:3934:33)
    at ZoneDelegate.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:419:36)
    at Zone.runTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:187:47)
    at drainMicroTaskQueue (webpack:///./node_modules/zone.js/dist/zone-node.js?:594:35)
    at ZoneTask.invokeTask (webpack:///./node_modules/zone.js/dist/zone-node.js?:499:21)
    at Server.ZoneTask.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:484:48)
    at emitTwo (events.js:126:13)
    at Server.emit (events.js:214:7)
    at parserOnIncoming (_http_server.js:619:12)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:115:23)
  rejection: [Error],
  promise: ZoneAwarePromise { __zone_symbol__state: 0, __zone_symbol__value: [Error] },
  zone:
   Zone {
     _properties: { isAngularZone: true },
     _parent:
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     _name: 'angular',
     _zoneDelegate:
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [Object],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: [Object],
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: [Object],
        _invokeZS: [Object],
        _invokeDlgt: [Object],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [Object],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [Object],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [Object],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [Object],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [Object],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task:
   ZoneTask {
     _zone:
      Zone {
        _properties: [Object],
        _parent: [Object],
        _name: 'angular',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: ZoneAwarePromise { __zone_symbol__state: 0, __zone_symbol__value: [Error] },
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

标签： angularangular-universalserver-side-rendering

Answer 1

在我的情况下，我通过将检查是否浏览器添加到解析返回来修复它，例如：

// resolver.ts
import { Injectable, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
...
...
export class ContentResolverService implements Resolve<Observable<any>> {
    constructor(
        @Inject(PLATFORM_ID) private platformId: Object
        private http: HttpClient,
        ) {}

    resolve() {
        return isPlatformBrowser(this.platformId) ? this.http.get('some-url') : null;
    }
}

...