Edited at

Angular 6 で変更になったこと

More than 1 year has passed since last update.


はじめに

4月から関わっている開発で Angular 6 を使って気づいたことを記しておきます。

ワクワクする追加機能の紹介じゃなくて、もっと基本的なことをやろうとした際のものです。

2018/4/4 リリース予定だった Angular 6 ですが、2018/5/3 現在まだリリースされていません。

ここに記載されていることは 6.0-rc5 での情報になります。

また気づいたことがあったら追記します。


root所属のサービス

以下でサービスを生成した場合、そのサービスは root に所属します。appモジュールではありません。

$ ng generate service ../services/hoge

CREATE src/services/hoge.service.spec.ts (405 bytes)
CREATE src/services/hoge.service.ts (140 bytes)

この root に所属するサービスは全てのモジュールから利用でき、モジュールに登録する必要がありません。

以下のように @InjectableprovidedIn というのが追加になっていて、どのモジュールから追加されるのか指定できるようになってます。

ここが 'root' の場合はモジュールへの登録不要で Dependency Injection できます。

なお root 所属のサービスは全てのモジュールで同じインスタンスが利用されます(つまりシングルトン)。

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class HogeService {

constructor() { }
}


RxJS 6.0

Angular 6.0 では RxJS 6.0 を採用しています。

import の仕方がゴソッと完全に変更になりました Σ(・□・;)

以下の記事に詳しいので、説明はそちらに譲ります。

RxJS 6.0 変更点まとめ(適宜更新)

この記事でも触れられていますが、既存の Observable に生えてた map だとか filter だとかのメソッドはゴソッとなくなってます。

RxJS 5.5 で追加された pipeable operators を利用する必要があります。

observable

.pipe(
filter(v => v < 100)
map(v => `value = ${v}`),
)
.subscribe(v => console.log(v));

要するに filter とか map とかは関数になっていて、それを Obeservable の pipe メソッドに渡してやります。


Angular の設定ファイルが変更

.angular-cli.json がなくなって angular.json になってます。

設定内容も違っています。


scssデフォルトにしてくれよ〜〜

追記: これは正式版で直ったみたいです。6.0.3で試したところ、プロジェクト作成時のstyleにscssを設定するとangular.jsonに以下のように設定されて、generate component時にちゃんとscssにしてくれます。

// ...

"projects": {
"project-name": {
// ...
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},

追記ここまで

以下でプロジェクトを生成すると、scssで作ってくれます。くれますが、、、

ng new my-app --style=scss

この後にコンポーネントを以下で追加しても scss にはしてくれないわけです。

ng generate component main

で、デフォルトで scss にするにはどうするのかと思ってググると、以下を実行しろという・・・

ng set defaults.styleExt scss

ところが、これができなくなってます。set というサブコマンドがなくなってます。

直接設定ファイルに指定しようにも angular.json にどうやって指定したらいいのか分かりません (T.T)

しょうがないので以下のように拡張子を毎回指定して実行・・・は面倒なので

ng generate component --style-ext=scss main 

シェルにエイリアスを設定しました。自分の場合は zsh 使ってるので .zshrc に以下を設定してます。

alias ngc="ng generate component --styleext=scss"

これで以下のようにコンポーネント生成できます。

ngc main