Strict mode

angular.json

@@ -8,6 +8,9 @@
       "schematics": {
         "@schematics/angular:component": {
           "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
         }
       },
       "root": "",

package.json

@@ -15,6 +15,7 @@
     "publish:ipfs": "yarn run build:ipfs && ipfs add --recursive --chunker=buzhash --cid-version=1 dist/angular"
   },
   "private": false,
+  "sideEffects": false,
   "dependencies": {
     "@angular/animations": "~10.0.2",
     "@angular/cdk": "~10.0.1",

src/app/enums/protocol.enum.ts

@@ -0,0 +1,4 @@
+export enum Protocol {
+  IPFS = 'ipfs',
+  IPNS = 'ipns',
+}

src/app/pages/pages.component.ts

@@ -2,6 +2,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatTable, MatTableDataSource } from '@angular/material/table';
 import { Subscription } from 'rxjs';
+import { Protocol } from '../enums/protocol.enum';
 import { GatewayService } from '../services/gateway.service';
 
 @Component({
@@ -11,65 +12,63 @@ import { GatewayService } from '../services/gateway.service';
 })
 export class PagesComponent implements OnInit {
 
-  gateways: string[];
-  ipfs: string;
-  ipns: string;
-  dataSource: MatTableDataSource<Result>;
-  displayedColumns = [
-    'error',
-    'gateway',
-  ];
-  subscriptions: Subscription[] = [];
+  @ViewChild(MatTable) matTable!: MatTable<Result>;
 
-  @ViewChild(MatTable) matTable: MatTable<Result>;
+  gateways!: string[];
+  ipfs = '';
+  ipns = '';
+
+  readonly dataSource = new MatTableDataSource<Result>([]);
+  readonly displayedColumns: ['error', 'gateway'] = ['error', 'gateway'];
+  readonly subscriptions: Subscription[] = [];
 
   constructor(
     private readonly gatewayService: GatewayService
   ) { }
 
   ngOnInit(): void {
-    this.dataSource = new MatTableDataSource([]);
     this.gatewayService.list().subscribe((gateways): void => { this.gateways = gateways; });
   }
 
   cacheIPFS(): void {
-    this.cache('ipfs', this.ipfs);
+    this.cache(Protocol.IPFS, this.ipfs);
   }
 
   cacheIPNS(): void {
-    this.cache('ipns', this.ipns);
+    this.cache(Protocol.IPNS, this.ipns);
   }
 
-  cache(type: string, hash: string): void {
+  cache(protocol: Protocol, hashpath: string): void {
 
+    // Clear subscriptions
     while (this.subscriptions.length) {
       const sub = this.subscriptions.pop();
-      if (!sub.closed) {
+      if (sub && !sub.closed) {
         sub.unsubscribe();
       }
     }
 
+    // Clear table
     this.dataSource.data = [];
     this.matTable.renderRows();
     console.clear();
 
     this.gateways.forEach((gateway): void => {
       this.subscriptions.push(
-        this.gatewayService.get(gateway, type, hash).subscribe((): void => {
-          this.dataSource.data.push({ gateway: this.gatewayService.url(gateway, type, hash), error: null });
+        this.gatewayService.get(gateway, protocol, hashpath).subscribe((): void => {
+          this.dataSource.data.push({ gateway: this.gatewayService.url(gateway, protocol, hashpath), error: null });
           this.matTable.renderRows();
         }, (error: HttpErrorResponse): void => {
-          this.dataSource.data.push({ gateway: this.gatewayService.url(gateway, type, hash), error });
+          this.dataSource.data.push({ gateway: this.gatewayService.url(gateway, protocol, hashpath), error });
           this.matTable.renderRows();
         })
       );
     });
-
   }
 
 }
 
 interface Result {
   gateway: string;
-  error: HttpErrorResponse;
+  error: HttpErrorResponse | null;
 }

src/app/services/gateway.service.ts

@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from '../../environments/environment';
+import { Protocol } from '../enums/protocol.enum';
 
 @Injectable({
   providedIn: 'root'
@@ -13,22 +14,27 @@ export class GatewayService {
   ) { }
 
   list(): Observable<string[]> {
-    return this.http.get<string[]>(
-      environment.base_href && environment.base_href !== '/'
-        ? `${environment.base_href}/assets/json/gateways.json`
-        : `${document.querySelector('base').href}/assets/json/gateways.json`
-    );
+    if (environment && environment.base_href !== '/') {
+      return this.http.get<string[]>(`${environment.base_href}/assets/json/gateways.json`);
+    }
+
+    const base = document.querySelector('base');
+    if (base) {
+      return this.http.get<string[]>(`${base.href}/assets/json/gateways.json`);
+    }
+
+    throw new Error('Couldn\'t find environment nor base.')
   }
 
-  get(gateway: string, type: string, hash: string): Observable<Blob> {
-    return this.http.get<Blob>(`${this.url(gateway, type, hash)}#x-ipfs-companion-no-redirect`, {
+  get(gateway: string, protocol: Protocol, hashpath: string): Observable<Blob> {
+    return this.http.get<Blob>(`${this.url(gateway, protocol, hashpath)}#x-ipfs-companion-no-redirect`, {
       responseType: 'blob' as 'json'
     });
   }
 
-  url(gateway: string, type: string, hashpath: string): string {
-    const splits = hashpath.split('/');
-    const url = gateway.replace(':type', type).replace(':hash', splits.shift());
+  url(gateway: string, protocol: Protocol, hashpath: string): string {
+    const splits: string[] = hashpath.split('/');
+    const url: string = gateway.replace(':type', protocol).replace(':hash', splits.shift() || '');
     return splits.length ? [url, splits.join('/')].join('/') : url;
   }
 

tsconfig.base.json

@@ -17,10 +17,14 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "strict": true
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictTemplates": true
   }
 }