程岳: angular2

顯示具有 angular2 標籤的文章。顯示所有文章

2017年1月26日星期四

Angular2-RC4 animate error

執行 angular2 RC4 版本的 web，之前都正常，
近日突然發生以下錯誤訊息，導致網頁無法正常執行∶

EXCEPTION: Error during instantiation of AnimationDriver! (ViewUtils -> RootRenderer -> DomRootRenderer -> AnimationDriver

執行環境是 firefox ，我的版本是 50.1 (隨時在更新)，
剛好同事有較舊本的 firefox ，測試正常，更新後即發生一樣的錯誤狀況，

只好請出 google 找辦法，
( 不要問我為什麼不升級 QQ )
還好有人遇到類似的問題，

將 html 引用 <script...></script> 通通放到 </body> 的上面，就解決了，過關!!

參考∶ JSPM Angular2-rc2 build animate error

2016年6月28日星期二

upgrade angular2 new ngForm ( RC3 )

將 angular2 升至 RC2 後，就出現了一段警告訊息：

*It looks like you're using the old forms module. This will be opt-in in the next RC, and will eventually be removed in favor of the new forms module. For more information, see: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

看來在 RC2 後，ngForm 做了一番修正，需要做一些破壞性的處理，
以下是將舊版 ngForm 升級至新版的步驟：
(目前已升至 RC3 )

1. main.ts 加入：

import { disableDeprecatedForms, provideForms } 
    from '@angular/forms';

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms() ]);

2. component 修改部分：

import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgForm, Control}
    from '@angular/common';
...

@Component({ 
    directives: [FORM_DIRECTIVES]
})

修正為：

import {CORE_DIRECTIVES}    from '@angular/common';
import {REACTIVE_FORM_DIRECTIVES, FormControl, FormGroup}
    from '@angular/forms';
...
@Component({
    directives: [REACTIVE_FORM_DIRECTIVES]
})

3. form class 更名，尤其是有用 FormBuilder 做客製化驗證的部分：

REACTIVE_FORM_DIRECTIVES:

formGroup (deprecated: ngFormModel)
formControl (deprecated: ngFormControl)
formControlName (deprecated: ngControl)
formGroupName (deprecated: ngControlGroup)
formArrayName (deprecated: ngControlGroup)
FormControl() (deprecated: Control)
FormGroup() (deprecated: ControlGroup)
FormArray() (deprecated: ControlArray)
FormBuilder (same)
Validators (same)

4. form control ( input, select...)，需加上 name attribute，
#name="ngForm" 要改為 #name="ngModel"：

<input type="text" class="form-control" required
                           [(ngModel)]="name"
                           ngControl="name"
                           #name="ngForm" />

修改為：

<input type="text" class="form-control" required
                           [(ngModel)]="name"
                           ngControl="name"
                           name="name"
                           #name="ngModel" />

5. ngFormModel, ngControl 修改部分 ( HTML )：

<form #templateForm="ngForm" 
          [ngFormModel]="_form" />
    <input type="text" class="form-control" required
                           [(ngModel)]="TemplateName"
                           pattern="^[a-zA-Z0-9_.\-\u4e00-\u9fa5-\(-\)\s]+$"
                           ngControl="TemplateName" />

</form>

修改為：

<form #templateForm="ngForm" 
          [formGroup]="_form" />
    <input type="text" class="form-control" required
                           name="TemplateName"
                           [(ngModel)]="TemplateName"
                           pattern="^[a-zA-Z0-9_.\-\u4e00-\u9fa5-\(-\)\s]+$"
                           formControlName="TemplateName" />

</form>

6. ngFormModel, ngControl 修改部分 ( typescript)：：

_form: ControlGroup;
constructor(
        @Inject(FormBuilder) fb: FormBuilder
    ) {
        this._addTemplateForm = fb.group({
            TemplateName: ['', Validators.required]
        })
    }

修改為：

_form: FormGroup;
constructor(
        @Inject(FormBuilder) fb: FormBuilder
    ) {
        this._addTemplateForm = fb.group({
            TemplateName: ['', Validators.required]
        })
    }

升級步驟大致如上，希望可以幫助到各位囉！

2016年5月24日星期二

