angular2+ionic2安装中遇到的问题及解决

最近接到任务是需要用angular2+ionic2开发的项目，粗粗的看了一下教程，发现和之前用的angular cli的用法相似，想来也是简单。待到实际在自己动手开始配置，才发现自己的前端开发的基础是在是有些浅，短短一个安装的过程就让我四处碰壁。安装过程所使用的命令：
出于稳定，先安装cnpm（有npm的国内镜像包，不会出现被墙而报错的问题）；

npm install -g cnpm

使用cnpm代替npm，再安装cordova和ionic

cnpm install -g ionic@2.* cordova@4.2.0

先谈第一个问题，对npm的理解太浅，使用npm安装ionic链接下载时间过程而导致无法成功下载，使用cnpm下载则会十分的流畅，因为不清楚cnpm和npm的区别，这导致在之后查找问题的过程中给自己多加了不少疑问难题。npm与cnpm的区别只在于安装包的来源不同，而最后安装的路径其实是一样的，cnpm实际上也算是npm。
在我没缕清第一个问题我就继续往后走了，于是很快就遇到了第二个问题，使用ionic serve这条命令导致运行报错，错误信息部分为：

'ionic-app-scripts' ▒▒▒▒▒ڲ▒▒▒▒ⲿ▒▒▒Ҳ▒▒▒ǿ▒▒▒▒еĳ▒▒▒
▒▒▒▒▒▒▒▒▒ļ▒▒▒
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ionic-jetsen@ ionic:serve: ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-jetsen@ ionic:serve script 'ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-jetsen package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts serve "--v2" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-jetsen
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic-jetsen
npm ERR! There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2017-04-08T07_03_47_978Z-debug.log
There was an error serving your Ionic application: There was an error with the spawned command: serve

这下就然我很摸不清问题所在了，看网上的教程都没见遇到这样的问题的。于是我就开始找原因，开始因为第一个问题没弄清楚，感觉是因为我用cnpm的命令而没有用npm的原因，想着正本清源，等一番补阙挂漏后发现对结果并没有影响，让我更加罔知所措了。但这也不能束手待毙，于是我就重新构建了一个ionic的项目，发现也报了这个错误，这就排除了是安装cordova出的错误，几番查找资料下来发现新建项目报错的原因有两个：

第一个报警的本质问题应该就是地址被墙了，github.com ping不通导致，两个方案最后都使得连接超时的错误被解决；但是这又会导致第二个错误无法绕过去
这里两步其实是在安装项目依赖，你会看到期间有node_module文件夹被创建出来，并在里面不断生成依赖库，但是却无法彻底安装完成，从而阻塞了其余项目文件的创建，导致安装失败

总结起来就是ionic自带的创建命令使用的是npm的命令，使得有些依赖包无法顺利下载下来。使用国内镜像
的cnpm的命令就能解决问题。这时的解决方法是：
创建项目的时候，先行屏蔽掉依赖的安装：

ionic start myApp --skip-npm

等到项目创建完毕后，进入项目自动创建的myAPP文件夹，再使用npm国内镜像去安装依赖：

cnpm install --save

然后使用ionic serce命令就能运行起来了。
触类旁通，我就试着在我现有的项目下使用

cnpm install --save

发现使用这个命令果然加载到了几个依赖包，然后再运行ionic serce命令于是也能正常启动了。

问题：

1、解决解决angular Js中出现unsafe:data:;base64,的问题：
问题详情（console/network请求报错）：

unsafe:data:;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQ...

原因：Angular2 抛出此错误，是因为Angular2 有自身的一套安全过滤系统，src 属性是资源 URL 安全上下文，因为不可信源可以在用户不知情的情况下执行某些不安全的操作。但如果我们确认资源的 URL 是安全的，我们可以使用 Angular 2 中提供的 DomSanitizer 服务告知 Angular2 该 URL 地址是安全的。
例如，需要动态绑定一个url，angular2会诸如使用：unsafe:xxx的手段，自动把它无害化。但有时候它会导致我们得不到预期的运行结果，当我们使用图片时，直接将其对象赋值给img标签的src通常会由于该安全机制而报错。此时就有必要使用angular2提供的api，即DomSanitizer信任它。

操作：
注入DomSanitizer

import { DomSanitizer } from '@angular/platform-browser'

在construct函数中声明

private sanitizer : DomSanitizer

安全包装url

// 根据需要调用下面的方法之一
html = sanitizer.bypassSecurityTrustHtml(html)
script = sanitizer.bypassSecurityTrustScript(script)
style = sanitizer.bypassSecurityTrustStyle(style)
url = sanitizer.bypassSecurityTrustUrl(url)
url = sanitizer.bypassSecurityTrustResourceUrl(url)

2、使用angular2进行文件上传：
使用接口详情：

data: [{
   "title":"IMG_8888_00x",
   "files": ["3.jpg"],
   "subject": "生命科学"
}]

使用的html：


<img [src]="headers">
<button><span>上传图片</span><input type="file" id="uploadVideo" (change)="changeFile($event)"/> </button>  
<button (click)="goToSave()">保存</button>

使用的函数：

// 上传图片
 changeFile(event:any){
   let reader = new FileReader();
   let $this:any = this;
   let file:File = event.target.files[0];
   if(file==null){
     return;
   }
   //预览图片
   reader.readAsDataURL(file);
   reader.onload = function(e){
     $this.headers=this.result;
   }
   this.infos.photo=file.name;
   this.files = [];
   this.files.push(file);
 }
//使用接口保存图片
goToSave(){
   let url_data = this.infos;
   let _this = this;
   _this.url = localStorage.getItem("serveUrl")+"/user/"+_this.user_uuid+"?ticket="+_this.ticket;
   this.mypages.postFile(_this.url,JSON.stringify(url_data),_this.files).then(function(v:any) {
       console.log(v);
   })
 }

核心postFile函数：

postFile(url,data,files){
    let headers = new Headers();
    let body:any;
    var formData = new FormData();
    formData.append('data', data);
    for (var i = 0; i < files.length;i++) {
      formData.append(files[i].name, files[i]);
    }
    body =  formData;
    let options = new RequestOptions({ headers: headers });
    return new Promise(resolve => {
          this.api.put(url, body, options).share().subscribe(res => {
            console.log("putDataOK");
            this.data = res.json();
            resolve(this.data);
          });
      });
  }

angular2+ionic2安装中遇到的问题及解决

问题：

推荐阅读更多精彩内容