【Angular】Property '○○○' has no initializer and is not definitely assigned in the constructor. エラー

Question

【前提】

Angularの初学者です。typescript自体も初めてさわる段階です。
現在、書籍で学習しており、フォームのバリデーション を学習中なのですが、タイトルのエラーを解決できない状態です。下記のような症状ですが、どのような原因が考えられるかアドバイス頂けないでしょうか。宜しくお願い致します。

【開発環境】
angular:12
os:MAC

【現在の状況】

下記のようなエラーが出ている状態です。
(全ての)プロパティを定義している箇所でエラーがでています。内容としては、コンストラクタで初期化していないですよ言っているかと思われます。

【やってみたこと】

・　tsconfig.jsonに"strictPropertyInitialization": falseを追記してみる。
⇨症状は全く変わらず。

・　string→anyに変えてみる
⇨とりあえずエラーは消えるが根本解決になっていない気がする。

・　title!: string;ようにプロパティの後ろに!をつけてみる。
⇨別のエラーが出る。（ややこしくなるのでひとまず割愛）

・　title: string | undefined;としてみる。
⇨別のエラーが出る。（ややこしくなるのでひとまず割愛）

参考にしたサイト
http://one-way.tech/programing/basic-typescript/
https://tech-up.hatenablog.com/entry/2019/03/15/152258

※エラーメッセージ

✔ Browser application bundle generation complete.

Lazy Chunk Files                               | Names |     Size
src_app_registration_registration_module_ts.js | -     | 12.29 kB

6 unchanged chunks

Build at: 2021-08-22T02:56:59.731Z - Hash: c222efc48625979724c3 - Time: 728ms

Error: src/app/registration/registration.component.ts:15:3 - error TS2564: Property 'title' has no initializer and is not definitely assigned in the constructor.

15   title: string;
     ~~~~~


Error: src/app/registration/registration.component.ts:16:3 - error TS2564: Property 'message' has no initializer and is not definitely assigned in the constructor.

16   message: string;
     ~~~~~~~


Error: src/app/registration/registration.component.ts:17:3 - error TS2564: Property 'myControl' has no initializer and is not definitely assigned in the constructor.

17   myControl: FormGroup;
     ~~~~~~~~~

コード

※基本的には教本のコピペです。

//registration.component.ts
import { Component, OnInit } from '@angular/core';
import {
  FormControl,
  FormGroup,
  FormBuilder,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.scss'],
})
export class RegistrationComponent implements OnInit {
  title: any;
  message: any;
  myControl: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.title = 'Hello-app';
    this.message = 'FormControlを使う';
    this.myControl = this.fb.group({
      name: ['', [Validators.required]],
      mail: ['', [Validators.email]],
      age: [0, [Validators.min(1), Validators.max(150)]],
    });
  }

  get name() {
    return this.myControl.get('name');
  }
  get mail() {
    return this.myControl.get('mail');
  }
  get age() {
    return this.myControl.get('age');
  }

  onSubmit() {
    if (this.myControl.invalid) {
      this.message = 'VALIDATION ERROR.';
    } else {
      let result = this.myControl.value;
      this.message = JSON.stringify(result);
    }
  }
}

// registration.component.html
<h1>新規会員登録画面</h1>
<form [(formGroup)]="myControl" (ngSubmit)="onSubmit()">
  <table>
    <tr>
      <th>Name</th>
      <td>
        <div *ngIf="name.invalid">Nameは必須項目です.</div>
        <div><input type="text" formControlName="name" /></div>
      </td>
    </tr>
    <tr>
      <th>Mail</th>
      <td>
        <div *ngIf="mail.invalid">メールアドレスが必要です.</div>
        <div><input type="text" formControlName="mail" /></div>
      </td>
    </tr>
    <tr>
      <th>age</th>
      <td>
        <div *ngIf="age.invalid">１歳以上150歳以下で入力下さい..</div>
        <input type="number" formControlName="age" />
      </td>
    </tr>
    <tr>
      <th></th>
      <td>
        <input [disabled]="myControl.invalid" type="submit" value="click" />
      </td>
    </tr>
  </table>
