『Angular Webアプリ開発 スタートブック 初版』を勉強中に躓いたこととその解決策を共有します。
躓きの原因
一言で書いてしまうとバージョンの違いに尽きるかと思います。この書籍が出版された2018年4月時点でAngularのバージョンは5、一方で私の環境では12を使用しています。
> ng version
Angular CLI: 12.1.4
Node: 16.2.0 (Unsupported)
Package Manager: npm 7.13.0
OS: darwin x64
Angular: 12.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1201.4
@angular-devkit/build-angular 12.1.4
@angular-devkit/core 12.1.4
@angular-devkit/schematics 12.1.4
@schematics/angular 12.1.4
rxjs 6.6.7
typescript 4.3.5
Warning: The current version of Node (16.2.0) is not supported by Angular.
頼れる先人
こちらのブログでDoErrorさんという方がいくつかの躓きポイントを解説してくれてました。勉強中はかなり助けられました。
躓きポイント① (property) SimpleFormComponent.text1: string
simpleform.components.tsを作成中（108ページ）に遭遇したエラーです。書籍では、text1: string;となっていますが、text1: string = "";とすることで解決しました。
躓きポイント② Property 'checked' does not exist on type 'EventTarget'.
第8章の内容です。以下の様にコードのマイナスがついている部分をプラスに置き換えることで解決しました。
controls.component.html
- <input type = "checkbox" (change)="onCheckChanged(item, $event.target.checked)">
+ <input type = "checkbox" (change)="onCheckChanged(item, $event)">
controls.component.ts
- onCheckChanged(item: string, isChecked: boolean) {
- let formArray = <FormArray>this.coffeeForm.controls.adds;
- if (isChecked) {
- formArray.push(new FormControl(item));
- } else {
- let index = formArray.controls.findIndex(elm => elm.value == item)
- formArray.removeAt(index);
- }
+ onCheckChanged(item: string, e: Event) {
+ const checkbox = e.target as HTMLInputElement;
+
+ let formArray = <FormArray>this.coffeeForm.controls.adds;
+ if (checkbox.checked) {
+ formArray.push(new FormControl(item));
+ } else {
+ let index = formArray.controls.findIndex(elm => elm.value == item)
+ formArray.removeAt(index);
+ }
躓きポイント③ HTTPサーバが起動しない
第11章の内容です。http-server --baseDir="dist/cookbook"で起動しました。アドレスは127.0.0.1:8080ではない方を使用しました。
以上です。最後までお読みいただきありがとうございました。