はじめに
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 に所属するサービスは全てのモジュールから利用でき、モジュールに登録する必要がありません。
以下のように @Injectable
に providedIn
というのが追加になっていて、どのモジュールから追加されるのか指定できるようになってます。
ここが '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 の仕方がゴソッと完全に変更になりました Σ(・□・;)
以下の記事に詳しいので、説明はそちらに譲ります。
この記事でも触れられていますが、既存の 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