Angular 5 StateTransfer无法正常工作，请求技术支持

看起来你已经离解决问题很近了——服务端已经生成了包含状态的script标签，但客户端就是读不到，核心问题大概率是服务端和客户端的APP_ID不一致，导致TransferState找不到对应的状态标签。

问题根源 #

你在客户端的AppModule里设置了appId: 'fhh-app'，所以服务端生成的状态标签id是fhh-app-state，但如果服务端没有明确提供相同的APP_ID，客户端的TransferState会默认查找app-state标签，自然读不到你已经生成的状态内容。

修复步骤 #

修改你的server.ts，在renderModuleFactory的extraProviders中添加APP_ID的provider，确保和客户端的appId完全一致：

const app = express();
const compression = require('compression');
app.use(compression());

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');
const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();

const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
// 导入APP_ID
const { APP_ID } = require('@angular/core');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: options.req.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      // 添加与客户端一致的APP_ID
      { provide: APP_ID, useValue: 'fhh-app' }
    ]
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

额外排查点 #

1. 验证服务端是否正确设置状态：确保服务端控制台输出了state 2，说明组件在服务端初始化时确实写入了状态。
2. 检查客户端状态读取时机：你在ngOnInit中读取状态是没问题的，但如果还是有问题，可以尝试在APP_INITIALIZER中提前初始化状态，确保TransferState完成解析：

   // 在AppModule的providers中添加
   {
     provide: APP_INITIALIZER,
     useFactory: (state: TransferState) => () => {
       const FEATURE_KEY = makeStateKey('featured_key');
       const serverState = state.get(FEATURE_KEY, null);
       if (serverState) {
         // 处理服务端状态
       }
     },
     deps: [TransferState],
     multi: true
   }
   

3. 确认script标签内容：浏览器中查看fhh-app-state标签的textContent，应该是未转义的JSON（比如{"featured_key":"Im created on the server!"}），如果还是转义的，说明服务端序列化有问题，添加APP_ID后应该能解决。

为什么之前的代码不行？ #

服务端的ServerTransferStateModule依赖APP_ID来生成状态标签的id，而客户端的BrowserTransferStateModule同样依赖APP_ID来查找对应的标签。如果服务端没有明确提供APP_ID，它会生成一个随机值，导致两端的标签id不匹配，自然读不到状态。

内容的提问来源于stack exchange，提问作者Ephraim Schmitt