fix(devtools): proper typings in shell-chrome for strictNullChecks

projects/shell-chrome/src/app/background.ts

@@ -1,37 +1,48 @@
 const ports: {
-  [tab: string]: {
-    'content-script': chrome.runtime.Port;
-    devtools: chrome.runtime.Port;
-  };
+  [tab: string]:
+    | {
+        'content-script': chrome.runtime.Port | null;
+        devtools: chrome.runtime.Port | null;
+      }
+    | undefined;
 } = {};
 
 chrome.runtime.onConnect.addListener(port => {
-  let tab = null;
-  let name = null;
+  let tab: string | null = null;
+  let name: string | null = null;
   console.log('Connection event in the background script');
   if (isNumeric(port.name)) {
     tab = port.name;
     console.log('Angular devtools connected, injecting the content script', port.name, ports[tab]);
     name = 'devtools';
-    installContentScript(+port.name);
+    installContentScript(parseInt(port.name, 10));
   } else {
+    if (!port.sender || !port.sender.tab) {
+      console.error('Unable to access the port sender and sender tab');
+      return;
+    }
+    if (port.sender.tab.id === undefined) {
+      console.error('Sender tab id is undefined');
+      return;
+    }
     console.log('Content script connected', port.sender.tab.id);
-    tab = port.sender.tab.id;
+    tab = port.sender.tab.id.toString();
     name = 'content-script';
   }
 
-  if (!ports[tab]) {
+  let portsTab = ports[tab];
+  if (!portsTab) {
     console.log('Creating a tab port');
-    ports[tab] = {
+    portsTab = ports[tab] = {
       devtools: null,
       'content-script': null,
     };
   }
 
-  ports[tab][name] = port;
+  portsTab[name] = port;
 
-  if (ports[tab].devtools && ports[tab]['content-script']) {
-    doublePipe(ports[tab].devtools, ports[tab]['content-script'], tab);
+  if (portsTab.devtools && portsTab['content-script']) {
+    doublePipe(portsTab.devtools, portsTab['content-script'], tab);
   }
 });
 
@@ -44,7 +55,11 @@ const installContentScript = (tabId: number) => {
   chrome.tabs.executeScript(tabId, { file: '/content-script.js' }, () => {});
 };
 
-const doublePipe = (devtoolsPort: chrome.runtime.Port, contentScriptPort: chrome.runtime.Port, tab: string) => {
+const doublePipe = (devtoolsPort: chrome.runtime.Port | null, contentScriptPort: chrome.runtime.Port, tab: string) => {
+  if (devtoolsPort === null) {
+    console.warn('DevTools port is equal to null');
+    return;
+  }
   console.log('Creating two-way communication channel', Date.now(), ports);
 
   const onDevToolsMessage = (message: chrome.runtime.Port) => {

projects/shell-chrome/src/app/chrome-window-extensions.ts

@@ -17,11 +17,11 @@ const extendWindowOperations = <T>(target, classImpl: T) => {
 };
 
 const chromeWindowExtensions = {
-  findConstructorByPosition: (serializedId: string): Element => {
+  findConstructorByPosition: (serializedId: string): Element | undefined => {
     const node = findNodeFromSerializedPosition(serializedId);
     if (node === null) {
       console.error(`Cannot find element associated with node ${serializedId}`);
-      return null;
+      return;
     }
     const root = node.nativeElement instanceof HTMLElement && ng.getComponent(node.nativeElement);
     if (root) {
@@ -30,11 +30,11 @@ const chromeWindowExtensions = {
       console.error('This component has no instance and therefore no constructor');
     }
   },
-  findDomElementByPosition: (serializedId: string): Node => {
+  findDomElementByPosition: (serializedId: string): Node | undefined => {
     const node = findNodeFromSerializedPosition(serializedId);
     if (node === null) {
       console.error(`Cannot find element associated with node ${serializedId}`);
-      return null;
+      return undefined;
     }
     return node.nativeElement;
   },

projects/shell-chrome/src/app/ng-validate.ts

@@ -7,9 +7,13 @@ window.addEventListener('message', (event: MessageEvent) => {
 function detectAngular(win: Window): void {
   const isDebugMode = Boolean((win as any).ng);
   const ngVersionElement = document.querySelector('[ng-version]');
-  const isSupportedAngularVersion = ngVersionElement
-    ? +ngVersionElement.getAttribute('ng-version').split('.')[0] >= 9
-    : false;
+  let isSupportedAngularVersion = false;
+  if (ngVersionElement) {
+    const attr = ngVersionElement.getAttribute('ng-version');
+    if (attr && parseInt(attr.split('.')[0], 10) >= 0) {
+      isSupportedAngularVersion = true;
+    }
+  }
 
   win.postMessage(
     {
@@ -25,7 +29,10 @@ function installScript(fn: string): void {
   const script = document.createElement('script');
   script.textContent = source;
   document.documentElement.appendChild(script);
-  script.parentNode.removeChild(script);
+  const parentElement = script.parentElement;
+  if (parentElement) {
+    parentElement.removeChild(script);
+  }
 }
 
 if (document instanceof HTMLDocument) {