#Angular
https://v10.angular.io/guide/updating-to-version-10
## Breaking Changes
関係あるもののみ。
- [[TypeScript 3.8]]以下のサポート打ち切り
## New Deprecations
- `@angular/core` (v12で消える予定)
- [[IE9]]、[[IE10]]、[[IE Mobile]]のサポート (v11で消える予定)
## New Removals of Deprecated APIs
- `@angular/core` のいくつか
- `@angular/bazel` のいくつか
## Angular Update Guide
https://update.angular.io/?v=9.1-10.2
### Before Updating
[[i18n]]には依存していないのでスルー。
- [ ] Angular 9 introduced a global `$localize()` function that needs to be loaded if you depend on Angular's internationalization (i18n). Run `ng add @angular/localize` to add the necessary packages and code modifications. Consult the `$localize Global Import Migration guide` to learn more about the changes.
### During the Update
#### Run `ng update @angular/core@10 @angular/cli@10` which should bring you to version 10 of Angular.
`peer dependency`エラーが発生..。
```console
Package "angular2-toaster" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0" (extended), would install "10.2.5").
Package "angular2-toaster" has an incompatible peer dependency to "@angular/compiler" (requires "^8.0.0" (extended), would install "10.2.5").
Package "angular2-markdown" has an incompatible peer dependency to "@angular/core" (requires "^2.4.0 || ^4.0.3 || ^5.0.0" (extended), would install "10.2.5").
```
あとで関連packageもバージョンアップすればいいので`--force`オプションを使う。
```console
$ npx ng update --force @angular/core@10 @angular/cli@10
...
Fetching dependency metadata from registry...
Package "angular2-toaster" has an incompatible peer dependency to "@angular/common" (requires "^8.0.0" (extended), would install "10.2.5").
Package "angular2-toaster" has an incompatible peer dependency to "@angular/compiler" (requires "^8.0.0" (extended), would install "10.2.5").
Package "angular2-markdown" has an incompatible peer dependency to "@angular/core" (requires "^2.4.0 || ^4.0.3 || ^5.0.0" (extended), would install "10.2.5").
Updating package.json with dependency @angular-devkit/build-angular @ "0.1002.3" (was "0.901.15")...
Updating package.json with dependency @angular/cli @ "10.2.3" (was "9.1.15")...
Updating package.json with dependency @angular/compiler-cli @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/language-service @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/animations @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/common @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/compiler @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/core @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/forms @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency @angular/router @ "10.2.5" (was "9.1.13")...
Updating package.json with dependency typescript @ "4.0.7" (was "3.8.3")...
UPDATE package.json (2668 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cli' **
> Update Browserslist configuration file name to '.browserslistrc' from deprecated 'browserslist'.
Migration completed.
> Update tslint to version 6 and adjust rules to maintain existing behavior.
tslint configuration does not extend "tslint:recommended" or it extends multiple configurations.
Skipping rule changes as some rules might conflict.
UPDATE package.json (2668 bytes)
UPDATE tslint.json (2667 bytes)
Migration completed.
> Remove deprecated 'es5BrowserSupport' browser builder option.
The inclusion for ES5 polyfills will be determined from the browsers listed in the browserslist configuration.
Migration completed.
> Replace deprecated and removed 'styleext' and 'spec' Angular schematic options with 'style' and 'skipTests', respectively.
Migration completed.
> Remove deprecated options from 'angular.json' that are no longer present in v10.
Migration completed.
> Add the tslint deprecation rule to tslint JSON configuration files.
UPDATE tslint.json (2723 bytes)
Migration completed.
> Update library projects to use tslib version 2 as a direct dependency.
Read more about this here: https://v10.angular.io/guide/migration-update-libraries-tslib
Migration completed.
> Update workspace dependencies to match a new v10 project.
Package "rxjs-compat" found in the workspace package.json. This package typically was used during migration from RxJs version 5 to 6 during the Angular 5 timeframe and may no longer be needed.
Read more about this: https://rxjs-dev.firebaseapp.com/guide/v6/migration
UPDATE package.json (2667 bytes)
✔ Packages installed successfully.
Migration completed.
> Update 'module' and 'target' TypeScript compiler options.
Read more about this here: https://v10.angular.io/guide/migration-update-module-and-target-compiler-options
Unable to update 'tsconfig.json' module option from 'esnext' to 'es2020': Could not read 'tsconfig.json'.
Unable to update 'tsconfig.json' target option from 'es5' to 'es2018': Could not read 'tsconfig.json'.
Migration completed.
> Removing "Solution Style" TypeScript configuration file support.
Migration completed.
** Executing migrations of package '@angular/core' **
> Missing @Injectable and incomplete provider definition migration.
As of Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently.
Read more about this here: https://v9.angular.io/guide/migration-injectable
Migration completed.
> ModuleWithProviders migration.
As of Angular 10, the ModuleWithProviders type requires a generic.
This migration adds the generic where it is missing.
Read more about this here: https://v10.angular.io/guide/migration-module-with-providers
Migration completed.
> Undecorated classes with Angular features migration.
In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported.
Read more about this here: https://v10.angular.io/guide/migration-undecorated-classes
Migration completed.
```
#### Run `ng update @angular/material@10`.
[[Angular Material]]のバージョンアップ。
```console
$ npx ng update @angular/material@10
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 67 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular/cdk @ "10.2.7" (was "9.2.4")...
Updating package.json with dependency @angular/material @ "10.2.7" (was "9.2.4")...
UPDATE package.json (2668 bytes)
✔ Packages successfully installed.
** Executing migrations of package '@angular/cdk' **
> Updates the Angular CDK to v10.
Could not find TypeScript project for project: hoge-e2e
✓ Updated Angular CDK to version 10
Migration completed.
** Executing migrations of package '@angular/material' **
> Updates Angular Material to v10.
Could not find TypeScript project for project: hoge-e2e
⚠ General notice: The HammerJS v9 migration for Angular Components is not able to migrate tests. Please manually clean up tests in your project if they rely on HammerJS.
Read more about migrating tests: https://git.io/ng-material-v9-hammer-migrate-tests
✓ Updated Angular Material to version 10
Migration completed.
```
## 動かしてみる
```console
make dev
```
[[TypeScript]]のバージョンに引っかかる。
```console
ERROR in The Angular Compiler requires TypeScript >=3.9.2 and <4.1.0 but 4.3.2 was found instead.
```
```console
// 4.0.7をインストール
npm install "
[email protected]"
```
`angular2-markdown`の警告だけになった。
```console
WARNING in C:\Users\tadashi-aikawa\git\github.com\tadashi-aikawa\miroir\node_modules\angular2-markdown\markdown\markdown.service.js depends on 'rxjs/Observable'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in C:\Users\tadashi-aikawa\git\github.com\tadashi-aikawa\miroir\node_modules\angular2-markdown\markdown\markdown.service.js depends on 'rxjs/add/operator/map'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in C:\Users\tadashi-aikawa\git\github.com\tadashi-aikawa\miroir\node_modules\angular2-markdown\markdown\markdown.service.js depends on 'rxjs/add/operator/catch'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in C:\Users\tadashi-aikawa\git\github.com\tadashi-aikawa\miroir\node_modules\angular2-markdown\markdown\markdown.service.js depends on 'rxjs/add/observable/fromPromise'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING in C:\Users\tadashi-aikawa\git\github.com\tadashi-aikawa\miroir\node_modules\angular2-markdown\markdown\markdown.service.js depends on 'rxjs/add/observable/throw'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
```
## angular2-markdownの警告
`angular2-markdown`は[[ngx-md]]という名前に変わっていたが3年くらいリリースされていなそう。動きはするので諦める。
## angular2-toasterの警告
[[Angular2-Toaster]]をv10にバージョンアップする。
```console
// v10.0.0インストール
npm i angular2-toaster@10
```