Angular Universal初体验以及首屏优化方案讨论

目标

• 防止页面刷新的瞬间空白

效果动画

方法介绍 (基于Angular8)

• 01 Angular Universal（首屏输出）
• 02 使用ngIf方法以及Index.html写入动画
• 03 补充点：如何只用Angular与cordova直接打包(windows)

01 Angular Universal

官网文档：angular.io/guide/unive…

《Angular5 服务端渲染实战》：阅读资料

《angualr 6+ 服务端渲染 SSR 问题记录》：阅读资料

参照官方文档，在新建的angular8项目内部安装。遇到的问题结合另外两个连接进行配置和解决便可。另外，因为在本次练习中使用了 localstorage ，而服务器端渲染不支持浏览器api，于是须要下载插件进行配置。

//  server.ts
//  cmd: npm install localstorage-polyfill
import 'localstorage-polyfill';
global['localStorage'] = localStorage;
复制代码

执行 npm run build:ssr , 运行node.js，点击localhost进行查看。文本直接渲染显示，配置成功。

02 使用ngIf方法以及Index.html写入动画

src/index.html的<app-root></app-root>内写入加载动画

src/style.css写入加载动画

src/app/pages/home-page/home-page.html写法以下

<div class="content" *ngIf="galleryList; else loading">
  //在加载gallertList完毕以前，显示#loading
  ...
</div>

<ng-template #loading>
 //搭建骨架屏，使用静态页面填充
 //何为骨架屏 --> https://ng.ant.design/components/skeleton/zh
  ...
</ng-template>
复制代码

03 补充点：如何只用Angular与cordova直接打包(windows)

配置cordova：cordova中文网

• 使用管理员身份运行打开cmd，进入项目文件。执行cordova新建命令：cordova create [文件名]

  

• 进入mobile文件，删除原www文件，软链接dist文件。如下3步均在cordova项目内执行，此处即我新建的mobile文件夹下。

  cd mobile : 进入cordova文件

  rmdir /s www : 删除www文件

  

  mklink /d [目标文件][源文件] : 将mobile/www和build出的dist文件同步

  

• 修改文件

browser/index.html :

<base href="/">  --修改成-->  < base href="./">
复制代码

mobile/config.xml :

<content src="index.html" />  --修改成-->  <content src="/browser/index.html" />
复制代码

必须修改以上文件的对应路径，不然打包出来的应用在模拟器上运行会报出以下错误。

最后，执行cordova platform add android在模拟器上运行便可。

总结

最近作的Loading一直都在用小菊花转啊转的，就想除了旋转也来尝试下另外一种加载形式—骨架屏。加之这几天也在研究服务端渲染，顺便也想舔舔我OOR的颜，写点小清新的东西净化心灵，就一块儿用上了。初体验一下仍是蛮开心的，也和前辈总结出很多有意思的东西。虽然知晓还有很多东西值得深挖。因此嘛，虽然上海最近的天气不是很美丽，但仍是很快乐游了坑。 最后，祝你们，一块儿游坑快乐哦。