# 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" } ```