2018-07-01

【Angular】@Componentの設定あれこれ

TypeScript Angular

概要

Angularの@Componentの設定関連をメモ。

2018-06-28

【TypeScript】拡張メソッドの実装(ライブラリ・外部モジュール編)

TypeScript Angular 拡張メソッド

概要

TypeScriptで基本型でなく、他のライブラリで定義されているクラスに対して拡張メソッドを実装する方法を記載します。
declare module 'ライブラリの拡張対象のクラスが記載されているファイル'で定義後は基本型の拡張方法と同じです。
サンプルソースを記載しているので、そちらの方が分かりやすいと思います。

基本型(string, number, Array etc)の拡張は以下の記事を参照して下さい。

kakkoyakakko2.hatenablog.com

2018-06-26

【Angular】HttpClientでstatusCodeを取得する

TypeScript Angular

概要

Angular 4以降で登場したHttpClientでは特に指定がない場合はJSON型の戻り値を扱います。
以前のHttpモジュールのようにHttpレスポンスのステータスコードを扱いたい場合は、引数に{ observe: 'response' }の指定が必要になります。

get処理については戻り値をJSONのオブジェクトで扱えるのは良いのですが、post,put,deleteではステータスコードで処理をするケースが多いので若干不便ですね・・・

2018-06-21

【Angular】HttpInterceptorの実行順序

TypeScript AOP Angular

概要

HttpInterceptorを複数登録した場合の実行順序は以下の通りです。
リクエストはproviders登録の昇順、レスポンスはproviders登録の降順に実行されます。

AInterceptor, BInterceptorの順で登録した場合、

Aのリクエスト前処理
Bのリクエスト前処理
Bのレスポンス処理
Aのレスポンス処理

2018-06-19

【Angular】HttpInterceptorの実装(レスポンス内容確認)

TypeScript Angular AOP

概要

以前紹介したAngularのHttpInterceptorでレスポンス内容を確認することも出来ます。今回はそのサンプルソースをのせておきます。

kakkoyakakko2.hatenablog.com

2018-06-18

【HTTP】ブラウザ毎のOriginヘッダー付与の違い(2018年6月現在)

HTTP Ajax

概要

HTTPリクエストでOriginヘッダーが設定されるケースが異なるためまとめてみました。

2018-06-17

【イベント参加】ng-japan2018に参加してきました

Angular イベント

概要

ng-japan 2018に参加してきました。

ngjapan.org

基本的には6.0の新機能をベースに話があったり、導入・開発の事例の話があったりしました。
以下に感想等を記載していきます。

全体的な感想

build環境が成熟してきた。(ng add/ng update)
Angular ivy関連は地味に楽しみ。
Angular Elementsとivy連携が楽しみ。
ある程度構成は落ち着いてきたので、開発者へもうちょい普及しないかな～。

メモ書き

以下に参加しながら記載したメモ書きを貼っておきます。
時間があれば修正するかも。

github.com

2018-06-13

【VSCode】Chromeデバッグ起動設定

Visual Studio Code

概要

Visual Studio Code から Chrome デバッグ接続が可能です。
Debugguer for Chrome拡張機能を利用することでデバッグできます。
ただし、デバッグ前にChromeの起動引数に--remote-debugging-port=9222の設定が必要です。

このあたりの設定やまわりへの周知が面倒なため、launch.jsonの値を変更して配布しています。
launch.jsonにruntimeArgsという項目を追加して、--remote-debugging-port=9222を設定することでデバッグ起動時に接続が簡単に出来ます。

marketplace.visualstudio.com