</form>

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import {
  FormsModule,
  ReactiveFormsModule,
  FormGroup,
  FormBuilder,
  Validators,
} from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { LoginComponent } from './login/login.component';
import { MypageComponent } from './mypage/mypage.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';

const ROUTE_TABLE: Routes = [
  { path: 'test', component: TestComponent },
  { path: 'login', component: LoginComponent },
  { path: 'mypage', component: MypageComponent },
];

@NgModule({
  declarations: [AppComponent, TestComponent, LoginComponent, MypageComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(ROUTE_TABLE),
    BrowserAnimationsModule,
    MatSliderModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule,
    MatIconModule,
    FormGroup,
    FormBuilder,
    Validators,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

// registration-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RegistrationComponent } from './registration.component';

const routes: Routes = [{ path: '', component: RegistrationComponent }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class RegistrationRoutingModule {}

// registration.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup } from '@angular/forms';

import { RegistrationRoutingModule } from './registration-routing.module';
import { RegistrationComponent } from './registration.component';

@NgModule({
  declarations: [RegistrationComponent],
  imports: [CommonModule, RegistrationRoutingModule, FormBuilder, FormGroup],
})
export class RegistrationModule {}

Comments

[tshion]

手元で試せていないのですが、ngOnInit() の内容をconstructor 内に移動して様子をみたいかもです。
変数宣言？した後に、その変数に対して値を設定していないのが原因かと疑っているので。

[tonkotsu_ramen]

ご回答ありがとうございます。
試してみたところ、コンパイルは成功しましたが、ブラウザには何も表示されなくなりました。ブラウザには下記のようなエラーがでるようになりました。

core.js:4036 JIT compilation failed for NgModule class AppModule {
}
getCompilerFacade @ core.js:4036
get @ core.js:26920
getNgModuleDef @ core.js:1117
assertNgModuleType @ core.js:1296
compileNgModuleFactory__POST_R3__ @ core.js:29073
bootstrapModule @ core.js:29324
4431 @ main.ts:11
__webpack_require__ @ bootstrap:19
__webpack_exec__ @ (index):23
(anonymous) @ (index):23
__webpack_require__.O @ chunk loaded:23
(anonymous) @ (index):23
webpackJsonpCallback @ jsonp chunk loading:70
(anonymous) @ main.js:1
core.js:4055 Uncaught Error: The NgModule 'AppModule' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at getCompilerFacade (core.js:4055)
at Function.get (core.js:26920)
at getNgModuleDef (core.js:1117)
at assertNgModuleType (core.js:1296)
at compileNgModuleFactory__POST_R3__ (core.js:29073)
at PlatformRef.bootstrapModule (core.js:29324)
at Module.4431 (main.ts:11)
at __webpack_require__ (bootstrap:19)
at __webpack_exec__ ((index):23)
at (index):23

[tshion]

追記ありがとうございます。

おそらく本来の質問だった件は、ngOnInit() の内容をconstructor() に移動して、
ちゃんとメンバー変数を初期化したので、直ったのではないかと思いました。

で、そのあとに出たエラーメッセージですが、また別の問題な気がしております。
試しにng serve を一度止めて、改めてng serve し直して様子を見たいかもです。
それで特に変化がなかったら、もしかしたらmodule などの設定に不備があるかもなので、
そのあたりを確認したいかもです。

[tonkotsu_ramen]

ありがとうございます。ng serveもし直してみましたが、症状は変わりませんでした。
関係ありそうなmodule関係のソースコードも追記致しました。私がみた限りではどこに原因があるのかわかっておりません。

[tshion]

app.module.ts のルート定義を見ててふと思ったのですが、
こちら「新規会員登録画面」へのルート定義はありますでしょうか？
それを足して様子を見たいかもです

Answer 1

Property '○○○' has no initializer and is not definitely assigned in the constructor. 

初期化されてない、って怒られているので、
ngOnInit() でやっている初期化を変数宣言時に行ってみるのはいかがでしょう？

export class AppComponent implements OnInit {
  title = 'Hello-app';
  message = 'FormControlを使う';
  myControl = this.fb.group({
      name: ['', [Validators.required]],
      mail: ['', [Validators.email]],
      age: [0, [Validators.min(1), Validators.max(150)]],
    });
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
  }

のような感じで。