Angular のチュートリアルで詰まった話（Tour Of Heroes）

ちまちまとAngularの公式にあるチュートリアルを進めていたところ、うっかり溝にハマりました。

#環境
- macOS Mojave(10.14.6)
- Docker
    - Angular CLI: 8.3.19
    - Node: 13.1.0
    - OS: linux x64
    - Angular: 8.2.14

#詰まったところ

チュートリアル　＞　6.HTTP　＞　データサーバをシュミレートする
https://angular.jp/tutorial/toh-pt6#%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B

![スクリーンショット 2019-11-18 16.18.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525955/ec710447-6cb9-c772-f8d9-a517090a8d6f.png)


で、このページにある以下のコマンドを打ち込んだところ、、、

```shell
#npm install angular-in-memory-web-api --save
```

この辺り。RxJS のimportでエラーが発生しました。

```hero.service.ts
import { Observable, of } from 'rxjs';
```

#原因？
よくよく見ると、「npm install ~」やった時にこんな警告出てました。

```shell
#install angular-in-memory-web-api --save
(中略)
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @angular/common@8.2.14 requires a peer of rxjs@^6.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/core@8.2.14 requires a peer of rxjs@^6.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/forms@8.2.14 requires a peer of rxjs@^6.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/router@8.2.14 requires a peer of rxjs@^6.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-in-memory-web-api@0.9.0 requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ angular-in-memory-web-api@0.9.0
added 88 packages from 33 contributors, removed 64 packages, updated 1044 packages and audited 20998 packages in 260.873s
found 0 vulnerabilities
```

依存しているバージョンが違う、ということっぽいです。（たぶん）

#解決策
で、こんだけ入れました。

```shell
# npm install -g npm  /* npmのアップデート */
# npm install rxjs          
# npm install tslib   
```
npmのコマンドについては [こちら](https://qiita.com/standard-software/items/2ac49a409688733c90e7) が詳しいです。

そんなわけで、無事、エラーが消えました。


##バージョン変化
でも、実際バージョンってどうなったの？と思って、以下のコマンドで調べてみました。

```
　# ng version
```

###before

```
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.19
@angular-devkit/build-angular     0.803.19
@angular-devkit/build-optimizer   0.803.19
@angular-devkit/build-webpack     0.803.19
@angular-devkit/core              8.3.19
@angular-devkit/schematics        8.3.19
@angular/cli                      8.3.19
@ngtools/webpack                  8.3.19
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2
```
after

```
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.19
@angular-devkit/build-angular     0.803.19
@angular-devkit/build-optimizer   0.803.19
@angular-devkit/build-webpack     0.803.19
@angular-devkit/core              8.3.19
@angular-devkit/schematics        8.3.19
@angular/cli                      8.3.19
@ngtools/webpack                  8.3.19
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2
```

・・・ん？変わってない？！
じゃあ、、、あのエラーは何だったん？！

・・・気にはなりますが、引き続き、あとちょっとチュートリアルを進めます！

#参考
https://stackoverflow.com/questions/52801814/this-syntax-requires-an-imported-helper-but-module-tslib-cannot-be-found-wit

https://www.npmjs.com/package/rxjs