2.9: strictNullChecks (doesn't compile)

.idea/jsLinters/tslint.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="TsLintConfiguration" use-custom-config-file="true" custom-config-file-path="$PROJECT_DIR$/tsconfig3.json" />
+  <component name="TsLintConfiguration" use-custom-config-file="true" custom-config-file-path="$PROJECT_DIR$/course/tsconfig.json" />
 </project>

.idea/typescript-compiler.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="TypeScriptCompiler">
+    <option name="enableServiceForProjectsWithoutConfig" value="false" />
+    <option name="recompileOnChanges" value="true" />
+  </component>
+</project>

.idea/workspace.xml

@@ -2,9 +2,17 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="c6f02f4e-af06-43d1-8bc0-507af01d0573" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/.idea/typescript-compiler.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/jsLinters/tslint.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/jsLinters/tslint.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/course/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/app.module.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/course/src/app/base-report.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/base-report.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/course/src/app/edit-report.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/edit-report.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/course/src/app/reports.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/reports.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/course/src/app/services/reportData.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/services/reportData.service.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/course/src/app/services/reportItem.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/services/reportItem.service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/course/src/app/services/window.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/app/services/window.service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/course/src/styles.css" beforeDir="false" afterPath="$PROJECT_DIR$/course/src/styles.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/course/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/course/tsconfig.json" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@@ -17,9 +25,10 @@
     <session id="1382061906">
       <usages-collector id="statistics.lifecycle.project">
         <counts>
-          <entry key="project.closed" value="1" />
+          <entry key="project.closed" value="2" />
           <entry key="project.open.time.0" value="2" />
-          <entry key="project.opened" value="2" />
+          <entry key="project.open.time.8" value="1" />
+          <entry key="project.opened" value="3" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
@@ -28,8 +37,8 @@
           <entry key="css" value="1" />
           <entry key="gitignore" value="2" />
           <entry key="groovy" value="1" />
-          <entry key="json" value="13" />
-          <entry key="ts" value="25" />
+          <entry key="json" value="16" />
+          <entry key="ts" value="28" />
           <entry key="txt" value="1" />
         </counts>
       </usages-collector>
@@ -39,26 +48,26 @@
           <entry key="JSON" value="3" />
           <entry key="PLAIN_TEXT" value="2" />
           <entry key="Scratch" value="3" />
-          <entry key="TypeScript" value="25" />
-          <entry key="tsconfig" value="10" />
+          <entry key="TypeScript" value="28" />
+          <entry key="tsconfig" value="13" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="json" value="40" />
-          <entry key="ts" value="534" />
+          <entry key="json" value="62" />
+          <entry key="ts" value="898" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="JSON" value="5" />
-          <entry key="TypeScript" value="534" />
-          <entry key="tsconfig" value="35" />
+          <entry key="TypeScript" value="898" />
+          <entry key="tsconfig" value="57" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.js.language.service.starts">
         <counts>
-          <entry key="TypeScriptServerServiceImpl" value="1" />
+          <entry key="TypeScriptServerServiceImpl" value="2" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.php.new.class" />
@@ -69,12 +78,21 @@
     </session>
   </component>
   <component name="FileEditorManager">
-    <leaf>
+    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
       <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/course/src/app/base-report.component.ts">
+        <entry file="file://$PROJECT_DIR$/course/src/tsconfig.app.json">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="169">
-              <caret line="50" column="47" selection-start-line="50" selection-start-column="47" selection-end-line="50" selection-end-column="47" />
+            <state relative-caret-position="195">
+              <caret line="13" lean-forward="true" selection-start-line="13" selection-end-line="13" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/course/tsconfig.json">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="360">
+              <caret line="24" column="3" selection-start-line="24" selection-start-column="3" selection-end-line="24" selection-end-column="3" />
             </state>
           </provider>
         </entry>
@@ -97,13 +115,14 @@
         <option value="$PROJECT_DIR$/course/src/app/create-report.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/create-report-item.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/app-routing.module.ts" />
-        <option value="$PROJECT_DIR$/course/src/app/edit-report.component.ts" />
-        <option value="$PROJECT_DIR$/course/src/app/reports.component.ts" />
         <option value="$PROJECT_DIR$/course/src/app/services/messenger.service.ts" />
-        <option value="$PROJECT_DIR$/course/tsconfig.json" />
         <option value="$PROJECT_DIR$/course/src/app/app.module.ts" />
         <option value="$PROJECT_DIR$/course/src/app/services/reportItem.service.ts" />
         <option value="$PROJECT_DIR$/course/src/app/base-report.component.ts" />
+        <option value="$PROJECT_DIR$/course/src/app/services/reportData.service.ts" />
+        <option value="$PROJECT_DIR$/course/src/app/edit-report.component.ts" />
+        <option value="$PROJECT_DIR$/course/src/app/reports.component.ts" />
+        <option value="$PROJECT_DIR$/course/tsconfig.json" />
       </list>
     </option>
   </component>
@@ -118,13 +137,6 @@
   </component>
   <component name="NodePackageJsonFileManager">
     <packageJsonPaths>
-      <path value="$PROJECT_DIR$/02/demos/After/package.json" />
-      <path value="$PROJECT_DIR$/02/demos/Before/package.json" />
-      <path value="$PROJECT_DIR$/03/demos/After/package.json" />
-      <path value="$PROJECT_DIR$/03/demos/Before/package.json" />
-      <path value="$PROJECT_DIR$/04/demos/After/package.json" />
-      <path value="$PROJECT_DIR$/04/demos/Before/package.json" />
-      <path value="$PROJECT_DIR$/05/demos/package.json" />
       <path value="$PROJECT_DIR$/course/package.json" />
     </packageJsonPaths>
   </component>
@@ -140,19 +152,14 @@
     <entry key="Project Default">
       <profile-state>
         <expanded-state>
+          <State />
           <State>
-            <id />
-          </State>
-          <State>
-            <id>Code quality toolsJavaScript</id>
-          </State>
-          <State>
-            <id>JavaScript</id>
+            <id>TypeScript</id>
           </State>
         </expanded-state>
         <selected-state>
           <State>
-            <id>Eslint</id>
+            <id>TypeScriptUMDGlobal</id>
           </State>
         </selected-state>
       </profile-state>
@@ -174,32 +181,31 @@
             <path>
               <item name="Pluralsight-GetTheMostFromTypescript" type="b2602c69:ProjectViewProjectNode" />
               <item name="Pluralsight-GetTheMostFromTypescript" type="462c0819:PsiDirectoryNode" />
-              <item name="course" type="462c0819:PsiDirectoryNode" />
+              <item name="02" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="Pluralsight-GetTheMostFromTypescript" type="b2602c69:ProjectViewProjectNode" />
               <item name="Pluralsight-GetTheMostFromTypescript" type="462c0819:PsiDirectoryNode" />
-              <item name="course" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
+              <item name="02" type="462c0819:PsiDirectoryNode" />
+              <item name="demos" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="Pluralsight-GetTheMostFromTypescript" type="b2602c69:ProjectViewProjectNode" />
               <item name="Pluralsight-GetTheMostFromTypescript" type="462c0819:PsiDirectoryNode" />
-              <item name="course" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="app" type="462c0819:PsiDirectoryNode" />
+              <item name="02" type="462c0819:PsiDirectoryNode" />
+              <item name="demos" type="462c0819:PsiDirectoryNode" />
+              <item name="After" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="Pluralsight-GetTheMostFromTypescript" type="b2602c69:ProjectViewProjectNode" />
               <item name="Pluralsight-GetTheMostFromTypescript" type="462c0819:PsiDirectoryNode" />
               <item name="course" type="462c0819:PsiDirectoryNode" />
-              <item name="src" type="462c0819:PsiDirectoryNode" />
-              <item name="app" type="462c0819:PsiDirectoryNode" />
-              <item name="services" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
               <item name="Pluralsight-GetTheMostFromTypescript" type="b2602c69:ProjectViewProjectNode" />
-              <item name="Scratches and Consoles" type="1a2a3e82:ScratchProjectViewPane$MyProjectNode" />
+              <item name="Pluralsight-GetTheMostFromTypescript" type="462c0819:PsiDirectoryNode" />
+              <item name="course" type="462c0819:PsiDirectoryNode" />
+              <item name="src" type="462c0819:PsiDirectoryNode" />
             </path>
           </expand>
           <select />
@@ -225,8 +231,8 @@
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="/usr/local/bin/node" />
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <property name="nodejs_package_manager_path" value="yarn" />
-    <property name="settings.editor.selected.configurable" value="preferences.sourceCode" />
-    <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
+    <property name="settings.editor.selected.configurable" value="settings.typescriptcompiler" />
+    <property name="ts.external.directory.path" value="$PROJECT_DIR$/course/node_modules/typescript/lib" />
   </component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
@@ -269,42 +275,42 @@
       <option name="presentableId" value="Default" />
       <updated>1535304175302</updated>
       <workItem from="1535304176395" duration="75000" />
-      <workItem from="1535304274687" duration="6085000" />
+      <workItem from="1535304274687" duration="6343000" />
+      <workItem from="1535393199806" duration="1370000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="6160000" />
+    <option name="totallyTimeSpent" value="7788000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="23" width="1440" height="877" extended-state="6" />
-    <editor active="true" />
     <layout>
       <window_info id="Favorites" order="0" side_tool="true" />
       <window_info id="Structure" order="1" side_tool="true" visible="true" weight="0.1795422" />
       <window_info id="npm" order="2" side_tool="true" />
-      <window_info anchor="bottom" id="TypeScript" />
-      <window_info anchor="bottom" id="Event Log" order="0" side_tool="true" />
+      <window_info anchor="bottom" id="Event Log" order="0" sideWeight="0.5007153" side_tool="true" weight="0.3299363" />
       <window_info anchor="bottom" id="Version Control" order="1" />
       <window_info anchor="bottom" id="Terminal" order="2" />
       <window_info anchor="bottom" id="Metrics" order="3" />
       <window_info anchor="bottom" id="Message" order="4" />
       <window_info anchor="bottom" id="Find" order="5" weight="0.3299363" />
-      <window_info active="true" anchor="bottom" id="Run" order="6" visible="true" weight="0.3299363" />
+      <window_info active="true" anchor="bottom" id="Run" order="6" sideWeight="0.49928468" visible="true" weight="0.3299363" />
       <window_info anchor="bottom" id="Debug" order="7" weight="0.4" />
       <window_info anchor="bottom" id="Cvs" order="8" weight="0.25" />
       <window_info anchor="bottom" id="Inspection" order="9" weight="0.4" />
       <window_info anchor="bottom" id="TODO" order="10" />
       <window_info anchor="bottom" id="Docker" order="11" />
       <window_info anchor="bottom" id="Database Changes" order="12" show_stripe_button="false" />
-      <window_info anchor="right" x="0" y="0" width="310" height="677" id="Documentation" sideWeight="0.50190115" side_tool="true" weight="0.26752505" />
+      <window_info anchor="bottom" id="TypeScript" order="13" />
       <window_info anchor="right" id="Database" order="0" />
       <window_info anchor="right" id="Mongo Explorer" order="1" />
       <window_info anchor="right" id="Commander" order="2" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="3" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="4" weight="0.25" />
-      <window_info anchor="right" content_ui="combo" id="Project" order="5" sideWeight="0.49809885" visible="true" weight="0.26752505" />
+      <window_info anchor="right" content_ui="combo" id="Project" order="5" sideWeight="0.49619773" visible="true" weight="0.27110156" />
       <window_info anchor="right" id="Remote Host" order="6" show_stripe_button="false" />
+      <window_info anchor="right" x="0" y="0" width="310" height="677" id="Documentation" order="7" sideWeight="0.5038023" side_tool="true" weight="0.27110156" />
     </layout>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -314,34 +320,10 @@
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="390">
-          <caret line="26" column="26" lean-forward="true" selection-start-line="26" selection-start-column="26" selection-end-line="26" selection-end-column="26" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/resources/02/demos/Before/package.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="435">
-          <caret line="29" column="35" selection-start-line="29" selection-start-column="35" selection-end-line="29" selection-end-column="35" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/tsconfig.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="390">
-          <caret line="26" lean-forward="true" selection-start-line="26" selection-end-line="26" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/app/services/window.service.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="45">
-          <caret line="3" lean-forward="true" selection-start-line="3" selection-end-line="3" />
-        </state>
-      </provider>
-    </entry>
+    <entry file="file://$PROJECT_DIR$/package.json" />
+    <entry file="file://$PROJECT_DIR$/resources/02/demos/Before/package.json" />
+    <entry file="file://$PROJECT_DIR$/tsconfig.json" />
+    <entry file="file://$PROJECT_DIR$/src/app/services/window.service.ts" />
     <entry file="file://$PROJECT_DIR$/.gitignore">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="345">
@@ -349,26 +331,10 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/resources/02/demos/Before/.gitignore">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/.angular-cli.json">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/polyfills.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="300">
-          <caret line="49" lean-forward="true" selection-start-line="49" selection-end-line="49" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/styles.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="15">
-          <caret line="1" column="66" lean-forward="true" selection-start-line="1" selection-start-column="66" selection-end-line="1" selection-end-column="66" />
-        </state>
-      </provider>
-    </entry>
+    <entry file="file://$PROJECT_DIR$/resources/02/demos/Before/.gitignore" />
+    <entry file="file://$PROJECT_DIR$/.angular-cli.json" />
+    <entry file="file://$PROJECT_DIR$/src/polyfills.ts" />
+    <entry file="file://$PROJECT_DIR$/src/styles.css" />
     <entry file="file://$PROJECT_DIR$/course/node_modules/@types/node/index.d.ts">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
@@ -410,13 +376,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/course/src/app/edit-report.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="251">
-          <caret line="25" column="34" lean-forward="true" selection-start-line="25" selection-start-column="34" selection-end-line="25" selection-end-column="34" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$APPLICATION_HOME_DIR$/plugins/JavaScriptLanguage/jsLanguageServicesImpl/external/lib.dom.d.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="236">
@@ -424,23 +383,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/course/src/tsconfig.app.json">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/course/src/app/reports.component.ts">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="225">
-          <caret line="15" column="5" lean-forward="true" selection-start-line="15" selection-start-column="5" selection-end-line="15" selection-end-column="5" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/course/tsconfig.json">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="390">
-          <caret line="26" lean-forward="true" selection-start-line="26" selection-end-line="26" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/course/src/app/services/messenger.service.ts">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="220">
@@ -464,8 +406,43 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/course/src/app/base-report.component.ts">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="169">
-          <caret line="50" column="47" selection-start-line="50" selection-start-column="47" selection-end-line="50" selection-end-column="47" />
+        <state relative-caret-position="349">
+          <caret line="62" column="51" lean-forward="true" selection-start-line="62" selection-start-column="51" selection-end-line="62" selection-end-column="51" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/course/src/app/reports.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="77">
+          <caret line="69" column="5" lean-forward="true" selection-start-line="69" selection-start-column="5" selection-end-line="69" selection-end-column="5" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/course/src/app/edit-report.component.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="341">
+          <caret line="31" column="53" selection-start-line="31" selection-start-column="53" selection-end-line="31" selection-end-column="53" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/course/src/app/services/reportData.service.ts">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="274">
+          <caret line="43" column="72" selection-start-line="43" selection-start-column="72" selection-end-line="43" selection-end-column="72" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/course/tsconfig.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="360">
+          <caret line="24" column="3" selection-start-line="24" selection-start-column="3" selection-end-line="24" selection-end-column="3" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/course/src/tsconfig.app.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="195">
+          <caret line="13" lean-forward="true" selection-start-line="13" selection-end-line="13" />
         </state>
       </provider>
     </entry>

course/src/app/app.module.ts

@@ -32,7 +32,8 @@ export const initApp = (messengerWatcher: MessengerWatcher) => () => {
   messengerWatcher.watch();
 }
 
-export const initMessengerWatcher = (reportDataService: ReportDataService) => new MessengerWatcher(reportDataService);
+export const initMessengerWatcher = (reportDataService: ReportDataService) => 
+  new MessengerWatcher(reportDataService);
 
 @NgModule({
   declarations: [

course/src/app/base-report.component.ts

@@ -48,7 +48,7 @@ class ReportItemDatabase {
     }
 
     addReportItem(item: ReportItem) {
-        const newData = [ ...this.data, item ];
+        const newData = [...this.data, item];
         this.dataChange.next(newData);
     }
 

course/src/app/edit-report.component.ts

@@ -22,11 +22,15 @@ export class EditReportComponent extends BaseReportComponent {
 
         route
             .paramMap
-            .switchMap(params => reportDataService.getReport(+params.get('id')))
+            .switchMap(params => reportDataService.getReport(+params.get('id')!))
             .subscribe(report => {
-                this.description = report.description;
-                this.itemsDataBase.addRange(report.items);
-                this.report = report;
+                if (report) {
+                  this.description = report.description;
+                  this.itemsDataBase.addRange(report.items);
+                  this.report = report;
+                } else {
+                    console.log("report is undefined")
+                }
             });
     }
 

course/src/app/reports.component.ts

@@ -1,13 +1,13 @@
-import {Component, Inject} from '@angular/core';
-import {DataSource} from '@angular/cdk/collections';
-import {Observable} from 'rxjs/Observable';
+import { Component, Inject } from '@angular/core';
+import { DataSource } from '@angular/cdk/collections';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/take';
-import {Report, ReportDataService} from './services/reportData.service';
-import {ActivatedRoute, ParamMap} from '@angular/router';
-import {WindowService} from "./services/window.service";
+import { Report, ReportDataService } from './services/reportData.service';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { WindowService } from './services/window.service';
 
 export class ReportsDataSource extends DataSource<any> {
 
@@ -61,18 +61,18 @@ export class ReportsComponent {
 
     approve(report: Report) {
         this.toggleApproval(report, true);
-        this.toggleApprovedStyle(report.id, true);
+        this.toggleApprovedStyle(report.id!, true);
     }
 
     reject(report: Report) {
         this.toggleApproval(report, false);
-        this.toggleApprovedStyle(report.id, false);
+        this.toggleApprovedStyle(report.id!, false);
     }
 
 
     private toggleApprovedStyle(reportId: number, approved: boolean) {
       setTimeout(() => {
-            const row = this._window.document.getElementById(`report$${reportId}`).closest("mat-row");
+            const row = this._window.document.getElementById(`report$${reportId}`)!.closest("mat-row");
             toggleApprovedStyle.call(row, approved);
         }, 50);
     }
@@ -82,7 +82,12 @@ export class ReportsComponent {
         this.route
             .queryParamMap
             .take(1)
-            .subscribe(params => this.reportDataService.toggleApproval(report, params.get('user')));
+            .map(params => params.get('user'))
+            .subscribe(user => {
+              if (user) {
+                    this.reportDataService.toggleApproval(report, user);
+              }
+            });
 
     }
 }

course/src/app/services/reportData.service.ts

@@ -32,16 +32,17 @@ export class ReportDataService {
         return this.dataChange.value;
     }
 
-    getReport(reportId: number): Promise<Report> {
-        return this.data.some(r => r.id === reportId) ?
-            Promise.resolve(this.data.find(r => r.id === reportId)) :
-            Promise.resolve(undefined);
+    getReport(reportId: number): Promise<Report | undefined> {
+        return Promise.resolve(this.data.find(r => r.id === reportId));
     }
 
     add(report: Report) {
         const newReport = {
             ...report,
-            id: this.data.reduce((biggestId, rep) => biggestId > rep.id ? biggestId : rep.id, 0) + 1,
+            // Since this.data: Report[], rep is a Report, so it does have an id
+            // property we can use, although Report.id is an optional number.
+            // Which means we can tell the compiler it exists with a "!".
+            id: this.data.reduce((biggestId, rep) => biggestId > rep.id! ? biggestId : rep.id!, 0) + 1,
             amount: report.items.reduce((sum, item) => sum + item.amount, 0)
         };
         const newData = [...this.data, newReport];

course/src/app/services/reportItem.service.ts

@@ -31,7 +31,7 @@ function validateTraining(item: ReportItem): string {
     if (item.amount < 50 && !item.hasReceipt) {
         return '';
     }
-    return 'A food item with a value greater than $50 must have a receipt';
+    return 'A training item with a value greater than $50 must have a receipt';
 }
 
 const validateDate = (minDate: Date, maxDate: Date) => (item: ReportItem): string => {

course/src/app/services/window.service.ts

@@ -1,3 +1,3 @@
-import { OpaqueToken } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 
-export const WindowService = new OpaqueToken('WindowService');
+export const WindowService = new InjectionToken('WindowService');

course/tsconfig.json

@@ -17,7 +17,7 @@
     "noUnusedParameters": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
-    "strictNullChecks": false,
+    "strictNullChecks": true,
     "target": "es5",
     "typeRoots": [
       "node_modules/@types"