首页 文章

Angular 6 Universal不会等待整理解析器

提问于
浏览
2

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

问题是API结果显示在浏览器中但未显示在“ view source ”中 . 普遍的好处是什么?!

我的 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" , {} , {})
    }
}

当我查看例如 About Us 的来源时,我看到:

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

但当我查看源我 Get Users Component 时看到:

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

即使没有

你能帮我解决这个问题 .

编辑:

And after some edits, now I got this error:

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

1 回答

  • 0

    尝试将 "bundleDependencies": "all" 添加到 server -> optionsserver -> options 中 .

    github issue上发现此评论

相关问题