refactor(all): enable strictPropertyInitialization in TsConfig and …

…fix the affected code

demo-app/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { Component, OnDestroy, ViewChild } from "@angular/core";
 import { Event, NavigationEnd, Router } from "@angular/router";
 import { MatSidenav } from "@angular/material/sidenav";
 import { BreakpointObserver, BreakpointState } from "@angular/cdk/layout";
@@ -11,18 +11,16 @@ const MEDIA_MATCH = "(max-width: 600px)";
 	templateUrl: "./app.component.html",
 	styleUrls: ["./app.component.scss"]
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnDestroy {
 	@ViewChild("sidenav")
-	private _sidenav: MatSidenav;
+	private _sidenav!: MatSidenav;
 
 	public mobileQueryMatches = false;
 
 	private _routerSubscription: Subscription;
 	private _mediaQuerySubscription: Subscription;
 
-	public constructor(private _router: Router, public breakpointObserver: BreakpointObserver) {}
-
-	public ngOnInit(): void {
+	public constructor(private _router: Router, public breakpointObserver: BreakpointObserver) {
 		this.mobileQueryMatches = this.breakpointObserver.isMatched(MEDIA_MATCH);
 
 		this._mediaQuerySubscription = this.breakpointObserver.observe([MEDIA_MATCH]).subscribe((state: BreakpointState) => {

demo-app/src/app/components/card/card.component.ts

@@ -7,13 +7,13 @@ import { Component, HostBinding, Input } from "@angular/core";
 })
 export class CardComponent {
 	@HostBinding("class.app-color-primary")
-	public primaryColor: boolean;
+	public primaryColor = false;
 	@HostBinding("class.app-color-accent")
-	public accentColor: boolean;
+	public accentColor = false;
 	@HostBinding("class.app-color-warning")
-	public warningColor: boolean;
+	public warningColor = false;
 	@HostBinding("class.app-color-success")
-	public successColor: boolean;
+	public successColor = false;
 
 	@Input()
 	public set color(color: "primary" | "accent" | "warning" | "success") {

demo-app/src/app/components/language-selector/language-selector.component.ts

@@ -35,14 +35,7 @@ export class LanguageSelectorComponent implements OnInit, OnDestroy {
 	 * Class constructor
 	 * @param translateService - the translation service of the application
 	 */
-	public constructor(protected translateService: TranslateService) {}
-
-	/**
-	 * Component lifecycle hook
-	 */
-	public ngOnInit(): void {
-		console.log(componentName + ": controller initialized");
-
+	public constructor(protected translateService: TranslateService) {
 		this.selectedLanguage = this.translateService.currentLang;
 
 		this.languageChangeSubscription = this.translateService.onLangChange.subscribe(
@@ -51,6 +44,13 @@ export class LanguageSelectorComponent implements OnInit, OnDestroy {
 		);
 	}
 
+	/**
+	 * Component lifecycle hook
+	 */
+	public ngOnInit(): void {
+		console.log(componentName + ": controller initialized");
+	}
+
 	/**
 	 * Component lifecycle hook
 	 */

demo-app/src/app/components/simple-form-error/simple-form-error.component.ts

@@ -11,7 +11,7 @@ export class SimpleFormErrorComponent implements NgxFormErrorComponent {
 	public cssClass = "simple-form-error";
 
 	public errors: NgxFormFieldError[] = [];
-	public errors$: Observable<NgxFormFieldError[]>;
+	public errors$!: Observable<NgxFormFieldError[]>;
 
 	public constructor() {
 		/* empty constructor */

demo-app/src/app/components/translated-form-error/translated-form-error.component.ts

@@ -12,8 +12,8 @@ export class TranslatedFormErrorComponent implements NgxFormErrorComponent, OnIn
 	public cssClass = "translated-form-error";
 
 	public errors: NgxFormFieldError[] = [];
-	public errors$: Observable<NgxFormFieldError[]>;
-	public fieldName: string;
+	public errors$!: Observable<NgxFormFieldError[]>;
+	public fieldName = "undefined";
 
 	public constructor(public translateService: TranslateService) {}
 

demo-app/src/app/pages/ngx-forms-example/ngx-forms-example.component.ts

@@ -1,5 +1,5 @@
 /*tslint:disable:trackBy-function template-cyclomatic-complexity*/
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from "@angular/forms";
 import { ErrorStateMatcher } from "@angular/material/core";
 import { ParentErrorStateMatcher } from "../../parent-error-state-matcher";
@@ -10,16 +10,14 @@ import { PasswordValidator } from "../../password-validator";
 	templateUrl: "./ngx-forms-example.component.html",
 	styleUrls: ["./ngx-forms-example.component.scss"]
 })
-export class NgxFormsExampleComponent implements OnInit {
+export class NgxFormsExampleComponent {
 	public formGroup: FormGroup;
 	public parentErrorStateMatcher: ErrorStateMatcher = new ParentErrorStateMatcher();
 	public passwordPattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$";
 	public showValidationDetails = false;
 	public showValidationSummary = true;
 
-	public constructor(private formBuilder: FormBuilder) {}
-
-	public ngOnInit(): void {
+	public constructor(private formBuilder: FormBuilder) {
 		this.formGroup = this.formBuilder.group({
 			username: [undefined, Validators.required],
 			matchingPasswords: new FormGroup(

demo-app/src/app/pages/reactive-forms-example/reactive-forms-example.component.ts

@@ -1,5 +1,5 @@
 /*tslint:disable:trackBy-function template-cyclomatic-complexity*/
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from "@angular/forms";
 import { ErrorStateMatcher } from "@angular/material/core";
 import { PasswordValidator } from "../../password-validator";
@@ -10,17 +10,15 @@ import { ParentErrorStateMatcher } from "../../parent-error-state-matcher";
 	templateUrl: "./reactive-forms-example.component.html",
 	styleUrls: ["./reactive-forms-example.component.scss"]
 })
-export class ReactiveFormsExampleComponent implements OnInit {
+export class ReactiveFormsExampleComponent {
 	public formGroup: FormGroup;
 	public validationMessages: { [key: string]: { type: string; message: string }[] };
 	public parentErrorStateMatcher: ErrorStateMatcher = new ParentErrorStateMatcher();
 	public passwordPattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$";
 	public showValidationDetails = false;
 	public showValidationSummary = true;
 
-	public constructor(private formBuilder: FormBuilder) {}
-
-	public ngOnInit(): void {
+	public constructor(private formBuilder: FormBuilder) {
 		this.formGroup = this.formBuilder.group({
 			username: [undefined, Validators.required],
 			matchingPasswords: new FormGroup(

demo-app/src/app/pages/template-driven-forms-example/template-driven-forms-example.component.ts

@@ -1,5 +1,5 @@
 /*tslint:disable:trackBy-function template-cyclomatic-complexity*/
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 import { NgForm } from "@angular/forms";
 import { ErrorStateMatcher } from "@angular/material/core";
 import { ParentErrorStateMatcher } from "../../parent-error-state-matcher";
@@ -9,10 +9,10 @@ import { ParentErrorStateMatcher } from "../../parent-error-state-matcher";
 	templateUrl: "./template-driven-forms-example.component.html",
 	styleUrls: ["./template-driven-forms-example.component.scss"]
 })
-export class TemplateDrivenFormsExampleComponent implements OnInit {
-	public username: string;
-	public password: string;
-	public confirmPassword: string;
+export class TemplateDrivenFormsExampleComponent {
+	public username = "";
+	public password = "";
+	public confirmPassword = "";
 
 	public parentErrorStateMatcher: ErrorStateMatcher = new ParentErrorStateMatcher();
 	public passwordPattern = "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$";
@@ -21,10 +21,6 @@ export class TemplateDrivenFormsExampleComponent implements OnInit {
 	public showValidationSummary = true;
 
 	public constructor() {
-		/*empty*/
-	}
-
-	public ngOnInit(): void {
 		this.validationMessages = {
 			username: [
 				{

src/directives/form-errors-group.directive.spec.ts

@@ -14,7 +14,7 @@ describe("NgxFormErrorsGroupDirective", () => {
 		public dummyGroup: string = groupName;
 
 		@ViewChild(NgxFormErrorsGroupDirective)
-		public formErrorGroup: NgxFormErrorsGroupDirective;
+		public formErrorGroup!: NgxFormErrorsGroupDirective;
 	}
 
 	let fixture: ComponentFixture<TestComponent>;

src/directives/form-errors-group.directive.ts

@@ -23,7 +23,7 @@ export class NgxFormErrorsGroupDirective implements OnInit {
 	/**
 	 * @ignore
 	 */
-	private _formErrorsGroup: string;
+	private _formErrorsGroup!: string;
 
 	/**
 	 * Class constructor

src/directives/form-errors.directive.spec.ts

@@ -1,5 +1,5 @@
 /* tslint:disable:no-big-function completed-docs */
-import { Component, OnInit, QueryList, ViewChildren } from "@angular/core";
+import { Component, QueryList, ViewChildren } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { ComponentFixture, fakeAsync, TestBed } from "@angular/core/testing";
 import { BrowserDynamicTestingModule } from "@angular/platform-browser-dynamic/testing";
@@ -52,17 +52,15 @@ describe("NgxFormErrorsDirective", () => {
 		selector: "test-component",
 		template: templateWithFormControl
 	})
-	class TestComponent implements OnInit {
+	class TestComponent {
 		public formNgxError: FormGroup;
 		public formControlName: string = formControlName;
 		public formControlAlias: string = formControlAlias;
 
 		@ViewChildren(NgxFormErrorsDirective)
-		public formErrorsDirectives: QueryList<NgxFormErrorsDirective>;
+		public formErrorsDirectives!: QueryList<NgxFormErrorsDirective>;
 
-		public constructor(public formBuilder: FormBuilder) {}
-
-		public ngOnInit(): void {
+		public constructor(public formBuilder: FormBuilder) {
 			this.formNgxError = this.formBuilder.group({
 				[this.formControlName]: [
 					"John Doe",
@@ -79,7 +77,7 @@ describe("NgxFormErrorsDirective", () => {
 		`
 	})
 	class FormErrorComponent implements NgxFormErrorComponent {
-		public errors$: Observable<NgxFormFieldError[]>;
+		public errors$!: Observable<NgxFormFieldError[]>;
 
 		public subscribeToErrors(): void {
 			/*empty*/

src/directives/form-errors.directive.ts

@@ -40,20 +40,20 @@ export class NgxFormErrorsDirective implements OnInit, OnChanges, OnDestroy {
 	 */
 	/* tslint:disable-next-line:no-input-rename */
 	@Input("ngxFormErrors")
-	public formControlName: string;
+	public formControlName!: string;
 
 	/**
 	 * The field name or alias to be displayed in the validation messages instead of the form control's name.
 	 * This alias will be sent in the `params.fieldName` property of the {@link NgxFormFieldError}(s) emitted by this directive
 	 */
 	/* tslint:disable-next-line:no-input-rename */
 	@Input("ngxFormErrorsFieldName")
-	public fieldName: string;
+	public fieldName?: string;
 
 	/**
 	 * The form control bound to this directive
 	 */
-	public _formControl: AbstractControl;
+	public _formControl!: AbstractControl;
 
 	/**
 	 * Subject used as source to emit the validation errors from the form control
@@ -73,12 +73,12 @@ export class NgxFormErrorsDirective implements OnInit, OnChanges, OnDestroy {
 	/**
 	 * Represents a component created by a `ComponentFactory`.
 	 */
-	public _componentRef: ComponentRef<NgxFormErrorComponent>;
+	public _componentRef!: ComponentRef<NgxFormErrorComponent>;
 
 	/**
 	 * Subscription to the changes observable of the form control bound to this directive
 	 */
-	private _controlChangesSubscription: Subscription;
+	private _controlChangesSubscription!: Subscription;
 
 	/**
 	 * Class constructor

src/services/form-errors-message.service.spec.ts

@@ -171,9 +171,9 @@ describe("NgxFormErrorsMessageService", () => {
 });
 
 class NgxFormErrorsMessageServiceHelper extends NgxFormErrorsMessageService {
-	public errorMessages: NgxValidationErrorMessages;
+	public errorMessages: NgxValidationErrorMessages = {};
 
-	public fieldNames: NgxValidationErrorFieldNames;
+	public fieldNames: NgxValidationErrorFieldNames = {};
 
 	public constructor() {
 		super();

tsconfig.json

@@ -6,8 +6,6 @@
     "typeRoots": ["./node_modules/@types"],
     "lib": ["dom", "dom.iterable", "es2017"],
     "paths": {},
-    // FIXME set this to true asap we have a newer version of IntelliJ
-    "strictPropertyInitialization": false,
     "outDir": "./dist"
   }
 }