2016年4月29日 星期五

Angular 2.0.0-beta.17 breaking changes

Angular 2 更該至 beta.17 後,發生 warning:
Template parse warnings:
"#" inside of expressions is deprecated. Use "Let" instead! ....

似乎有做小改版,趕緊來看看 release note ,內容如下:

Before:
  • Outside of ngFor, a #... meant a reference.
  • Inside of ngFor, it meant a local variable.
This was pattern was confusing.

After:
  • <template #abc> now defines a reference to a TemplateRef, instead of an input variable used inside of the template.
  • Inside of structural directives that declare local variables, such as *ngFor, usage of #... is deprecated. Use let instead.
    • <div *ngFor="#item of items"> now becomes <div *ngFor="let item of items">
  • var-... is deprecated.
    • use # or a ref- outside of *ngFor
    • for ngFor, use the syntax: <template ngFor let-... [ngForOf]="...">

簡單說 # 的用法會讓人混淆,
搭配 ngFor 使用,是定義迴圈內的私有變數,
但放在 dom element attribute 位置時,指的又是此 dom element 的參考,

為避免混淆,所以 ngFor 改用 let 宣告私有變數,
就是這麼一回事,
了解前因後果後,
就不會想要翻桌,
狂罵改個屁呀!

Angular 2.0.0-beta.17 install Error: Invalid module name in augmentation, module '../../Observable' cannot be found.

今天發現 angular 2 已可更新至 beta.17,
抓緊時間從 beta.15 更新至 beta.17,
官方建議 ( 2016/04/29 ) 的 packages 如下:
"angular2": "2.0.0-beta.17",
"systemjs": "0.19.26",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"

還是發生問題了,錯誤訊息如下:
Invalid module name in augmentation, module '../../Observable' cannot be found.

google 大神跟我說,問題點在 rxjs,
將 rxjs 版本改回 5.0.0-beta.2 即可,
所以我用的 packages 如下:
"angular2": "2.0.0-beta.17",
"systemjs": "0.19.26",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.12"

這樣問題就解決囉!







2016年4月20日 星期三

Angular 2.0.0-beta.15 install Error: npm ERR! cb() never called!


這星期開工,發現 angular2 又進版至 beta.15
帶著興奮的心情,打開 packag.json 檔,進行更新,
卻事與願違,發生了 error,這就是人生呀!!
npm ERR! cb() never called!

還是必須請出 google 大神,看看該如何解決,
終於發現網友熱心的分享,
只要將 node js 更新至 v5.10.1 版即可!

測試後,已正常安裝 Angular 2.0.0-beta.15

2016年4月13日 星期三

fix Angular2 error- this.http.post(...).map(...).catch is not a function in [null]


今天嘗試在 angular2 透過 http 物件,呼叫 web service 拿資料,
卻發生 this.http.post(...).map(...).catch is not a function in [null]  error


solution:
import 這個即可:
import 'rxjs/add/operator/map'

如果覺得麻煩,就整包 import 吧!
import 'rxjs/Rx';

2016年4月6日 星期三

Angular2 beta.13 Error: More tasks executed then were scheduled


今天開始要用 angular2 實作功能,
先升級 Angular2 至最新版 beta.13 ,

但在我建置好 angular2 的環境後,
卻一直拋出 More tasks executed then were scheduled exception,


東追西找後,主要是因為我在同一頁面有做 jquery ui autocomplete 的處理導致,
把這部分的程式 mark 掉即可,
這就怪了! 這關 angular 2 什麼事!?
在請出 google 大神後,發現原來是 beta13 有問題,

網友提供一個暫時的解決方式:
找到這個檔案: node_modules\angular2\bundles\angular2-polyfills.js file
註解第 398 行:throw new Error('More tasks executed then were scheduled.');


先這樣暫時撐著用吧!
希望下一版能解決此問題囉!


[更新]
2.0.0-beta.15 已修正此問題