我试图在我的Angular Universal v5应用程序中使用TransferState。经过大量调试后，我意识到在服务器上，TransferState似乎可以正常工作，因为响应包含一个<script id=APP_ID></script>标记，该标记包含适当的序列化状态( 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.tsimport { 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.tsimport { 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,
ApolloModule,
HttpLinkModule,
]
})
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,
cache: this.cache,
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>
最佳答案
Uggg ...所以事实证明我已经遇到了一个已知的bug in Angular(谢天谢地)ojit_a。正在以某种方式处理/加载脚本标签时，在客户端上启动TransferState。为了解决这个问题，目前您需要延迟 Angular 客户端应用程序的自举。
更新main.ts
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic()
.bootstrapModule(AppModule)
});
关于Angular Universal TransferState未在客户端上加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47620181/