feat(settings): add strictPropertyInitialization to compiler options

- update typescript configuration
- eliminate strictPropertyInitialization violations

addresses #536

Author: slegge

projects/angular-ngrx-material-starter/src/app/app/app.component.ts

@@ -44,10 +44,10 @@ export class AppComponent implements OnInit {
     { link: 'settings', label: 'anms.menu.settings' }
   ];
 
-  isAuthenticated$: Observable<boolean>;
-  stickyHeader$: Observable<boolean>;
-  language$: Observable<string>;
-  theme$: Observable<string>;
+  isAuthenticated$: Observable<boolean> | undefined;
+  stickyHeader$: Observable<boolean> | undefined;
+  language$: Observable<string> | undefined;
+  theme$: Observable<string> | undefined;
 
   constructor(
     private store: Store,

projects/angular-ngrx-material-starter/src/app/features/examples/crud/components/crud.component.ts

@@ -25,7 +25,7 @@ export class CrudComponent {
   books$: Observable<Book[]> = this.store.pipe(select(selectAllBooks));
   selectedBook$: Observable<Book | undefined> = this.store.pipe(select(selectSelectedBook));
 
-  isEditing: boolean;
+  isEditing = false;
 
   constructor(
     public store: Store<State>,

projects/angular-ngrx-material-starter/src/app/features/examples/examples/examples.component.ts

@@ -17,7 +17,7 @@ import { State } from '../examples.state';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ExamplesComponent implements OnInit {
-  isAuthenticated$: Observable<boolean>;
+  isAuthenticated$: Observable<boolean> | undefined;
 
   examples = [
     { link: 'todos', label: 'anms.examples.menu.todos' },

projects/angular-ngrx-material-starter/src/app/features/examples/form/components/form.component.ts

@@ -41,7 +41,7 @@ export class FormComponent implements OnInit {
     rating: [0, Validators.required]
   });
 
-  formValueChanges$: Observable<Form>;
+  formValueChanges$: Observable<Form> | undefined;
 
   constructor(
     private fb: FormBuilder,

projects/angular-ngrx-material-starter/src/app/features/examples/simple-state-management/components/user.component.html

@@ -39,10 +39,10 @@ <h2 *ngIf="isEdit.value">{{'anms.examples.simple-state-management.form.edit.titl
             "
             formControlName="username"
           />
-          <mat-error *ngIf="userForm.get('username')?.hasError('minlength')">
-            {{'anms.examples.simple-state-management.validator.minlength' | translate:{minlength: userForm.get('username')?.errors?.minlength.requiredLength} }}
+          <mat-error *ngIf="userForm?.get('username')?.hasError('minlength')">
+            {{'anms.examples.simple-state-management.validator.minlength' | translate:{minlength: userForm?.get('username')?.errors?.minlength.requiredLength} }}
           </mat-error>
-          <mat-error *ngIf="userForm.get('username')?.hasError('required')">
+          <mat-error *ngIf="userForm?.get('username')?.hasError('required')">
             {{'anms.examples.simple-state-management.validator.required' | translate}}
           </mat-error>
         </mat-form-field>
@@ -54,10 +54,10 @@ <h2 *ngIf="isEdit.value">{{'anms.examples.simple-state-management.form.edit.titl
             "
             formControlName="name"
           />
-          <mat-error *ngIf="userForm.get('name')?.hasError('minlength')">
-            {{'anms.examples.simple-state-management.validator.minlength' | translate:{minlength: userForm.get('name')?.errors?.minlength.requiredLength} }}
+          <mat-error *ngIf="userForm?.get('name')?.hasError('minlength')">
+            {{'anms.examples.simple-state-management.validator.minlength' | translate:{minlength: userForm?.get('name')?.errors?.minlength.requiredLength} }}
           </mat-error>
-          <mat-error *ngIf="userForm.get('name')?.hasError('required')">
+          <mat-error *ngIf="userForm?.get('name')?.hasError('required')">
             {{'anms.examples.simple-state-management.validator.required' | translate}}
           </mat-error>
         </mat-form-field>
@@ -69,10 +69,10 @@ <h2 *ngIf="isEdit.value">{{'anms.examples.simple-state-management.form.edit.titl
             "
             formControlName="surname"
           />
-          <mat-error *ngIf="userForm.get('surname')?.hasError('minlength')">
-            {{'anms.examples.simple-state-management.validator.minlength' | translate:{minlength: userForm.get('surname')?.errors?.minlength.requiredLength} }}
+          <mat-error *ngIf="userForm?.get('surname')?.hasError('minlength')">
+            {{'anms.examples.simple-state-management.validator.minlength' | translate:{minlength: userForm?.get('surname')?.errors?.minlength.requiredLength} }}
           </mat-error>
-          <mat-error *ngIf="userForm.get('surname')?.hasError('required')">
+          <mat-error *ngIf="userForm?.get('surname')?.hasError('required')">
             {{'anms.examples.simple-state-management.validator.required' | translate}}
           </mat-error>
         </mat-form-field>

projects/angular-ngrx-material-starter/src/app/features/examples/simple-state-management/components/user.component.ts

@@ -20,8 +20,8 @@ import { User, UserService } from '../user.service';
 })
 export class UserComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
-  userForm: FormGroup;
-  users$: Observable<User[]>;
+  userForm: FormGroup | undefined;
+  users$: Observable<User[]> | undefined;
   isEdit$: Observable<{ value: boolean }> | undefined;
 
   constructor(private fb: FormBuilder, private userService: UserService) {}
@@ -47,11 +47,11 @@ export class UserComponent implements OnInit {
   }
 
   editUser(user: User) {
-    this.userForm.patchValue({ ...user });
+    this.userForm?.patchValue({ ...user });
   }
 
   onSubmit(userFormRef: FormGroupDirective) {
-    if (this.userForm.valid) {
+    if (this.userForm?.valid) {
       const data = this.userForm.getRawValue();
       if (data.id && data.id.length) {
         this.userService.updateUser(data);

projects/angular-ngrx-material-starter/src/app/features/examples/stock-market/components/stock-market-container.component.ts

@@ -18,7 +18,7 @@ import { State } from '../../examples.state';
 })
 export class StockMarketContainerComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
-  stocks$: Observable<StockMarketState>;
+  stocks$: Observable<StockMarketState> | undefined;
 
   constructor(public store: Store<State>) {}
 

projects/angular-ngrx-material-starter/src/app/features/examples/todos/components/todos-container.component.ts

@@ -23,9 +23,9 @@ import { selectTodos, selectRemoveDoneTodosDisabled } from '../todos.selectors';
 })
 export class TodosContainerComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
-  todos$: Observable<Todo[]>;
-  filter$: Observable<TodosFilter>;
-  removeDoneDisabled$: Observable<boolean>;
+  todos$: Observable<Todo[]> | undefined;
+  filter$: Observable<TodosFilter> | undefined;
+  removeDoneDisabled$: Observable<boolean> | undefined;
   newTodo = '';
 
   constructor(

projects/angular-ngrx-material-starter/src/app/features/settings/settings/settings-container.component.ts

@@ -25,7 +25,7 @@ import { selectSettings } from '../../../core/settings/settings.selectors';
 })
 export class SettingsContainerComponent implements OnInit {
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
-  settings$: Observable<SettingsState>;
+  settings$: Observable<SettingsState> | undefined;
 
   themes = [
     { value: 'DEFAULT-THEME', label: 'blue' },

projects/angular-ngrx-material-starter/src/app/shared/big-input/big-input/big-input.component.ts

@@ -8,10 +8,11 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 })
 export class BigInputComponent {
   @Input()
-  placeholder: string;
+  placeholder = '';
 
   @Input()
   value = '';
+
   @Input()
   disabled = false;
 

projects/angular-ngrx-material-starter/src/app/shared/rtl-support/rtl-support.directive.ts

@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs';
   selector: '[rtl]'
 })
 export class RtlSupportDirective implements OnInit, OnDestroy {
-  private subscription: Subscription;
+  private subscription: Subscription | undefined;
   constructor(private el: ElementRef, public translate: TranslateService) {
     el.nativeElement.style.textAlign =
       translate.currentLang === 'he' ? 'right' : 'left';

tsconfig.json

@@ -11,6 +11,7 @@
     "importHelpers": true,
     "strictNullChecks": true,
     "noImplicitAny": true,
+    "strictPropertyInitialization": true,
     "module": "esnext",
     "target": "es2015",
     "typeRoots": ["node_modules/@types"],