# Angular downgrade process document for WindowsOS
## 1. package.jsonのバックアップ
最初にpackage.jsonファイルのバックアップを取ります。万が一のために、元の状態に戻せるようにします。
```powershell
copy package.json package.backup.json
```
## 2. Angularの関連パッケージのアンインストール
次に、現在インストールされているAngularのパッケージを全てアンインストールします。これにより、古いバージョンのAngularをクリーンにインストールできます。
```powershell
npm uninstall @angular/animations @angular/common @angular/compiler @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular-devkit/build-angular @angular/cli @angular/compiler-cli zone.js typescript
```
## 3. Angular 15のインストール
Angular 15のパッケージをインストールします。dependenciesには実行時に必要なパッケージを、devDependenciesには開発時にのみ必要なパッケージをインストールします。
```powershell
npm install --save @angular/animations@15 @angular/common@15 @angular/compiler@15 @angular/core@15 @angular/forms@15 @angular/platform-browser@15 @angular/platform-browser-dynamic@15 @angular/router@15 zone.js@~0.13.0
```
```powershell
npm install --save-dev @angular-devkit/build-angular@15 @angular/cli@15 @angular/compiler-cli@15 typescript@4
```
## 4. node_modulesの更新
パッケージのインストール後、node_modulesフォルダとpackage-lock.jsonファイルを正しい状態に更新します。これは、依存関係を正確にインストールするために重要です。
```powershell
npm ci
```
## 5. バージョン確認
ダウングレードが成功したかどうかを確認するために、Angular CLIのバージョンを確認します。
```powershell
npm run ng version
```
```
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 15.2.10
Node: x.x.x
Package Manager: npm x.x.x
OS: xxxxxxxxxxx
Angular: 15.2.10
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1502.10
@angular-devkit/build-angular 15.2.10
@angular-devkit/core 15.2.10
@angular-devkit/schematics 15.2.10
@schematics/angular 15.2.10
rxjs 7.8.1
typescript 4.9.5
```
### package.jsonの変更点
この手順に従った後、package.jsonファイル内のAngular関連パッケージのバージョンは以下のように更新されているはずです。
```json
"dependencies": {
- "@angular/animations": "^16.1.0",
+ "@angular/animations": "^15.2.10",
- "@angular/common": "^16.1.0",
+ "@angular/common": "^15.2.10",
- "@angular/compiler": "^16.1.0",
+ "@angular/compiler": "^15.2.10",
- "@angular/core": "^16.1.0",
+ "@angular/core": "^15.2.10",
- "@angular/forms": "^16.1.0",
+ "@angular/forms": "^15.2.10",
- "@angular/platform-browser": "^16.1.0",
+ "@angular/platform-browser": "^15.2.0",
- "@angular/platform-browser-dynamic": "^16.1.0",
+ "@angular/platform-browser-dynamic": "^15.2.0",
- "@angular/router": "^16.1.0",
+ "@angular/router": "^15.2.10",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
- "zone.js": "~0.13.0"
+ "zone.js": "~0.12.0"
},
"devDependencies": {
- "@angular-devkit/build-angular": "^16.1.4",
+ "@angular-devkit/build-angular": "^15.2.10",
- "@angular/cli": "~16.1.4",
+ "@angular/cli": "~15.2.10",
- "@angular/compiler-cli": "^16.1.0",
+ "@angular/compiler-cli": "^15.2.10",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
- "typescript": "~5.1.3"
+ "typescript": "~4.9.4"
}
```