Angular2 : How to update ngModel in directive

實作 angular2 directive 遇到一個問題，
當實作 datepicker directive 時，若已選擇日期，則同時更新 _Model.DataFrom 的值，
如下圖 _Model.DataFrom 是雙向繫結在 input 上

經研究後發現，步驟如下： ( 參加下圖 )

在 directive 的建構子宣告 @Self() cd: NgModel，即可拿到 NgModel 的 reference
需要更新 NgModel 的值的時候，呼叫 _ngModel.viewToModelUpdate(your new value)

就這樣打完收工囉！

2016年5月16日星期一

Angular 2 RC1 error handling in VS2015

自從升級至 Angular2 RC1 後，
VS2015 一直提示以下錯誤訊息：

Invalid module name in augmentation, module '../../Observable' cannot be found.
Property 'map' does not exist on type 'Observable'

可是又 Build 得過，執行網頁也沒有問題，
但看到這一堆錯誤訊息，就覺得心浮氣躁，十分不爽快！
若改 Code 途中，真的不小心寫錯而發生錯誤，
還得在一塊 error 海中找到真正的錯誤訊息，
感到十分苦惱！

終於在 microsoft typescript github 找到相關的討論串，
裡面有提到未來會修正此問題，也有 workaround，
這邊就說明一下 workaround 步驟：

下載這個檔案：typescriptServices.js
找到這個檔案：C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js
覆蓋步驟 2 的檔案，重啟 VS2015 即可

暫時這樣的方式解決吧！

2016年5月9日星期一

upgrade angular 2 to RC1 solution ( from beta.17 )

在 2016/05/02 angular2 就已發佈至 RC 0

緊接著在 2016/05/02 又發佈了 RC1

升級的過程一直不順利，

看來無法跟之前一樣，package 版本的數字改一改就好，

要乖乖看文件了！

終於把問題解決了，大致要處理的部分如下：

package module rename
typescript typing
systemjs.config.js

package module rename

先來看看 change log，在 RC0 做了重大變更，

node_module 資料夾下，angular2 資料夾換成＠angular 當然底下的路徑都換了，
所以要將以下 package 路徑做替換，

詳情如下：

To import various symbols please adjust the paths in the following way:

angular2/core -> @angular/core
angular2/compiler -> @angular/compiler
angular2/common -> @angular/common
angular2/platform/browser -> @angular/platform-browser (applications with precompiled templates) + @angular/platform-browser-dynamic (applications that compile templates on the fly)
angular2/platform/server -> @angular/platform-server
angular2/testing -> @angular/core/testing (it/describe/..) + @angular/compiler/testing (TestComponentBuilder) + @angular/platform-browser/testing
angular2/upgrade -> @angular/upgrade
angular2/http -> @angular/http
angular2/router -> @angular/router-deprecated (snapshot of the component router from beta.17 for backwards compatibility)
new package: @angular/router - component router with several breaking changes

typescript typing
接著設定 typescript typing ( 參考 )：
在專案根目錄新增 typings.json 檔案，內容：

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
  }
}

設定 package.json

在 Visual Studio 2015 對 package.json 儲存後，
即會在專案根目錄下，建立 typeings 資料夾，

在 root componment 加入 typings/browser/ambient/es6-shim/index.d.ts reference

systemjs.config.js (參考)

html 頁面使用方式，

<!-- 1. Load libraries -->
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/reflect-metadata/Reflect.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>

<script type="text/javascript">
    window.filterSystemConfig = function (config) {
        config.baseURL = '@Url.Content("~/")';
    }
</script>

<!-- 2. Configure SystemJS -->
<script src="~/systemjs.config.js"></script>
<script type="text/javascript">
    System.import('PublishScenario')
        .catch(function (err) { console.error(err); });
</script>

其中指定 config.baseURL 為網站的根目錄

<script type="text/javascript">
    window.filterSystemConfig = function (config) {
        config.baseURL = '@Url.Content("~/")';
    }
</script>

