Angular v6
Tree-Shakable DI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/345677/images/2756726/angular_high.png)
@laco2net
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4642280/icon-0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4656790/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4656805/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4656811/pasted-from-clipboard.png)
Reference to Injectable
-
ProviderをNgModuleに登録している
-
かならずNgModuleから参照される
-
どこにもInjectされていないTokenもかならず参照が存在する
-
Un-tree-shakable
-
使われていないサービスはふるい落としたい
-
使うときだけProviderが登録される仕組みが必要
-
=> Injectable / InjectionTokenに機能追加
-
Tree-shakable
Shakable Service
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4656857/pasted-from-clipboard.png)
ProvideするNgModule
インスタンス生成factory
-
サービス自身が対応するNgModuleとfactoryを持つ
-
NgModule側からの参照がなくなり、Tree-Shaking可能になる
@Injectable({scope, factory})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4656890/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4656921/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4656925/pasted-from-clipboard.png)
Reference tree
-
Reduce bundle size
-
Avoid "providers hell"
-
Keep simpler AppModule
-
Benefits
Thanks!
@laco2net
![](https://s3.amazonaws.com/media-p.slid.es/uploads/550205/images/4642280/icon-0.png)