LoginSignup
22

More than 5 years have passed since last update.

Angular 6 で変更になったこと

Last updated at Posted at 2018-05-03

はじめに

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 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22