記錄今天工做遇到的問題

1.angular前端項目6到8的升級

按照官網文檔(https://update.angular.io/#6.0:8.0)升級，須要刪除node_modules、package-lock.json、yarn.lock；

升級完成後，其餘人git clone/git pull項目，一樣須要升級node(nvm方便管理)，cli也須要升級，否則ng cli命令沒法執行;

yarn 或npm install後，npm ls查看丟失的依賴，項目可成功運行便可，不然須要安裝指定的依賴包

2.angular前端項目中es6與node的認知混亂

前端項目本打算讀取assets/static文件夾下的靜態資源，發現將es5更新了es6，而node_modules下又自帶@types/node，覺得能夠在前端項目中使用node的require 、fs；修改了tsconfig.app.json文件，types: ["node"]，而後發現node的引入方式也變化了:

// import fs from 'fs'; //引入時未報錯，但使用時要加 fs.default.read也報錯
// import { stat, exists, readFile } from 'fs'; Module '"fs"' has no exported member 'fs'.
// Module '"fs"' has no default export.

// import * as fs from 'fs';
// import * as path from 'path';

// var fs = require('fs');
// var pathUtil = require('path');

// declare const require: any; 
// const fs = require('fs')

以上方式均不行，最後放棄使用node讀取項目下文件，採用了笨方法相對路徑引入資源文件;其實一開始就知道出於安全性考慮，不能使用node讀取文件

3.pdf靜態資源的預覽

使用瀏覽器自帶pdf插件，打開一個新頁面可預覽，定製化較差

做爲html的一部分直接顯示pdf，html5標籤有embed、iframe等，插件包有PDFObject、pdf.js等，因爲需求只用來展現內容，因此選擇了用html5標籤的方式。

須要注意的地方:

src綁定:ts中聲明的變量類型爲any，而不能爲string，不然會出現unsafe resouces url的錯誤，避免再出現其它錯誤，又使用了DomSanitizer過濾了url

const tmp = '/assets/static/wiki/' + encodeURI(this.fullname);
this.filePath = this.sanitizer.bypassSecurityTrustResourceUrl(tmp);

<iframe [src]="filePath" width="100%" height="100%"> </iframe>

中文靜態資源文件名出現亂碼、不顯示的問題，解決方法：

1. 將本地文件中文改成英文，將顯示爲英文

2. 經過鍵值對的方式，增長字段屬性，將靜態文件更名，在地址欄可顯示爲中文和英文，具體以Routes定義傳參爲準

3. 文件名不變，可在上一級頁面或本級頁面，使用encodeURI編解碼，在地址欄可顯示爲中文和英文，具體以Routes定義傳參爲準

多文件路由切換後，iframe未發生變化，解決方法：

ngOnInit() {
    // 監聽URL參數變化
    this.routeInfo.params.subscribe(params => {
      this.fullname = params.filename;
      this.fileDisplay(); // 文件處理邏輯函數
    });
  }

本地文件路徑的問題：

一些pdf靜態資源放到了assets/static下，iframe src綁定時，也需以assets爲根目錄開始，如

<iframe src="/assets/static/wiki/開發者閱讀.pdf" width="100%" height="100%"> </iframe> 

 

今天遇到的問題就這些，本覺得ts不像移動端那樣須要注意變量類型，徹底不注意類型時也會遇到坑！