详解Angular5 服务端渲染实战(4)

代码够简单清晰，和上面描述的原理一致

现在我们只需要对 main.ts 文件进行小小的调整，以便在 DOMContentLoaded 时运行我们的代码，以使 TransferState 正常工作：

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'
import { environment } from './environments/environment'

if (environment.production) {
 enableProdMode()
}

document.addEventListener('DOMContentLoaded', () => {
 platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err))
})

到这里运行 npm run build && node dist/server.js 然后刷新 http://localhost:4200/detail/add 到控制台查看 network 如下：

发现 XHR 分类里面没有发起任何请求，只有 service-worker 的 cache 命中。

到这里坑都踩完了，项目运行正常，没发现其它 bug。

总结

2018 第一篇，目的就是探索所有流行框架服务端渲染的实现，开辟了 angular 这个最后没尝试的框架。

当然 Orange 还是前端小学生一枚，只知道实现，原理说的不是很清楚，源码看的不是很明白，如有纰漏还望指教。

最后 Github 地址和之前文章一样：https://github.com/OrangeXC/udao

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。