大佬教程收集整理的这篇文章主要介绍了Angular Universal TransferState未在客户端上加载,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
TransferState
source).
出于某种原因,浏览器应用程序尚未使用状态进行初始化.如果我将测试状态硬编码到我的应用程序的index.html文件中(通过复制和粘贴),那么我的浏览器应用程序已成功初始化为浏览器状态.我不确定出了什么问题.任何想法非常感谢!
我唯一的猜测是,当我在Chrome的检查器中观看我的应用程序加载时,看起来好像大部分元素一次被加载,然后在另一个时候勾选< script id = APP_ID>< / script>出现.这似乎暗示脚本标签是以某种方式在浏览器端生成/处理的,即使我已经检查了服务器的响应并且它包含脚本标记.但是,如果脚本标记在客户端进行某种处理,则可能在处理完成之前初始化TransferState,这就是我的应用程序未接收状态的原因.再次,任何想法都非常感谢!
这是相关代码:
app.module.ts
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { BrowserModule,BrowserTransferStateModule } from '@angular/platform-browser'; import { environment } from '../environments/environment'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppRoutIngModule } from './app-routIng.module'; import { GraphQLModule } from './graphql.module'; @NgModule({ imports: [ BrowserModule.withServerTransition({ appId: 'service-work-coordination' }),BrowserTransferStateModule,AppRoutIngModule,GraphQLModule,],declarations: [AppComponent],bootstrap: [AppComponent],}) export class AppModule {}
app.server.module.ts
import { NgModule } from '@angular/core'; import { ServerModule,ServerTransferStateModule } from '@angular/platform-server'; import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader'; import { AppModule } from './app.module'; import { AppComponent } from './app.component'; @NgModule({ imports: [ AppModule,ServerModule,ServerTransferStateModule,ModuleMapLoaderModule,// <-- *Important* to have lazy-loaded routes work ],// Since the bootstrapped component is not inherited from your // imported AppModule,it needs to be repeated here. bootstrap: [AppComponent],}) export class AppServerModule {}
graphql.module.ts
import { NgModule,APP_ID,PLATFORM_ID,Inject } from '@angular/core'; import { TransferState,makeStateKey } from '@angular/platform-browser'; import { httpClientModule,httpHeaders } from '@angular/common/http'; import { environment } from '../environments/environment'; // Apollo import { ApolloModule,Apollo } from 'apollo-angular'; import { httpLinkmodule,httpLink,httpLinkHandler } from 'apollo-angular-link-http'; import { InMemoryCache,NormalizedCache,NormalizedCacheObject } from 'apollo-cache-inmemory'; import { setContext } from 'apollo-link-context'; import { isPlatformBrowser } from '@angular/common'; const uri = environment.uris.api.graphql; const STATE_KEY = makeStateKey<any>('apollo.state'); @NgModule({ imports: [ httpClientModule,ApolloModule,httpLinkmodule,exports: [ httpClientModule,] }) export class GraphQLModule { private cache: InMemoryCache; private link: httpLinkHandler; constructor( private apollo: Apollo,private transferState: TransferState,private httpLink: httpLink,@Inject(PLATFORM_ID) private platformId: any,) { this.cache = new InMemoryCache(); this.link = this.httpLink.create({ uri }); console.log('transferState: ',this.transferStatE); const isBrowser = this.transferState.hasKey<NormalizedCache>(STATE_KEY); if (isPlatformBrowser(this.platformId)) { this.apollo.create({ link: this.link,cache: this.cache,ssrForceFetchDelay: 100,}); this.onBrowser(); } else { this.apollo.create({ link: this.link,ssrMode: true,}); this.onServer(); } } onServer(): void { this.transferState.onserialize(STATE_KEY,() => this.cache.extract()); } onBrowser(): void { const state = this.transferState.get<NormalizedCacheObject | null>(STATE_KEY,null); if (statE) { this.cache.restore(statE); } } }
简化的服务器响应
<html> <head>...app code...</head> <body> <app-root>...app code...</app-root> <script type="text/javascript" src="inline.6ce41075b82d3dba433b.bundle.js"></script> <script type="text/javascript" src="polyfills.37cc021a2888e752595b.bundle.js"></script> <script type="text/javascript" src="main.1efdc21cec25daa396d1.bundle.js"></script> <script id="service-work-coordination-state" type="application/json">{&q;apollo.state&q;:{&q;$ROOT_QUERY.person({\&q;id\&q;:\&q;074a9421-53bb-44c7-8afe-43130c723bd9\&q;})&q;:{&q;firstName&q;:&q;John&q;,&q;middlename&q;:null,&q;lastName&q;:&q;Carroll&q;,&q;priMaryEmailAddress&q;:&q;:`EmailAddress::Person::Current`:`EmailAddress::Person`:`EmailAddress::Current`:`EmailAddress`:`Current` {uuid: &s;f0c4896a-27da-410b-84d3-3d66e1507a7e&s;}&q;,&q;__typename&q;:&q;Person&q;},&q;ROOT_QUERY&q;:{&q;person({\&q;id\&q;:\&q;074a9421-53bb-44c7-8afe-43130c723bd9\&q;})&q;:{&q;type&q;:&q;id&q;,&q;id&q;:&q;$ROOT_QUERY.person({\&q;id\&q;:\&q;074a9421-53bb-44c7-8afe-43130c723bd9\&q;})&q;,&q;generated&q;:truE}}}}</script> </body> </html>
以上是大佬教程为你收集整理的Angular Universal TransferState未在客户端上加载全部内容,希望文章能够帮你解决Angular Universal TransferState未在客户端上加载所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。