systemjs.config.js 的內容如下：

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'PublishScenario': 'Scripts/angular-app/PublishScenario', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular',
        'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
    };

    // packages tells the System loader how to load when no filename
    // and/or no extension
    var packages = {
        'PublishScenario': {
           
            main: 'main.js',
            defaultExtension: 'js'
        },
        'rxjs': { defaultExtension: 'js' },
        'ng2-bs3-modal': { main: 'ng2-bs3-modal.js', defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
    };

    var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
    ];

    // add package entries for angular packages in the form 
    // '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify 
    // config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

以上是查看官方文件後，進行的設定，若仍有問題，就到官網去看看吧！

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 已修正此問題

2016年3月16日星期三

msbuild copy files - Illegal characters in path error

遇到一個 msbuild 的問題讓我十分困擾，
目前處理的專案，用到 aps.net MVC5 + Angular 2 ，以 npm 進行安裝
希望透過 msbuild 將專案 build 過後，也順道把 node_module 資料夾 copy 至 build 資料夾，
但是卻遇到 Illegal characters in path 的錯誤訊息：

所用的也是很正常的 msbuild task

<CreateItem Include="$(SourceDir)\**\*.*" Exclude="$(SourceDir)\.bin\**\*.*;">
    <Output TaskParameter="Include" ItemName="NodeModulesFileItems" />
</CreateItem>
<Copy SourceFiles="@(FileItems)" DestinationFiles=
    "@(FileItems->'$(OutputDir)\%(RecursiveDir)%(Filename)%(Extension)')" />

先來查看 package.json ，看看 node_module 放了哪些 package，如下：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "gulp-typescript": "^2.10.0",
    "gulp": "^3.9.0"
  }
}

所以原因出在 node_modules 這個資料夾到底出了什麼事！？來實驗看看吧！

假設專案路徑是： C:\project\webapp
如果 copy 的路徑是：C:\project\webapp\Content 成功
如果 copy 的路徑是：C:\project\webapp\Image 成功
如果 copy 的路徑是：C:\project\webapp\node_modules 失敗
如果 copy 的路徑是：C:\project\webapp\node_modules\angular2 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\systemjs 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\es6-promise 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\es6-shim 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\reflect-metadata 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\rxjs 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\zone.js 成功
如果 copy 的路徑是：C:\project\webapp\node_modules\gulp-typescript 失敗
如果 copy 的路徑是：C:\project\webapp\node_modules\gulp 失敗

最後終於發現是 gulp, gulp-typescript 兩個資料夾在做怪，

由於這兩個資料夾裡面的檔案結構又深又長，導致 copy task 在複製檔案時，
因路徑太長而拋出 Illegal characters in path 訊息，
那該如何處理呢？

在發佈時，先將這兩個資料夾刪掉，以暫時解決這個問題，
使用 removedir task 刪除資料夾，
但是仍然會發生 Illegal characters in path 錯誤，我想問題應該是跟上面一樣

<removedir directories="$(dir)"></removedir>

所以只好依靠 windows command - rmdir 來處理

<Exec Command="RMDIR /S /Q $(WebNodeModulesSourceDir)\gulp"/>
<Exec Command="RMDIR /S /Q $(WebNodeModulesSourceDir)\gulp-typescript"/>

<CreateItem Include="$(SourceDir)\**\*.*" Exclude="$(SourceDir)\.bin\**\*.*;">
    <Output TaskParameter="Include" ItemName="NodeModulesFileItems" />
</CreateItem>
<Copy SourceFiles="@(FileItems)" DestinationFiles=
    "@(FileItems->'$(OutputDir)\%(RecursiveDir)%(Filename)%(Extension)')" />

打完收工！

2016/04/21 更新：安裝新版的 NPM，即可解決此問題，參考

訂閱：文章 (Atom)

2017年1月26日 星期四

2016年6月28日 星期二

2016年5月24日 星期二

2016年5月16日 星期一

2016年5月9日 星期一

2016年4月29日 星期五

2016年4月20日 星期三

2016年4月13日 星期三

2016年4月6日 星期三

2016年3月16日 星期三

2017年1月26日星期四

2016年6月28日星期二

2016年5月24日星期二

2016年5月16日星期一

2016年5月9日星期一

2016年4月29日星期五

2016年4月20日星期三

2016年4月13日星期三

2016年4月6日星期三

2016年3月16日星期三