Zenn
Closed2

angularを12 -> 13 にupdateする

Angular
hiromshiroms

Angular Update Guide
↑の通りに進める。

Angular Materialを使ってたので、

I use Angular Material

にチェックを入れた。

npx @angular/cli@13 update @angular/core@13 @angular/cli@13

のコマンド実行成功した後に、

npx @angular/cli@13 update @angular/material@13

したら怒られた。

Repository is not clean. Please commit or stash any changes before updating.

言われた通りにcommitする。
commitしたあとに再度コマンド実行したら怒られた。

Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^12.0.0", would install "13.2.2").
  • @angular/flex-layout
  • @angular/cdk

この子達が13だとうまくごかなさそうだよって言っているので、updateする。

ng update @angular/material @angular/flex-layout

参考: Upgrading to angular 9 - @angular/flex-layout peer dependency to @angular/cdk - Stack Overflow

updateにした後

npx @angular/cli@13 update @angular/material@13

したら成功した！

おわり。

hiromshiroms

環境

updateし始める前の環境

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.2.13
Node: 14.15.5
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 12.2.13
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.13
@angular-devkit/build-angular   12.2.13
@angular-devkit/core            12.2.13
@angular-devkit/schematics      12.2.13
@angular/cdk                    12.2.12
@angular/flex-layout            12.0.0-beta.35
@angular/material               12.2.12
@schematics/angular             12.2.13
rxjs                            6.6.7
typescript                      4.3.5

npx @angular/cli@13 update @angular/core@13 @angular/cli@13 した後の環境

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.2.3
Node: 14.15.5
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 13.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.3
@angular-devkit/build-angular   13.2.3
@angular-devkit/core            13.2.3
@angular-devkit/schematics      13.2.3
@angular/cdk                    12.2.12
@angular/cli                    13.2.3
@angular/flex-layout            12.0.0-beta.35
@angular/material               12.2.12
@schematics/angular             13.2.3
rxjs                            6.6.7
typescript                      4.5.5

諸々終わった後

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.2.3
Node: 14.15.5
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 13.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.3
@angular-devkit/build-angular   13.2.3
@angular-devkit/core            13.2.3
@angular-devkit/schematics      13.2.3
@angular/cli                    13.2.3
@angular/flex-layout            13.0.0-beta.38
@schematics/angular             13.2.3
rxjs                            6.6.7
typescript                      4.5.5
このスクラップは2022/02/10にクローズされました