Angular 6 Universal不等待完成分解器
我刚刚安装了Angular Universal start kit版本6，并在其中创建了我的组件。此组件应通过加载的API获取用户信息，并将其显示给视图 问题是API结果显示在浏览器中，但未显示在“查看源代码””中。什么是普遍的利益呢 MyAngular 6 Universal不等待完成分解器,angular,angular-universal,server-side-rendering,Angular,Angular Universal,Server Side Rendering,我刚刚安装了Angular Universal start kit版本6，并在其中创建了我的组件。此组件应通过加载的API获取用户信息，并将其显示给视图 问题是API结果显示在浏览器中，但未显示在“查看源代码””中。什么是普遍的利益呢 MyGetUsersComponentcode: @Component({ selector: 'app-get-users', templateUrl: './get-users.component.html', styleUrls: ['./get
GetUsersComponent@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.tsimport { 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 { }
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" , {} , {})
}
}
获取用户解析程序中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 { }
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" , {} , {})
}
}
从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从'@angular/Router'导入{ActivatedRoute，Router，Resolve，ActivatedRouteSnapshot，RouterStateSnashot}；
从“rxjs”导入{Observable}；
@可注射（）
导出类getUsersResolver实现解析{
构造函数（专用路由器：路由器，专用路由：ActivatedRoute，专用httpClient:httpClient）{}
解析（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察|承诺|任何{
接口FX接口{
状态：布尔，
用户：有吗
}
返回此.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] } }
ERROR{ERROR:Uncaught（承诺中）：ERROR
允诺(webpack:///./node_modules/zone.js/dist/zone-node.js?:813:31)
允诺(webpack:///./node_modules/zone.js/dist/zone-node.js?:770:17)
评估时(webpack:///./node_modules/zone.js/dist/zone-node.js?:872:17)
在ZoneDelegate.invokeTask(webpack:///./node_modules/zone.js/dist/zone-node.js?:420:31)
在Object.onInvokeTask(webpack:///./node_modules/@角度/core/fesm5/core.js？：3934:33）
在ZoneDelegate.invokeTask(webpack:///./node_modules/zone.js/dist/zone-node.js?:419:36)
在Zone.runTask(webpack:///./node_modules/zone.js/dist/zone-node.js?:187:47)
在drainMicroTaskQueue(webpack:///./node_modules/zone.js/dist/zone-node.js?:594:35)
在ZoneTask.invokeTask(webpack:///./node_modules/zone.js/dist/zone-node.js?:499:21)
在Server.ZoneTask.invoke上(webpack:///./node_modules/zone.js/dist/zone-node.js?:484:48)
两点钟（events.js:126:13）
在Server.emit上（events.js:214:7）
在parserOnIncoming（_http_server.js:619:12）
在HTTPParser.parserOnHeadersComplete（_http_common.js:115:23）
拒绝：[错误]，
承诺：ZoneAwarePromise{{uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu区符号状态：0，{uuuuuuuuuuuuuuuuuuuuu，
区域：
地带{
_属性：{isAngularZone:true}，
_家长：
地带{
_属性：{}，
_父项：null，
_名称：“”，
_zoneDelegate:[对象]}，
_名称：'angular'，
_分区公使：
分区公使{
_任务计数：[对象]，
分区：[环行]，
_parentDelegate:[对象]，
_forkZS:null，
_forkDlgt:null，
_forkCurrZone:[对象]，
_截取zs:null，
_截取dlgt:null，
_区域：[对象]，
_invokeZS:[对象]，
_invokeDlgt:[对象]，
_invokeCurrZone:[循环]，
_handleErrorZS:[对象]，
_handleErrorDlgt:[对象]，
_HandleErrorArrcurZone:[圆形]，
_scheduleTaskZS:[对象]，
_scheduleTaskDlgt:[对象]，
_scheduleTaskCurrZone:[循环]，
_invokeTaskZS:[对象]，
_invokeTaskDlgt:[对象]，
_invokeTaskCurrZone:[循环]，
_cancelTaskZS:[对象]，
_cancelTaskDlgt:[对象]，
_取消区域：[圆形]，
_hasTaskZS:[对象]，
_hasTaskDlgt:[对象]，
_hasTaskDlgtOwner:[通告]，
_hasTaskCurrZone:[圆形]}，
任务：
佐涅茨克{
_区域：
地带{
_属性：[对象]，
_父：[对象]，
_名称：'angular'，
_zoneDelegate:[对象]}，
运行计数：0，
_zoneDelegates:空，
_状态：“未计划”，
类型：“微任务”，
来源：'承诺，然后'，
数据：ZoneAwarePromise{{uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu符号状态：0，{uuuuuuuuuuuuuuuuuuu，
附表fn：未定义，
取消fn:null，
回调：[函数]，
调用：[函数]}
服务器->optionsangular.json“bundleDependencies”：“all”在一个上找到此注释在我的案例中，我通过在resolve return中添加Check is it Browser来修复它，如：
// 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;
}
}
...
//resolver.ts
从“@angular/core”导入{Injectable，PLATFORM_ID，injection}；
从“@angular/common”导入{isPlatformBrowser，isPlatformServer}；
...
...
导出类ContentResolverService实现解析{
建造师(
@注入（平台ID）私有平台ID:对象
私有http:HttpClient，
) {}
解决（）{
返回isPlatformBrowser（this.platformId）？this.http.get（'some-url'）：null；
}
}
...
post