最近接到任務(wù)是需要用angular2+ionic2開(kāi)發(fā)的項(xiàng)目债朵，粗粗的看了一下教程，發(fā)現(xiàn)和之前用的angular cli的用法相似瀑凝，想來(lái)也是簡(jiǎn)單序芦。待到實(shí)際在自己動(dòng)手開(kāi)始配置，才發(fā)現(xiàn)自己的前端開(kāi)發(fā)的基礎(chǔ)是在是有些淺粤咪，短短一個(gè)安裝的過(guò)程就讓我四處碰壁谚中。安裝過(guò)程所使用的命令：
出于穩(wěn)定，先安裝cnpm（有npm的國(guó)內(nèi)鏡像包寥枝，不會(huì)出現(xiàn)被墻而報(bào)錯(cuò)的問(wèn)題）藏杖；
npm install -g cnpm
使用cnpm代替npm，再安裝cordova和ionic
cnpm install -g ionic@2.* cordova@4.2.0
- 先談第一個(gè)問(wèn)題脉顿，對(duì)npm的理解太淺蝌麸，使用npm安裝ionic鏈接下載時(shí)間過(guò)程而導(dǎo)致無(wú)法成功下載，使用cnpm下載則會(huì)十分的流暢艾疟，因?yàn)椴磺宄npm和npm的區(qū)別来吩，這導(dǎo)致在之后查找問(wèn)題的過(guò)程中給自己多加了不少疑問(wèn)難題。
npm與cnpm的區(qū)別只在于安裝包的來(lái)源不同蔽莱，而最后安裝的路徑其實(shí)是一樣的弟疆，cnpm實(shí)際上也算是npm。 - 在我沒(méi)縷清第一個(gè)問(wèn)題我就繼續(xù)往后走了盗冷，于是很快就遇到了第二個(gè)問(wèn)題怠苔，使用ionic serve這條命令導(dǎo)致運(yùn)行報(bào)錯(cuò)，錯(cuò)誤信息部分為：
'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
這下就然我很摸不清問(wèn)題所在了仪糖，看網(wǎng)上的教程都沒(méi)見(jiàn)遇到這樣的問(wèn)題的柑司。于是我就開(kāi)始找原因迫肖，開(kāi)始因?yàn)榈谝粋€(gè)問(wèn)題沒(méi)弄清楚，感覺(jué)是因?yàn)槲矣胏npm的命令而沒(méi)有用npm的原因攒驰，想著正本清源蟆湖，等一番補(bǔ)闕掛漏后發(fā)現(xiàn)對(duì)結(jié)果并沒(méi)有影響，讓我更加罔知所措了玻粪。但這也不能束手待斃隅津，于是我就重新構(gòu)建了一個(gè)ionic的項(xiàng)目，發(fā)現(xiàn)也報(bào)了這個(gè)錯(cuò)誤劲室，這就排除了是安裝cordova出的錯(cuò)誤伦仍，幾番查找資料下來(lái)發(fā)現(xiàn)新建項(xiàng)目報(bào)錯(cuò)的原因有兩個(gè)：
- 第一個(gè)報(bào)警的本質(zhì)問(wèn)題應(yīng)該就是地址被墻了，github.com ping不通導(dǎo)致很洋，兩個(gè)方案最后都使得連接超時(shí)的錯(cuò)誤被解決充蓝；但是這又會(huì)導(dǎo)致第二個(gè)錯(cuò)誤無(wú)法繞過(guò)去
- 這里兩步其實(shí)是在安裝項(xiàng)目依賴(lài)，你會(huì)看到期間有node_module文件夾被創(chuàng)建出來(lái)蹲缠，并在里面不斷生成依賴(lài)庫(kù)，但是卻無(wú)法徹底安裝完成悠垛，從而阻塞了其余項(xiàng)目文件的創(chuàng)建线定，導(dǎo)致安裝失敗
總結(jié)起來(lái)就是ionic自帶的創(chuàng)建命令使用的是npm的命令，使得有些依賴(lài)包無(wú)法順利下載下來(lái)确买。使用國(guó)內(nèi)鏡像
的cnpm的命令就能解決問(wèn)題斤讥。這時(shí)的解決方法是：
創(chuàng)建項(xiàng)目的時(shí)候，先行屏蔽掉依賴(lài)的安裝：
ionic start myApp --skip-npm
等到項(xiàng)目創(chuàng)建完畢后湾趾，進(jìn)入項(xiàng)目自動(dòng)創(chuàng)建的myAPP文件夾芭商，再使用npm國(guó)內(nèi)鏡像去安裝依賴(lài)：
cnpm install --save
然后使用ionic serce命令就能運(yùn)行起來(lái)了。
觸類(lèi)旁通搀缠，我就試著在我現(xiàn)有的項(xiàng)目下使用
cnpm install --save
發(fā)現(xiàn)使用這個(gè)命令果然加載到了幾個(gè)依賴(lài)包铛楣，然后再運(yùn)行ionic serce命令于是也能正常啟動(dòng)了。
問(wèn)題：
1艺普、 解決解決angular Js中出現(xiàn)unsafe:data:;base64,的問(wèn)題：
問(wèn)題詳情（console/network請(qǐng)求報(bào)錯(cuò)）：
unsafe:data:;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQ...
原因：Angular2 拋出此錯(cuò)誤簸州，是因?yàn)锳ngular2 有自身的一套安全過(guò)濾系統(tǒng)，src 屬性是資源 URL 安全上下文歧譬，因?yàn)椴豢尚旁纯梢栽谟脩舨恢榈那闆r下執(zhí)行某些不安全的操作岸浑。但如果我們確認(rèn)資源的 URL 是安全的，我們可以使用 Angular 2 中提供的 DomSanitizer 服務(wù)告知 Angular2 該 URL 地址是安全的瑰步。
例如矢洲，需要?jiǎng)討B(tài)綁定一個(gè)url，angular2會(huì)諸如使用：unsafe:xxx的手段缩焦，自動(dòng)把它無(wú)害化读虏。但有時(shí)候它會(huì)導(dǎo)致我們得不到預(yù)期的運(yùn)行結(jié)果责静，當(dāng)我們使用圖片時(shí)，直接將其對(duì)象賦值給img標(biāo)簽的src通常會(huì)由于該安全機(jī)制而報(bào)錯(cuò)掘譬。此時(shí)就有必要使用angular2提供的api泰演，即DomSanitizer信任它。
操作：
注入DomSanitizer
import { DomSanitizer } from '@angular/platform-browser'
在construct函數(shù)中聲明
private sanitizer : DomSanitizer
安全包裝url
// 根據(jù)需要調(diào)用下面的方法之一
html = sanitizer.bypassSecurityTrustHtml(html)
script = sanitizer.bypassSecurityTrustScript(script)
style = sanitizer.bypassSecurityTrustStyle(style)
url = sanitizer.bypassSecurityTrustUrl(url)
url = sanitizer.bypassSecurityTrustResourceUrl(url)
2葱轩、 使用angular2進(jìn)行文件上傳：
使用接口詳情：
data: [{
"title":"IMG_8888_00x",
"files": ["3.jpg"],
"subject": "生命科學(xué)"
}]
使用的html：
<img [src]="headers">
<button><span>上傳圖片</span><input type="file" id="uploadVideo" (change)="changeFile($event)"/> </button>
<button (click)="goToSave()">保存</button>
使用的函數(shù)：
// 上傳圖片
changeFile(event:any){
let reader = new FileReader();
let $this:any = this;
let file:File = event.target.files[0];
if(file==null){
return;
}
//預(yù)覽圖片
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函數(shù)：
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);
});
});
}
