Typescript: use strict mode

set version to 5.1.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "edc-web-mail-ng2",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

src/app/email/email.component.html

@@ -13,15 +13,15 @@
       <div class="email-header">
         <div class="email-header-item">
           <span class="email-header-label">Subject: </span>
-          <span>{{ email.subject }}</span>
+          <span>{{ email?.subject }}</span>
         </div>
         <div class="email-header-item">
           <span class="email-header-label">From: </span>
-          <span *ngFor="let from of email.from; let lastFrom = last">{{ from }}{{lastFrom ? '' : '; '}}</span>
+          <span *ngFor="let from of email?.from; let lastFrom = last">{{ from }}{{lastFrom ? '' : '; '}}</span>
         </div>
         <div class="email-header-item">
           <span class="email-header-label">Date: </span>
-          <span>{{ email.date }}</span>
+          <span>{{ email?.date }}</span>
         </div>
       </div>
       <div class="email-icon-group">
@@ -36,6 +36,6 @@
         </div>
       </div>
     </div>
-    <div class="email-body"> {{ email.content }}</div>
+    <div class="email-body"> {{ email?.content }}</div>
   </div>
 </div>

src/app/email/email.component.ts

@@ -1,10 +1,10 @@
-import {catchError, switchMap} from 'rxjs/operators';
+import { catchError, switchMap } from 'rxjs/operators';
 import { EMPTY } from 'rxjs';
 
-import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {EmailService} from './email.service';
-import {Email} from './email';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { EmailService } from './email.service';
+import { Email } from './email';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -14,19 +14,19 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class EmailComponent implements OnInit {
 
-  email: Email;
+  email: Email | undefined;
 
   constructor(
     private route: ActivatedRoute,
     private emailService: EmailService,
     private readonly translateService: TranslateService
   ) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
     if (this.route.params) {
       this.route.params.pipe(
         switchMap(params => {
-          const emailId = +params['emailId'] + 1; // (+) converts string parameter to a number
+          const emailId = +params['emailId'] + 1;
           const account = params['account'];
           return this.emailService.getEmail(account, emailId);
         }),
@@ -36,7 +36,6 @@ export class EmailComponent implements OnInit {
         })
       ).subscribe((email: Email) => this.email = email);
     }
-
   }
 
   getLang(): string {

src/app/email/email.service.ts

@@ -7,20 +7,21 @@ import { EmailsData } from './emails-data';
 @Injectable()
 export class EmailService {
 
-  emails = new EmailsData();
+  emailData: EmailsData = new EmailsData();
 
-  getEmail(accountName: string, id: number): Observable<Email | void> {
-    if (!this.emails || !this.emails.eMailsList || !this.emails.eMailsList.length) {
+  getEmail(accountName: string, id: number): Observable<Email | never> {
+    if (!this.emailData || !this.emailData.eMailsList || !this.emailData.eMailsList.length) {
       return EMPTY;
     }
-    const mails = this.emails.eMailsList.find(mail => mail.account === accountName);
+    const mails = this.emailData.eMailsList.find(mail => mail.account === accountName);
     if (mails && mails.emails && mails.emails.length) {
       const mail = mails.emails.find(m => m.id === id);
       if (mail) {
         return of(mail);
       } else {
-        return throwError('Email not found');
+        return throwError(() => Error('Email not found'));
       }
     }
+    return EMPTY;
   }
 }

src/app/email/emails-data.ts

@@ -2,6 +2,11 @@ import { Email } from './email';
 
 export const localAccounts = ['help@edc.com', 'news@edc.com'];
 
+export interface UserEmails {
+  account: string;
+  emails: Email[];
+}
+
 export class EmailsData {
   eMail1 = new Email(1, 'EDC features', [ 'helper@edc.com' ], '12:15',
     `Create a brick in a blast, and integrate it to your project.
@@ -26,7 +31,7 @@ With users at the center of our product strategy, we believe help should be cont
    content and map it to articles.
    Add images, links, video, plus a whole lot more. Content is delivered directly to your software in a few simple steps. `);
 
-  eMailsList = [
+  eMailsList: UserEmails[] = [
     {
       account: localAccounts[0],
       emails: [

src/app/left-sidebar/tree/tree-element/tree-element.component.ts

@@ -10,17 +10,17 @@ import { TreeElementName } from './tree-element-name';
 })
 export class TreeElementComponent {
 
-  @Input() treeItem: TreeItem;
+  @Input() treeItem: TreeItem | undefined;
   @Output() selectedElement = new EventEmitter<TreeItem>();
 
-  selectElement(parent: TreeItem, elementName: TreeElementName) {
+  selectElement(parent: TreeItem, elementName: TreeElementName): void {
     if (parent) {
       parent.$selectedChild = elementName;
       this.selectedElement.emit(parent);
     }
   }
 
-  isElementSelected(parent: TreeItem, elementName: TreeElementName) {
+  isElementSelected(parent: TreeItem, elementName: TreeElementName): boolean {
     return !!parent && !!elementName && parent.$selectedChild === elementName;
   }
 }

src/app/utils/popover-config-handler.ts

@@ -5,7 +5,7 @@ import { AnimationType, IEdcPopoverOptions, PopoverConfigurationHandler } from '
 export class PopoverConfigHandler implements PopoverConfigurationHandler {
 
   getPluginId(): string {
-    return 'webmailmain'
+    return 'webmailmain';
   }
 
   getHelpPath(): string {

src/tsconfig.app.json

@@ -6,6 +6,7 @@
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "target": "es2015",
+    "strict": true,
     "lib": [
       "es2016",
       "dom"