refactor: enable stricter TypeScript compiler flags (#631)

align with the examples and the new CLI settings by enabling
- `noImplicitAny`
- `noImplicitReturns`
- `noImplicitThis`
- `noFallthroughCasesInSwitch`
- `strictNullChecks`

Relates to angular/angular-cli#14905

Author: Splaktar

src/app/pages/component-list/component-list.ts

@@ -16,17 +16,17 @@ import {combineLatest} from 'rxjs';
   styleUrls: ['./component-list.scss']
 })
 export class ComponentList {
-  category: DocCategory;
+  category: DocCategory | undefined;
   section: string;
 
   constructor(public docItems: DocumentationItems,
               private _componentPageTitle: ComponentPageTitle,
               private _route: ActivatedRoute,
               public router: Router) {
     combineLatest(_route.pathFromRoot.map(route => route.params), Object.assign)
-      .subscribe(p => {
-        this.category = docItems.getCategoryById(p['id']);
-        this.section = p['section'];
+      .subscribe((routeData: {[key: string]: string}) => {
+        this.category = docItems.getCategoryById(routeData['id']);
+        this.section = routeData['section'];
 
         if (this.category) {
           this._componentPageTitle.title = this.category.name;

src/app/pages/component-sidenav/component-sidenav.ts

@@ -60,7 +60,7 @@ export class ComponentSidenav implements OnInit {
 export class ComponentNav implements OnInit, OnDestroy {
 
   @Input() params: Observable<Params>;
-  expansions = {};
+  expansions: {[key: string]: boolean} = {};
   private _onDestroy = new Subject<void>();
 
   constructor(public docItems: DocumentationItems,
@@ -83,7 +83,7 @@ export class ComponentNav implements OnInit, OnDestroy {
   setExpansions(params: Params) {
     const categories = this.docItems.getCategories(params.section);
     for (const category of (categories || [])) {
-      if (this.expansions[category.id] === true) {
+      if (this.expansions[category.id]) {
         continue;
       }
 
@@ -95,7 +95,7 @@ export class ComponentNav implements OnInit, OnDestroy {
         }
       }
 
-      if (this.expansions[category.id] === false) {
+      if (!this.expansions[category.id]) {
         this.expansions[category.id] = match;
       }
     }

src/app/pages/component-viewer/component-viewer.spec.ts

@@ -41,7 +41,11 @@ describe('ComponentViewer', () => {
   it('should set page title correctly', () => {
     const component = fixture.componentInstance;
     fixture.detectChanges();
-    const expected = `${component.docItems.getItemById(docItemsId, 'material').name}`;
+    const docItem = component.docItems.getItemById(docItemsId, 'material');
+    if (docItem === undefined) {
+      throw Error(`Unable to find DocItem: '${docItemsId}' in section: 'material'.`);
+    }
+    const expected = `${docItem.name}`;
     expect(component._componentPageTitle.title).toEqual(expected);
   });
 });

src/app/pages/component-viewer/component-viewer.ts

@@ -35,17 +35,21 @@ export class ComponentViewer implements OnDestroy {
               public _componentPageTitle: ComponentPageTitle,
               public docItems: DocumentationItems,
               ) {
+    let params = [_route.params];
+    if (_route.parent) {
+      params.push(_route.parent.params);
+    }
     // Listen to changes on the current route for the doc id (e.g. button/checkbox) and the
     // parent route for the section (material/cdk).
-    combineLatest(_route.params, _route.parent.params).pipe(
+    combineLatest(params).pipe(
         map((p: [Params, Params]) => ({id: p[0]['id'], section: p[1]['section']})),
         map(p => ({doc: docItems.getItemById(p.id, p.section), section: p.section}),
         takeUntil(this._destroyed))
         ).subscribe(d => {
-          this.componentDocItem = d.doc;
-          if (this.componentDocItem) {
+          if (d.doc !== undefined) {
+            this.componentDocItem = d.doc;
             this._componentPageTitle.title = `${this.componentDocItem.name}`;
-            this.componentDocItem.examples.length ?
+            this.componentDocItem.examples && this.componentDocItem.examples.length ?
                 this.sections.add('examples') :
                 this.sections.delete('examples');
           } else {

src/app/pages/guide-viewer/guide-viewer.html

@@ -1,12 +1,12 @@
 <div class="docs-primary-header">
-  <h1>{{guide.name}}</h1>
+  <h1>{{guide?.name}}</h1>
 </div>
 
 <div class="docs-guide-wrapper">
   <div class="docs-guide-toc-and-content">
-    <doc-viewer class="docs-guide-content" 
+    <doc-viewer class="docs-guide-content"
       (contentRendered)="toc.updateScrollPosition()"
-      [documentUrl]="guide.document"></doc-viewer>
+      [documentUrl]="guide?.document"></doc-viewer>
     <table-of-contents #toc container="guide-viewer"></table-of-contents>
   </div>
 </div>

src/app/pages/guide-viewer/guide-viewer.spec.ts

@@ -7,10 +7,10 @@ import {DocsAppTestingModule} from '../../testing/testing-module';
 const guideItemsId = 'getting-started';
 
 const mockActivatedRoute = {
-  fragment: Observable.create(observer => {
+  fragment: new Observable(observer => {
     observer.complete();
   }),
-  params: Observable.create(observer => {
+  params: new Observable(observer => {
     observer.next({id: guideItemsId});
     observer.complete();
   })

src/app/pages/guide-viewer/guide-viewer.ts

@@ -12,14 +12,17 @@ import {ComponentPageTitle} from '../page-title/page-title';
   styleUrls: ['./guide-viewer.scss'],
 })
 export class GuideViewer implements OnInit {
-  guide: GuideItem;
+  guide: GuideItem | undefined;
 
   constructor(_route: ActivatedRoute,
               private _componentPageTitle: ComponentPageTitle,
               private router: Router,
               public guideItems: GuideItems) {
     _route.params.subscribe(p => {
-      this.guide = guideItems.getItemById(p['id']);
+      const guideItem = guideItems.getItemById(p['id']);
+      if (guideItem) {
+        this.guide = guideItem;
+      }
 
       if (!this.guide) {
         this.router.navigate(['/guides']);
@@ -28,7 +31,9 @@ export class GuideViewer implements OnInit {
   }
 
   ngOnInit(): void {
-    this._componentPageTitle.title = this.guide.name;
+    if (this.guide !== undefined) {
+      this._componentPageTitle.title = this.guide.name;
+    }
   }
 }
 

src/app/shared/copier/copier.service.ts

@@ -54,7 +54,7 @@ export class CopierService {
   private removeFake() {
     if (this.textarea) {
       document.body.removeChild(this.textarea);
-      this.textarea = null;
+      delete this.textarea;
     }
   }
 }

src/app/shared/doc-viewer/doc-viewer.spec.ts

@@ -106,7 +106,7 @@ class DocViewerTestComponent {
   documentUrl = 'http://material.angular.io/simple-doc.html';
 }
 
-const FAKE_DOCS = {
+const FAKE_DOCS: {[key: string]: string} = {
   'http://material.angular.io/simple-doc.html': '<div>my docs page</div>',
   'http://material.angular.io/doc-with-example.html': `
       <div>Check out this example:</div>

src/app/shared/doc-viewer/doc-viewer.ts

@@ -107,7 +107,9 @@ export class DocViewer implements OnDestroy {
           element, this._componentFactoryResolver, this._appRef, this._injector);
       let examplePortal = new ComponentPortal(componentClass, this._viewContainerRef);
       let exampleViewer = portalHost.attach(examplePortal);
-      (exampleViewer.instance as ExampleViewer).example = example;
+      if (example !== null) {
+        (exampleViewer.instance as ExampleViewer).example = example;
+      }
 
       this._portalHosts.push(portalHost);
     });

src/app/shared/documentation-items/documentation-items.ts

@@ -543,8 +543,9 @@ for (let category of DOCS[CDK]) {
 }
 
 const ALL_COMPONENTS = DOCS[COMPONENTS].reduce(
-  (result, category) => result.concat(category.items), []);
-const ALL_CDK = DOCS[CDK].reduce((result, cdk) => result.concat(cdk.items), []);
+  (result: DocItem[], category: DocCategory) => result.concat(category.items), []);
+const ALL_CDK = DOCS[CDK].reduce(
+  (result: DocItem[], cdk: DocCategory) => result.concat(cdk.items), []);
 const ALL_DOCS = ALL_COMPONENTS.concat(ALL_CDK);
 const ALL_CATEGORIES = DOCS[COMPONENTS].concat(DOCS[CDK]);
 
@@ -564,12 +565,12 @@ export class DocumentationItems {
     return [];
   }
 
-  getItemById(id: string, section: string): DocItem {
+  getItemById(id: string, section: string): DocItem | undefined {
     const sectionLookup = section == 'cdk' ? 'cdk' : 'material';
     return ALL_DOCS.find(doc => doc.id === id && doc.packageName == sectionLookup);
   }
 
-  getCategoryById(id: string): DocCategory {
+  getCategoryById(id: string): DocCategory | undefined {
     return ALL_CATEGORIES.find(c => c.id == id);
   }
 }

src/app/shared/example-viewer/example-viewer.spec.ts

@@ -175,7 +175,7 @@ describe('ExampleViewer', () => {
 class TestExampleModule { }
 
 
-const FAKE_DOCS = {
+const FAKE_DOCS: {[key: string]: string} = {
   '/docs-content/examples-highlighted/autocomplete-overview-example-html.html':
       '<div>my docs page</div>',
   '/docs-content/examples-highlighted/autocomplete-overview-example-ts.html':

src/app/shared/guide-items/guide-items.ts

@@ -61,7 +61,7 @@ export class GuideItems {
     return GUIDES;
   }
 
-  getItemById(id: string): GuideItem {
+  getItemById(id: string): GuideItem | undefined {
     return GUIDES.find(i => i.id === id);
   }
 }

src/app/shared/stackblitz/stackblitz-writer.spec.ts

@@ -64,45 +64,47 @@ describe('StackblitzWriter', () => {
   });
 
   it('should open a new window with stackblitz url', fakeAsync(() => {
-    let form;
-    stackblitzWriter.constructStackblitzForm(data).then(result => form = result);
-    flushMicrotasks();
-
-    for (const url of TEST_URLS) {
-      http.expectOne(url).flush(FAKE_DOCS[url] || '');
-    }
-    flushMicrotasks();
-
-    expect(form.elements.length).toBe(15);
-
-    // Should have correct tags
-    expect(form.elements[0].getAttribute('name')).toBe('tags[0]');
-    expect(form.elements[0].getAttribute('value')).toBe('angular');
-    expect(form.elements[1].getAttribute('name')).toBe('tags[1]');
-    expect(form.elements[1].getAttribute('value')).toBe('material');
-    expect(form.elements[2].getAttribute('name')).toBe('tags[2]');
-    expect(form.elements[2].getAttribute('value')).toBe('example');
-
-    // Should bet set as private and have description and dependencies.
-    expect(form.elements[3].getAttribute('name')).toBe('private');
-    expect(form.elements[3].getAttribute('value')).toBe('true');
-    expect(form.elements[4].getAttribute('name')).toBe('description');
-    expect(form.elements[5].getAttribute('name')).toBe('dependencies');
-
-    // Should have files needed for example.
-    expect(form.elements[6].getAttribute('name')).toBe('files[index.html]');
-    expect(form.elements[7].getAttribute('name')).toBe('files[styles.css]');
-    expect(form.elements[8].getAttribute('name')).toBe('files[polyfills.ts]');
-    expect(form.elements[9].getAttribute('name')).toBe('files[.angular-cli.json]');
-    expect(form.elements[10].getAttribute('name')).toBe('files[main.ts]');
-    expect(form.elements[11].getAttribute('name')).toBe('files[material-module.ts]');
-    expect(form.elements[12].getAttribute('name')).toBe('files[app/test.ts]');
-    expect(form.elements[13].getAttribute('name')).toBe('files[app/test.html]');
-    expect(form.elements[14].getAttribute('name')).toBe('files[app/src/detail.ts]');
+    let form: HTMLFormElement;
+    stackblitzWriter.constructStackblitzForm(data).then((result: HTMLFormElement) => {
+      form = result;
+      flushMicrotasks();
+
+      for (const url of TEST_URLS) {
+        http.expectOne(url).flush(FAKE_DOCS[url] || '');
+      }
+      flushMicrotasks();
+
+      expect(form.elements.length).toBe(15);
+
+      // Should have correct tags
+      expect(form.elements[0].getAttribute('name')).toBe('tags[0]');
+      expect(form.elements[0].getAttribute('value')).toBe('angular');
+      expect(form.elements[1].getAttribute('name')).toBe('tags[1]');
+      expect(form.elements[1].getAttribute('value')).toBe('material');
+      expect(form.elements[2].getAttribute('name')).toBe('tags[2]');
+      expect(form.elements[2].getAttribute('value')).toBe('example');
+
+      // Should bet set as private and have description and dependencies.
+      expect(form.elements[3].getAttribute('name')).toBe('private');
+      expect(form.elements[3].getAttribute('value')).toBe('true');
+      expect(form.elements[4].getAttribute('name')).toBe('description');
+      expect(form.elements[5].getAttribute('name')).toBe('dependencies');
+
+      // Should have files needed for example.
+      expect(form.elements[6].getAttribute('name')).toBe('files[index.html]');
+      expect(form.elements[7].getAttribute('name')).toBe('files[styles.css]');
+      expect(form.elements[8].getAttribute('name')).toBe('files[polyfills.ts]');
+      expect(form.elements[9].getAttribute('name')).toBe('files[.angular-cli.json]');
+      expect(form.elements[10].getAttribute('name')).toBe('files[main.ts]');
+      expect(form.elements[11].getAttribute('name')).toBe('files[material-module.ts]');
+      expect(form.elements[12].getAttribute('name')).toBe('files[app/test.ts]');
+      expect(form.elements[13].getAttribute('name')).toBe('files[app/test.html]');
+      expect(form.elements[14].getAttribute('name')).toBe('files[app/src/detail.ts]');
+    });
   }));
 });
 
-const FAKE_DOCS = {
+const FAKE_DOCS: {[key: string]: string} = {
   '/docs-content/examples-source/test.ts': 'ExampleComponent',
   '/docs-content/examples-source/test.html': `<example></example>`,
   '/docs-content/examples-source/src/detail.ts': 'DetailComponent',

src/app/shared/svg-viewer/svg-viewer.ts

@@ -1,7 +1,6 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, ElementRef, Input, NgModule, OnInit} from '@angular/core';
 
-
 @Component({
   selector: 'docs-svg-viewer',
   template: '<div class="docs-svg-viewer" aria-hidden="true"></div>',
@@ -16,7 +15,7 @@ export class SvgViewer implements OnInit {
     this.fetchAndInlineSvgContent(this.src);
   }
 
-  private inlineSvgContent(template) {
+  private inlineSvgContent(template: string) {
     this.elementRef.nativeElement.innerHTML = template;
 
     if (this.scaleToContainer) {

src/app/shared/table-of-contents/table-of-contents.spec.ts

@@ -6,7 +6,7 @@ import {TableOfContentsModule} from './table-of-contents.module';
 import {DocsAppTestingModule} from '../../testing/testing-module';
 
 const mockActivatedRoute = {
-  fragment: Observable.create(observer => {
+  fragment: new Observable(observer => {
     observer.complete();
   })
 };

src/app/shared/table-of-contents/table-of-contents.ts

@@ -1,4 +1,6 @@
-import {Component, ElementRef, Inject, Input, OnInit} from '@angular/core';
+import {
+  AfterViewInit, Component, ElementRef, Inject, Input, OnDestroy, OnInit
+} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {Subject, fromEvent} from 'rxjs';
@@ -27,7 +29,7 @@ interface Link {
   styleUrls: ['./table-of-contents.scss'],
   templateUrl: './table-of-contents.html'
 })
-export class TableOfContents implements OnInit {
+export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
 
   @Input() links: Link[] = [];
   @Input() container: string;
@@ -97,7 +99,7 @@ export class TableOfContents implements OnInit {
   }
 
   /** Gets the scroll offset of the scroll container */
-  private getScrollOffset(): number {
+  private getScrollOffset(): number | void {
     const {top} = this._element.nativeElement.getBoundingClientRect();
     if (typeof this._scrollContainer.scrollTop !== 'undefined') {
       return this._scrollContainer.scrollTop + top;
@@ -107,7 +109,7 @@ export class TableOfContents implements OnInit {
   }
 
   private createLinks(): Link[] {
-    const links = [];
+    const links: Array<Link> = [];
     const headers =
         Array.from(this._document.querySelectorAll(this.headerSelectors)) as HTMLElement[];
 

src/app/shared/theme-picker/theme-picker.ts

@@ -6,7 +6,7 @@ import {
   OnInit,
   OnDestroy,
 } from '@angular/core';
-import {StyleManager} from '../style-manager/style-manager';
+import {StyleManager} from '../style-manager';
 import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage';
 import {MatButtonModule} from '@angular/material/button';
 import {MatGridListModule} from '@angular/material/grid-list';
@@ -63,7 +63,10 @@ export class ThemePicker implements OnInit, OnDestroy {
     public styleManager: StyleManager,
     private _themeStorage: ThemeStorage,
     private _activatedRoute: ActivatedRoute) {
-    this.installTheme(this._themeStorage.getStoredThemeName());
+    const themeName = this._themeStorage.getStoredThemeName();
+    if (themeName) {
+      this.installTheme(themeName);
+    }
   }
 
   ngOnInit() {

src/tsconfig.json

@@ -8,6 +8,11 @@
     "module": "es6",
     "moduleResolution": "node",
     "outDir": "../dist/out-tsc",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noFallthroughCasesInSwitch": true,
+    "strictNullChecks": true,
     "sourceMap": true,
     "target": "es5",
     "types": ["q", "selenium-webdriver", "jasmine"]