こんにちは、ゴーリスト開発の飯尾です。
みなさんも大好きなAngular、ほんの一週間ほど前にバージョン5が出ましたね。
というわけで
- 羽のように軽い気持ちで
- Angular4で作ったアプリを5に上げたら
- 一体どうなるのか！？
試してみます
互換性の確認
angular/CHANGELOG.md at master · angular/angular · GitHub
BREAKING CHANGES をチェケです
関係ありそうなのはこのあたりでしょうか…
Angular now requires TypeScript 2.4.x.
@angular/platform-server now additionally depends on @angular/platform-browser-dynamic as a peer dependency.
ncu でパッケージの更新確認してみます
$ ncu @angular/common ^4.0.0 → ^5.0.0 @angular/compiler ^4.0.0 → ^5.0.0 @angular/core ^4.0.0 → ^5.0.0 @angular/forms ^4.0.0 → ^5.0.0 @angular/http ^4.0.0 → ^5.0.0 @angular/platform-browser ^4.0.0 → ^5.0.0 @angular/platform-browser-dynamic ^4.0.0 → ^5.0.0 @angular/router ^4.0.0 → ^5.0.0 @angular/compiler-cli ^4.0.0 → ^5.0.0 @types/jasmine 2.5.38 → 2.6.3 @types/node ~6.0.60 → ~8.0.49 codelyzer ~2.0.0 → ~4.0.1 jasmine-core ~2.5.2 → ~2.8.0 jasmine-spec-reporter ~3.2.0 → ~4.2.1 karma ~1.4.1 → ~1.7.1 karma-chrome-launcher ~2.0.0 → ~2.2.0 karma-coverage-istanbul-reporter ^0.2.0 → ^1.3.0 protractor ~5.1.0 → ~5.2.0 ts-node ~2.0.0 → ~3.3.0 tslint ~4.5.0 → ~5.8.0 typescript ~2.2.0 → ~2.6.1 The following dependencies are satisfied by their declared version range, but the installed versions are behind. You can install the latest versions without modifying your package file by using npm update. If you want to update the dependencies in your package file anyway, run ncu -a. @agm/core ^1.0.0-beta.0 → ^1.0.0-beta.2 @types/googlemaps ^3.26.16 → ^3.29.2 core-js ^2.4.1 → ^2.5.1 rxjs ^5.1.0 → ^5.5.2 zone.js ^0.8.4 → ^0.8.18 Run ncu with -u to upgrade package.json
TypeScriptのバージョンは上がりますね
@angular/platform-browser-dynamic は入れてあったのでOK
Angular CLI のアップデート
とりあえずCLIの方から上げていきます
$ ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.1.3
node: 6.10.2
os: darwin x64
@angular/common: 4.2.4
@angular/compiler: 4.2.4
@angular/core: 4.2.4
@angular/forms: 4.2.4
@angular/http: 4.2.4
@angular/platform-browser: 4.2.4
@angular/platform-browser-dynamic: 4.2.4
@angular/router: 4.2.4
@angular/cli: 1.1.3
@angular/compiler-cli: 4.2.4
$ npm update @angular/cli
$ ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.5.0
Node: 6.10.2
OS: darwin x64
Angular: 4.2.4
... common, compiler, compiler-cli, core, forms, http
... platform-browser, platform-browser-dynamic, router
... tsc-wrapped
@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.1
typescript: 2.2.2
webpack: 3.8.1
ng buildもまだまだふつうにできました
Angular 4 to 5
パッケージ更新
まずはncu -uでpackage.jsonの更新
$ ncu -u @angular/common ^4.0.0 → ^5.0.0 @angular/compiler ^4.0.0 → ^5.0.0 @angular/core ^4.0.0 → ^5.0.0 @angular/forms ^4.0.0 → ^5.0.0 @angular/http ^4.0.0 → ^5.0.0 @angular/platform-browser ^4.0.0 → ^5.0.0 @angular/platform-browser-dynamic ^4.0.0 → ^5.0.0 @angular/router ^4.0.0 → ^5.0.0 @angular/compiler-cli ^4.0.0 → ^5.0.0 @types/jasmine 2.5.38 → 2.6.3 @types/node ~6.0.60 → ~8.0.49 codelyzer ~2.0.0 → ~4.0.1 jasmine-core ~2.5.2 → ~2.8.0 jasmine-spec-reporter ~3.2.0 → ~4.2.1 karma ~1.4.1 → ~1.7.1 karma-chrome-launcher ~2.0.0 → ~2.2.0 karma-coverage-istanbul-reporter ^0.2.0 → ^1.3.0 protractor ~5.1.0 → ~5.2.0 ts-node ~2.0.0 → ~3.3.0 tslint ~4.5.0 → ~5.8.0 typescript ~2.2.0 → ~2.6.1 The following dependencies are satisfied by their declared version range, but the installed versions are behind. You can install the latest versions without modifying your package file by using npm update. If you want to update the dependencies in your package file anyway, run ncu -a. @agm/core ^1.0.0-beta.0 → ^1.0.0-beta.2 @types/googlemaps ^3.26.16 → ^3.29.2 core-js ^2.4.1 → ^2.5.1 rxjs ^5.1.0 → ^5.5.2 zone.js ^0.8.4 → ^0.8.18 Upgraded /path/to/app/package.json
アップデート実行！
$ npm update my-app ├── @agm/core@1.0.0-beta.2 ├── UNMET PEER DEPENDENCY @angular/common@5.0.0 ├── @angular/compiler@5.0.0 ├── @angular/compiler-cli@5.0.0 ├── UNMET PEER DEPENDENCY @angular/core@5.0.0 ├── UNMET PEER DEPENDENCY @angular/forms@5.0.0 ├── @angular/http@5.0.0 ├── @angular/platform-browser@5.0.0 ├── @angular/platform-browser-dynamic@5.0.0 ├── @angular/router@5.0.0 ├── @types/googlemaps@3.29.2 ├── @types/jasmine@2.6.3 ├── @types/node@8.0.49 ├── codelyzer@4.0.1 ├── core-js@2.5.1 ├── jasmine-core@2.8.0 ├── jasmine-spec-reporter@4.2.1 ├── karma@1.7.1 ├── karma-chrome-launcher@2.2.0 ├── karma-coverage-istanbul-reporter@1.3.0 ├── protractor@5.2.0 ├── rxjs@5.5.2 ├── ts-node@3.3.0 ├── tslint@5.8.0 ├── UNMET PEER DEPENDENCY typescript@2.6.1 └── zone.js@0.8.18 npm WARN @angular-mdl/core@4.0.8 requires a peer of @angular/core@>=4.0.0 <5.0.0 but none was installed. npm WARN @angular-mdl/core@4.0.8 requires a peer of @angular/common@>=4.0.0 <5.0.0 but none was installed. npm WARN @angular-mdl/core@4.0.8 requires a peer of @angular/forms@>=4.0.0 <5.0.0 but none was installed. npm WARN @angular/compiler-cli@5.0.0 requires a peer of typescript@>=2.4.2 <2.5 but none was installed. npm WARN tsickle@0.24.1 requires a peer of typescript@2.4.2 but none was installed.
怒られているゥ…
@angular-mdl/core はまだ5に未対応、放置するとして
TypeScriptは2.4.x だったので
package.jsonを"typescript": "~2.4"に書き換える
npmのキャッシュクリーンからのインストール
$ rm -r node_modules $ npm cache clean $ npm install
ぶじtypescript@2.4.2 になりました
ビルドしてみる
コンパイル通ってくれ…
祈りのng serve
ERROR in src/app/service/request.service.ts(34,5): error TS2322: Type 'Observable<{} | Response>' is not assignable to type 'Observable<Response>'.
Type '{} | Response' is not assignable to type 'Response'.
Type '{}' is not assignable to type 'Response'.
Property 'type' is missing in type '{}'.
赤字エラ〜〜〜〜
対処
これを
public post(params: string): Observable<Response> { ・・・ return this.http.post(url, params) .catch((error) => { throw new Error(error); }); }
こう！
public post(params: string): Observable<Response> { ・・・ return this.http.post(url, params) .catch((error) => { Observable.throw(error); }); }
次はキサマだ
ERROR in src/app/conponents/popover/popover.component.ts(69,11): error TS2322: Type 'Observable<{} | Event>' is not assignable to type 'Observable<Event>'.
Type '{} | Event' is not assignable to type 'Event'.
Type '{}' is not assignable to type 'Event'.
Property 'bubbles' is missing in type '{}'.
これを
const stream: Observable<Event> = Observable .merge(Observable.fromEvent(document, 'click'), Observable.fromEvent(document, 'touchend'));
こう！
const stream: Observable<Event> = Observable .merge(Observable.fromEvent(document, 'click'), Observable.fromEvent(document, 'touchend')) .catch(e => Observable.throw(e));
ウオオアアアーーー
そういえば
こんなこと書いてあったので
Developers appreciated the new HttpClient (introduced in version 4.3) so the team is now recommending HttpClient for all applications, and deprecating the previous @angular/http library.
Httpクライアントモジュールは
@angular/http が非推奨になって
@angular/common/http を使うのが主流になっていくみたいです
こちらの解説が詳しい…アリガトウゴザイマス
めっちゃ推されてるビルド速度について
Angular 4.2.4 / Angular CLI 1.1.3
$ ng build
Time: 20935ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 283 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 103 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 45.6 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.36 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
Angular 5.0.0 / Angular CLI 1.5.0
$ ng build
Time: 19193ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 129 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 383 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 41.8 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.45 MB [initial] [rendered]
$ ng build --aot
Time: 23034ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 338 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 383 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 41.8 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.33 MB [initial] [rendered]
あんまり違いが…
感想
Observableの処理をしっかりやる以外は特に変更なしでいけました〜
あとは非推奨になってしまった通信部分の書き換えとかですね
年明けてバグとかライブラリ周り落ち着いてきたら
本番アプリでもあてていくつもりです( ˘ω˘)
