官網文檔:angular.io/guide/unive…css
《Angular5 服務端渲染實戰》:閱讀資料html
《angualr 6+ 服務端渲染 SSR 問題記錄》:閱讀資料node
參照官方文檔,在新建的angular8項目內部安裝。遇到的問題結合另外兩個連接進行配置和解決便可。另外,因爲在本次練習中使用了 localstorage
,而服務器端渲染不支持瀏覽器api,於是須要下載插件進行配置。android
// server.ts
// cmd: npm install localstorage-polyfill
import 'localstorage-polyfill';
global['localStorage'] = localStorage;
複製代碼
執行 npm run build:ssr
, 運行node.js,點擊localhost進行查看。文本直接渲染顯示,配置成功。 npm
src/index.html
的<app-root></app-root>
內寫入加載動畫c#
src/style.css
寫入加載動畫windows
src/app/pages/home-page/home-page.html
寫法以下api
<div class="content" *ngIf="galleryList; else loading">
//在加載gallertList完畢以前,顯示#loading
...
</div>
<ng-template #loading>
//搭建骨架屏,使用靜態頁面填充
//何爲骨架屏 --> https://ng.ant.design/components/skeleton/zh
...
</ng-template>
複製代碼
配置cordova:cordova中文網瀏覽器
管理員身份運行
打開cmd,進入項目文件。執行cordova新建命令:cordova create [文件名]
進入mobile文件,刪除原www文件,軟鏈接dist文件。如下3步均在cordova項目內執行,此處即我新建的mobile文件夾下。bash
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的顏,寫點小清新的東西淨化心靈,就一塊兒用上了。初體驗一下仍是蠻開心的,也和前輩總結出很多有意思的東西。雖然知曉還有很多東西值得深挖。因此嘛,雖然上海最近的天氣不是很美麗,但仍是很快樂遊了坑。 最後,祝你們,一塊兒遊坑快樂哦。