记录今天工作遇到的问题

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不像移动端那样需要注意变量类型，完全不注意类型时也会遇到坑！