From e86a1d3441b30776e28c0216f00610d6787de297 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 8 May 2021 16:02:03 +0200
Subject: [PATCH] docs: make all examples compatible with strict mode (#41999)

Turns on the `strict` compiler flag and resolves the compilation errors in the various AIO examples.

PR Close #41999
---
 .../e2e/src/app.e2e-spec.ts                   |  2 +-
 .../src/app/app.component.ts                  |  2 +-
 .../src/app/movie-list.component.ts           |  3 +-
 .../src/app/hero-list-auto.component.ts       |  2 +-
 .../app/hero-list-enter-leave.component.ts    |  2 +-
 .../src/app/hero-list-groups.component.ts     |  2 +-
 .../src/app/hero-list-page.component.ts       |  3 +-
 .../src/app/hero-detail.component.ts          |  2 +-
 .../src/app/hero-list.component.ts            |  4 +--
 .../src/app/app.component.ts                  |  2 +-
 .../src/app/highlight.directive.2.ts          |  2 +-
 .../src/app/highlight.directive.3.ts          |  4 +--
 .../src/app/highlight.directive.ts            |  6 ++--
 .../binding-syntax/e2e/src/app.e2e-spec.ts    |  2 +-
 .../binding-syntax/src/app/app.component.ts   |  2 +-
 .../src/app/app.component.html                |  2 +-
 .../src/app/app.component.ts                  | 16 +++++-----
 .../app/item-detail/item-detail.component.ts  |  2 +-
 .../src/app/item-switch.component.ts          | 10 +++---
 .../built-in-directives/src/app/item.ts       |  6 ++--
 .../src/observables.spec.ts                   |  8 ++---
 .../src/promises.spec.ts                      |  8 ++---
 .../comparing-observables/src/promises.ts     |  2 +-
 .../src/app/astronaut.component.ts            |  2 +-
 .../src/app/countdown-parent.component.ts     |  2 +-
 .../src/app/hero-child.component.ts           |  4 +--
 .../src/app/version-child.component.ts        |  4 +--
 .../src/app/voter.component.ts                |  2 +-
 .../src/app/hero-app-main.component.ts        |  2 +-
 .../src/app/hero-controls.component.ts        |  2 +-
 .../src/app/hero-details.component.ts         |  2 +-
 .../src/app/hero-team.component.ts            |  2 +-
 .../examples/component-styles/src/app/hero.ts |  2 +-
 .../src/app/app.component.ts                  |  2 +-
 .../e2e/src/app.e2e-spec.ts                   |  4 +--
 .../src/app/hero-bio.component.ts             |  2 +-
 .../src/app/hero-cache.service.ts             |  2 +-
 .../src/app/hero.service.ts                   |  2 +-
 .../src/app/highlight.directive.ts            |  4 +--
 .../src/app/minimal-logger.service.ts         |  4 +--
 .../src/app/parent-finder.component.ts        |  2 +-
 .../src/app/sorted-heroes.component.ts        |  2 +-
 .../src/app/user-context.service.ts           |  4 +--
 .../src/app/injector.component.ts             |  8 ++---
 .../src/app/providers.component.ts            |  4 +--
 .../docs-style-guide/src/app/app.component.ts |  2 +-
 .../src/app/ad-banner.component.ts            |  4 +--
 .../src/app/app.component.ts                  |  2 +-
 .../app/dynamic-form-question.component.ts    |  4 +--
 .../src/app/dynamic-form.component.ts         |  8 ++---
 .../dynamic-form/src/app/question-base.ts     |  2 +-
 .../elements/src/app/popup.component.ts       |  2 +-
 .../event-binding/src/app/app.component.html  |  2 +-
 .../event-binding/src/app/app.component.ts    |  4 +--
 .../app/item-detail/item-detail.component.ts  |  2 +-
 .../examples/event-binding/src/app/item.ts    |  2 +-
 .../hero-form-reactive.component.html         |  8 ++---
 .../reactive/hero-form-reactive.component.ts  |  8 ++---
 .../app/shared/forbidden-name.directive.ts    |  2 +-
 .../app/shared/identity-revealed.directive.ts |  2 +-
 .../hero-form-template.component.html         |  6 ++--
 .../getting-started/e2e/src/app.e2e-spec.ts   |  6 ++--
 .../getting-started/src/app/cart.service.ts   |  5 +--
 .../product-alerts.component.1.ts             |  3 +-
 .../product-alerts.component.ts               |  3 +-
 .../product-details.component.1.ts            |  4 +--
 .../product-details.component.ts              |  6 ++--
 .../getting-started/src/app/products.ts       |  9 +++++-
 .../src/app/hero-tax-return.service.ts        |  4 +--
 .../http/src/app/config/config.component.ts   |  8 ++---
 .../http/src/app/config/config.service.ts     |  2 +-
 .../app/downloader/downloader.component.ts    |  2 +-
 .../http/src/app/heroes/heroes.component.ts   |  4 +--
 .../http/src/app/heroes/heroes.service.ts     |  2 +-
 .../package-search.component.html             |  2 +-
 .../package-search.component.ts               |  6 ++--
 .../package-search/package-search.service.ts  |  8 +----
 .../src/app/uploader/uploader.component.ts    |  6 ++--
 .../http/src/app/uploader/uploader.service.ts |  2 +-
 aio/content/examples/http/src/main-specs.ts   |  4 +--
 .../examples/http/src/testing/jasmine.d.ts    |  1 +
 .../inputs-outputs/e2e/src/app.e2e-spec.ts    |  2 +-
 .../src/app/aliasing/aliasing.component.ts    |  4 +--
 .../inputs-outputs/src/app/app.component.ts   |  4 +--
 .../in-the-metadata.component.ts              |  2 +-
 .../input-output/input-output.component.ts    |  2 +-
 .../app/item-detail/item-detail.component.ts  |  2 +-
 .../interpolation/src/app/customer.ts         |  2 +-
 .../src/app/after-content.component.ts        |  2 +-
 .../src/app/after-view.component.ts           |  2 +-
 .../src/app/counter-parent.component.ts       |  2 +-
 .../src/app/counter.component.ts              |  2 +-
 .../src/app/do-check-parent.component.ts      |  6 ++--
 .../src/app/do-check.component.ts             |  4 +--
 .../src/app/on-changes-parent.component.ts    |  6 ++--
 .../src/app/on-changes.component.ts           |  4 +--
 .../src/app/peek-a-boo-parent.component.ts    |  2 +-
 .../src/app/peek-a-boo.component.ts           |  2 +-
 .../ngcontainer/src/app/app.component.ts      |  4 +--
 .../ngcontainer/src/app/hero.components.ts    |  8 ++---
 .../src/app/contact/contact.component.ts      | 10 +++---
 .../src/app/contact/contact.service.ts        |  2 +-
 .../customers/customers-detail.component.ts   |  4 +--
 .../src/app/customers/customers.service.ts    |  2 +-
 .../src/app/greeting/greeting.component.ts    |  2 +-
 .../src/app/items/items-detail.component.ts   |  7 ++---
 .../ngmodules/src/app/items/items.service.ts  |  2 +-
 .../observables-in-angular/src/main.ts        | 16 +++++-----
 .../examples/observables/src/creating.spec.ts | 18 +++++------
 .../examples/observables/src/creating.ts      | 14 ++++-----
 .../examples/observables/src/geolocation.ts   |  4 +--
 .../observables/src/multicasting.spec.ts      | 16 +++++-----
 .../examples/observables/src/multicasting.ts  | 21 +++++++------
 .../observables/src/subscribing.spec.ts       |  8 ++---
 .../examples/observables/src/subscribing.ts   |  6 ++--
 .../src/app/exponential-strength.pipe.ts      |  4 +--
 .../src/app/hero-async-message.component.ts   | 10 ++++--
 .../practical-observable-usage/src/backoff.ts |  2 +-
 .../src/typeahead.spec.ts                     | 12 +++----
 .../src/typeahead.ts                          |  9 +++---
 .../app/item-detail/item-detail.component.ts  |  2 +-
 .../src/app/item-list/item-list.component.ts  |  2 +-
 .../app/string-init/string-init.component.ts  |  2 +-
 .../providers/src/app/app.component.ts        |  2 +-
 .../providers/src/app/user.service.ts         |  2 +-
 .../reactive-forms/e2e/src/app.e2e-spec.ts    |  2 +-
 .../src/app/host/host.component.html          |  2 +-
 .../admin-dashboard.component.1.ts            |  4 +--
 .../admin-dashboard.component.ts              |  6 ++--
 .../router/src/app/auth/auth.service.ts       |  4 +--
 .../src/app/auth/login/login.component.1.ts   | 10 +++---
 .../src/app/auth/login/login.component.ts     | 10 +++---
 .../compose-message.component.ts              |  4 +--
 .../crisis-detail-resolver.service.ts         |  2 +-
 .../crisis-detail.component.1.ts              |  6 ++--
 .../crisis-detail/crisis-detail.component.ts  | 13 ++++----
 .../crisis-list/crisis-list.component.1.ts    |  6 ++--
 .../crisis-list/crisis-list.component.ts      |  6 ++--
 .../src/app/crisis-center/crisis.service.ts   |  2 +-
 .../router/src/app/crisis-center/crisis.ts    |  2 +-
 .../hero-detail/hero-detail.component.1.ts    |  4 +--
 .../hero-detail/hero-detail.component.2.ts    |  4 +--
 .../hero-detail/hero-detail.component.3.ts    |  4 +--
 .../hero-detail/hero-detail.component.ts      |  4 +--
 .../heroes/hero-list/hero-list.component.1.ts |  2 +-
 .../heroes/hero-list/hero-list.component.ts   |  7 ++---
 .../router/src/app/heroes/hero.service.ts     |  2 +-
 .../selective-preloading-strategy.service.ts  |  2 +-
 .../rx-library/src/error-handling.spec.ts     | 20 ++++++------
 .../examples/rx-library/src/error-handling.ts | 10 +++---
 .../rx-library/src/naming-convention.ts       |  4 +--
 .../rx-library/src/operators.1.spec.ts        |  8 ++---
 .../examples/rx-library/src/operators.1.ts    |  2 +-
 .../rx-library/src/operators.2.spec.ts        |  8 ++---
 .../examples/rx-library/src/operators.2.ts    |  2 +-
 .../examples/rx-library/src/operators.spec.ts |  8 ++---
 .../examples/rx-library/src/operators.ts      |  2 +-
 .../rx-library/src/retry-on-error.spec.ts     | 24 +++++++-------
 .../examples/rx-library/src/retry-on-error.ts | 10 +++---
 .../rx-library/src/simple-creation.1.spec.ts  |  6 ++--
 .../rx-library/src/simple-creation.1.ts       |  4 +--
 .../rx-library/src/simple-creation.2.spec.ts  | 12 +++----
 .../rx-library/src/simple-creation.2.ts       |  2 +-
 .../rx-library/src/simple-creation.3.spec.ts  | 30 +++++++++---------
 .../rx-library/src/simple-creation.3.ts       |  8 ++---
 .../rx-library/src/simple-creation.spec.ts    |  6 ++--
 .../rx-library/src/simple-creation.ts         |  4 ++-
 .../src/app/bypass-security.component.ts      |  4 +--
 .../src/app/prompt-update.service.ts          |  4 +--
 .../src/app/app.component.html                | 16 +++++-----
 .../src/app/app.component.ts                  |  2 +-
 .../src/app/hero-switch.components.ts         |  8 ++---
 .../filter-text/filter-text.component.ts      |  2 +-
 .../app/core/spinner/spinner.component.ts     |  2 +-
 .../src/04-11/app/heroes/heroes.component.ts  |  2 +-
 .../src/04-12/app/heroes/heroes.component.ts  |  2 +-
 .../app/heroes/heroes.component.avoid.ts      | 10 +++---
 .../src/05-04/app/heroes/heroes.component.ts  | 10 +++---
 .../hero-button/hero-button.component.ts      |  2 +-
 .../hero-button/hero-button.component.ts      |  2 +-
 .../heroes/shared/hero-highlight.directive.ts |  2 +-
 .../05-14/app/shared/toast/toast.component.ts |  4 +--
 .../heroes/hero-list/hero-list.component.ts   |  2 +-
 .../heroes/hero-list/hero-list.component.ts   |  2 +-
 .../05-17/app/heroes/hero/hero.component.ts   |  2 +-
 .../styleguide/src/07-01/app/app.component.ts |  2 +-
 .../src/app/app.component.ts                  |  2 +-
 .../e2e/src/app.e2e-spec.ts                   |  2 +-
 .../src/app/app.component.ts                  |  2 +-
 .../template-syntax/src/app/app.component.ts  | 18 +++++------
 .../src/app/hero-detail.component.ts          | 18 +++++------
 .../src/app/hero-form.component.ts            |  4 +--
 .../src/app/hero-switch.components.ts         |  8 ++---
 .../examples/template-syntax/src/app/hero.ts  |  8 ++---
 .../src/app/sizer.component.ts                |  2 +-
 .../examples/testing/e2e/src/app.e2e-spec.ts  |  2 +-
 .../src/app/app.component.router.spec.ts      |  1 -
 .../banner/banner-initial.component.spec.ts   |  4 +--
 .../dashboard-hero.component.spec.ts          |  8 ++---
 .../app/dashboard/dashboard-hero.component.ts |  2 +-
 .../testing/src/app/demo/async-helper.spec.ts |  4 +--
 .../testing/src/app/demo/demo.testbed.spec.ts |  4 +--
 .../examples/testing/src/app/demo/demo.ts     | 14 ++++-----
 .../src/app/hero/hero-detail.component.ts     |  4 +--
 .../src/app/hero/hero-detail.service.ts       |  2 +-
 .../src/app/hero/hero-list.component.ts       | 10 +++---
 .../app/model/testing/test-hero.service.ts    |  9 ++++--
 .../src/app/shared/canvas.component.ts        |  6 ++--
 .../src/app/shared/highlight.directive.ts     |  2 +-
 .../examples/testing/src/app/twain/quote.ts   |  2 +-
 .../testing/src/app/twain/twain.component.ts  |  4 +--
 .../src/app/welcome/welcome.component.spec.ts |  2 +-
 .../src/app/welcome/welcome.component.ts      |  2 +-
 .../examples/testing/src/main-specs.ts        |  4 +--
 .../examples/testing/src/testing/jasmine.d.ts |  1 +
 .../examples/toh-pt1/e2e/src/app.e2e-spec.ts  | 11 +++----
 .../examples/toh-pt2/e2e/src/app.e2e-spec.ts  | 19 ++++++------
 .../examples/toh-pt3/e2e/src/app.e2e-spec.ts  | 19 ++++++------
 .../src/app/heroes/heroes.component.ts        |  2 +-
 .../examples/toh-pt4/e2e/src/app.e2e-spec.ts  | 31 ++++++++-----------
 .../app/hero-detail/hero-detail.component.ts  |  2 +-
 .../examples/toh-pt5/e2e/src/app.e2e-spec.ts  | 13 ++++----
 .../app/hero-detail/hero-detail.component.ts  |  2 +-
 .../examples/toh-pt5/src/app/hero.service.ts  |  2 +-
 .../src/app/heroes/heroes.component.ts        |  2 +-
 .../examples/toh-pt6/e2e/src/app.e2e-spec.ts  | 15 +++++----
 .../app/dashboard/dashboard.component.spec.ts |  2 +-
 .../app/hero-detail/hero-detail.component.ts  | 10 +++---
 .../app/hero-search/hero-search.component.ts  |  2 +-
 .../src/app/heroes/heroes.component.ts        |  2 +-
 aio/content/examples/tslint.json              |  2 +-
 .../src/app/sizer/sizer.component.ts          |  2 +-
 .../universal/e2e/src/app.e2e-spec.ts         | 15 +++++----
 .../app/hero-detail/hero-detail.component.ts  |  4 +--
 .../app/hero-search/hero-search.component.ts  |  2 +-
 .../src/app/heroes/heroes.component.ts        |  2 +-
 .../src/app/angularjs-app/index.ts            |  3 +-
 .../src/app/lazy-loader.service.ts            |  2 +-
 .../hero-detail.component.ts                  |  2 +-
 .../hero-detail.component.ts                  |  2 +-
 .../app/downgrade-io/hero-detail.component.ts |  2 +-
 .../what-is-angular/e2e/src/app.e2e-spec.ts   |  4 +--
 .../shared/boilerplate/cli/tsconfig.json      |  3 +-
 .../shared/boilerplate/cli/tslint.json        |  2 +-
 244 files changed, 615 insertions(+), 621 deletions(-)
 create mode 100644 aio/content/examples/http/src/testing/jasmine.d.ts
 create mode 100644 aio/content/examples/testing/src/testing/jasmine.d.ts

diff --git a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts
index 7a8e7e6218..7f25fa2556 100644
--- a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts
@@ -89,7 +89,7 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
     return element.all(by.css('app-movie-list tbody > tr'));
   }
 
-  async function testFavoriteHero(heroName: string, expectedLabel: string) {
+  async function testFavoriteHero(heroName: string | null, expectedLabel: string) {
     const movieListComp = element(by.tagName('app-movie-list'));
     const heroInput = movieListComp.element(by.tagName('input'));
     const favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.component.ts b/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
index de4b412cad..8a8fe49e8f 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
@@ -16,7 +16,7 @@ export class AppComponent {
   eventType = '<not clicked yet>';
   isActive = true;
   isImportant = true;
-  movie: IMovie = null;
+  movie: IMovie;
   movies: IMovie[] = [];
   showImage = true;
   title = 'AngularJS to Angular Quick Ref Cookbook';
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
index 88be3a54fb..e50b1d4cda 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
@@ -1,4 +1,3 @@
-/* tslint:disable:no-unused-variable */
 // #docplaster
 import { Component } from '@angular/core';
 import { IMovie } from './movie';
@@ -16,7 +15,7 @@ import { MovieService } from './movie.service';
 // #docregion class
 export class MovieListComponent {
 // #enddocregion class
-  favoriteHero: string;
+  favoriteHero: string | undefined;
   showImage = false;
   movies: IMovie[];
 
diff --git a/aio/content/examples/animations/src/app/hero-list-auto.component.ts b/aio/content/examples/animations/src/app/hero-list-auto.component.ts
index a4489bafd0..e77814b8f7 100644
--- a/aio/content/examples/animations/src/app/hero-list-auto.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-auto.component.ts
@@ -31,7 +31,7 @@ import { Hero } from './hero';
   // #enddocregion auto-calc
 })
 export class HeroListAutoComponent {
-   @Input() heroes: Hero[];
+   @Input() heroes: Hero[] = [];
 
    @Output() remove = new EventEmitter<number>();
 
diff --git a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
index 8fa7c43ca9..769bb6db30 100644
--- a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
@@ -44,7 +44,7 @@ import { Hero } from './hero';
   // #enddocregion animationdef
 })
 export class HeroListEnterLeaveComponent {
-  @Input() heroes: Hero[];
+  @Input() heroes: Hero[] = [];
 
   @Output() remove = new EventEmitter<number>();
 
diff --git a/aio/content/examples/animations/src/app/hero-list-groups.component.ts b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
index 2893b91e81..bd5c56f725 100644
--- a/aio/content/examples/animations/src/app/hero-list-groups.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
@@ -64,7 +64,7 @@ import { Hero } from './hero';
   // #enddocregion animationdef
 })
 export class HeroListGroupsComponent {
-   @Input() heroes: Hero[];
+   @Input() heroes: Hero[] = [];
 
    @Output() remove = new EventEmitter<number>();
 
diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.ts b/aio/content/examples/animations/src/app/hero-list-page.component.ts
index 0963f5d8e2..dae6f31cf7 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.ts
@@ -4,6 +4,7 @@
 import { Component, HostBinding, OnInit } from '@angular/core';
 import { trigger, transition, animate, style, query, stagger } from '@angular/animations';
 import { HEROES } from './mock-heroes';
+import { Hero } from './hero';
 
 // #docregion filter-animations
 @Component({
@@ -58,7 +59,7 @@ export class HeroListPageComponent implements OnInit {
   heroTotal = -1;
 // #enddocregion filter-animations
   get heroes() { return this._heroes; }
-  private _heroes = [];
+  private _heroes: Hero[] = [];
 
   ngOnInit() {
     this._heroes = HEROES;
diff --git a/aio/content/examples/architecture/src/app/hero-detail.component.ts b/aio/content/examples/architecture/src/app/hero-detail.component.ts
index 349c118bf1..2a5484a08e 100644
--- a/aio/content/examples/architecture/src/app/hero-detail.component.ts
+++ b/aio/content/examples/architecture/src/app/hero-detail.component.ts
@@ -7,5 +7,5 @@ import { Hero } from './hero';
   templateUrl: './hero-detail.component.html'
 })
 export class HeroDetailComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.ts b/aio/content/examples/architecture/src/app/hero-list.component.ts
index ba764d8371..6f779a483b 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.ts
+++ b/aio/content/examples/architecture/src/app/hero-list.component.ts
@@ -13,8 +13,8 @@ import { HeroService } from './hero.service';
 // #docregion class
 export class HeroListComponent implements OnInit {
   // #enddocregion metadata
-  heroes: Hero[];
-  selectedHero: Hero;
+  heroes: Hero[] = [];
+  selectedHero: Hero | undefined;
 
   // #docregion ctor
   constructor(private service: HeroService) { }
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.ts b/aio/content/examples/attribute-directives/src/app/app.component.ts
index 01d0dd5b5f..27aa5ef03b 100644
--- a/aio/content/examples/attribute-directives/src/app/app.component.ts
+++ b/aio/content/examples/attribute-directives/src/app/app.component.ts
@@ -7,5 +7,5 @@ import { Component } from '@angular/core';
 })
 // #docregion class
 export class AppComponent {
-  color: string;
+  color = '';
 }
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
index fac7b79e4b..eba8b53ab4 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
@@ -19,7 +19,7 @@ export class HighlightDirective {
   }
 
   @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
+    this.highlight('');
   }
 
   private highlight(color: string) {
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
index 0d61602c08..00380664fe 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
@@ -11,7 +11,7 @@ export class HighlightDirective {
   constructor(private el: ElementRef) { }
 
   // #docregion input
-  @Input() appHighlight: string;
+  @Input() appHighlight = '';
   // #enddocregion input
 
   @HostListener('mouseenter') onMouseEnter() {
@@ -19,7 +19,7 @@ export class HighlightDirective {
   }
 
   @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
+    this.highlight('');
   }
 
   private highlight(color: string) {
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
index fbee354143..76bbfd1771 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
@@ -9,10 +9,10 @@ export class HighlightDirective {
   constructor(private el: ElementRef) { }
 
   // #docregion defaultColor
-  @Input() defaultColor: string;
+  @Input() defaultColor = '';
   // #enddocregion defaultColor
 
-  @Input('appHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor = '';
 
   // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {
@@ -21,7 +21,7 @@ export class HighlightDirective {
   // #enddocregion mouse-enter
 
   @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
+    this.highlight('');
   }
 
   private highlight(color: string) {
diff --git a/aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts b/aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts
index ca8c6bc1f5..fb85e02ce8 100644
--- a/aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts
@@ -7,7 +7,7 @@ describe('Binding syntax e2e tests', () => {
 
 
   // helper function used to test what's logged to the console
-  async function logChecker(contents) {
+  async function logChecker(contents: string) {
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
     const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
     expect(messages.length).toBeGreaterThan(0);
diff --git a/aio/content/examples/binding-syntax/src/app/app.component.ts b/aio/content/examples/binding-syntax/src/app/app.component.ts
index 0b804d8e84..86be2ab96e 100644
--- a/aio/content/examples/binding-syntax/src/app/app.component.ts
+++ b/aio/content/examples/binding-syntax/src/app/app.component.ts
@@ -8,7 +8,7 @@ import { Component, ViewChild, ElementRef } from '@angular/core';
 })
 export class AppComponent {
 
-  @ViewChild('bindingInput') bindingInput: ElementRef;
+  @ViewChild('bindingInput') bindingInput!: ElementRef;
 
   isUnchanged = true;
 
diff --git a/aio/content/examples/built-in-directives/src/app/app.component.html b/aio/content/examples/built-in-directives/src/app/app.component.html
index 646dd405b3..102827b629 100644
--- a/aio/content/examples/built-in-directives/src/app/app.component.html
+++ b/aio/content/examples/built-in-directives/src/app/app.component.html
@@ -8,7 +8,7 @@
   <p>Current item name: {{currentItem.name}}</p>
   <p>
     <label for="without">without NgModel:</label>
-    <input [value]="currentItem.name" (input)="currentItem.name=getValue($event.target)" id="without">
+    <input [value]="currentItem.name" (input)="currentItem.name=getValue($event)" id="without">
   </p>
 
   <p>
diff --git a/aio/content/examples/built-in-directives/src/app/app.component.ts b/aio/content/examples/built-in-directives/src/app/app.component.ts
index e120c5c625..3a37870982 100644
--- a/aio/content/examples/built-in-directives/src/app/app.component.ts
+++ b/aio/content/examples/built-in-directives/src/app/app.component.ts
@@ -13,16 +13,16 @@ export class AppComponent implements OnInit {
   isUnchanged = true;
 
   isActive = true;
-  nullCustomer = null;
+  nullCustomer: string | null = null;
   currentCustomer = {
     name: 'Laura'
   };
 
-  item: Item; // defined to demonstrate template context precedence
-  items: Item[];
+  item!: Item; // defined to demonstrate template context precedence
+  items: Item[] = [];
 
   // #docregion item
-  currentItem: Item;
+  currentItem!: Item;
   // #enddocregion item
 
 
@@ -34,11 +34,11 @@ export class AppComponent implements OnInit {
   itemIdIncrement = 1;
 
   // #docregion setClasses
-  currentClasses: {};
+  currentClasses: Record<string, boolean> = {};
   // #enddocregion setClasses
 
   // #docregion setStyles
-  currentStyles: {};
+  currentStyles: Record<string, string> = {};
   // #enddocregion setStyles
 
   ngOnInit() {
@@ -114,8 +114,8 @@ export class AppComponent implements OnInit {
 
   trackById(index: number, item: any): number { return item.id; }
 
-  getValue(target: EventTarget): string {
-    return (target as HTMLInputElement).value;
+  getValue(event: Event): string {
+    return (event.target as HTMLInputElement).value;
   }
 }
 
diff --git a/aio/content/examples/built-in-directives/src/app/item-detail/item-detail.component.ts b/aio/content/examples/built-in-directives/src/app/item-detail/item-detail.component.ts
index a2f4379aa6..8751034f2e 100644
--- a/aio/content/examples/built-in-directives/src/app/item-detail/item-detail.component.ts
+++ b/aio/content/examples/built-in-directives/src/app/item-detail/item-detail.component.ts
@@ -10,7 +10,7 @@ import { Item } from '../item';
 export class ItemDetailComponent {
 
 
-  @Input() item: Item;
+  @Input() item!: Item;
 
   constructor() { }
 
diff --git a/aio/content/examples/built-in-directives/src/app/item-switch.component.ts b/aio/content/examples/built-in-directives/src/app/item-switch.component.ts
index 59909eedc7..c9db968aa1 100644
--- a/aio/content/examples/built-in-directives/src/app/item-switch.component.ts
+++ b/aio/content/examples/built-in-directives/src/app/item-switch.component.ts
@@ -8,7 +8,7 @@ import { Item } from './item';
 
 // #docregion input
 export class StoutItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
 }
 // #enddocregion input
 
@@ -18,7 +18,7 @@ export class StoutItemComponent {
   template: `This is the brightest {{item.name}} in town.`
 })
 export class BestItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
 }
 
 @Component({
@@ -26,7 +26,7 @@ export class BestItemComponent {
   template: `Which is the slimmest {{item.name}}?`
 })
 export class DeviceItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
 }
 
 @Component({
@@ -34,7 +34,7 @@ export class DeviceItemComponent {
   template: `Has anyone seen my {{item.name}}?`
 })
 export class LostItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
 }
 
 @Component({
@@ -42,7 +42,7 @@ export class LostItemComponent {
   template: `{{message}}`
 })
 export class UnknownItemComponent {
-  @Input() item: Item;
+  @Input() item!: Item;
   get message() {
     return this.item && this.item.name ?
       `${this.item.name} is strange and mysterious.` :
diff --git a/aio/content/examples/built-in-directives/src/app/item.ts b/aio/content/examples/built-in-directives/src/app/item.ts
index c5bffa1a20..2913de9b52 100644
--- a/aio/content/examples/built-in-directives/src/app/item.ts
+++ b/aio/content/examples/built-in-directives/src/app/item.ts
@@ -3,7 +3,7 @@ export class Item {
 
   static items: Item[] = [
     new Item(
-      null,
+      0,
       'Teapot',
       'stout'
     ),
@@ -15,7 +15,7 @@ export class Item {
 
 
   constructor(
-    public id?: number,
+    public id: number,
     public name?: string,
     public feature?: string,
     public url?: string,
@@ -25,6 +25,6 @@ export class Item {
   }
 
   clone(): Item {
-    return Object.assign(new Item(), this);
+    return Object.assign(new Item(this.id), this);
   }
 }
diff --git a/aio/content/examples/comparing-observables/src/observables.spec.ts b/aio/content/examples/comparing-observables/src/observables.spec.ts
index e27ee9ced1..2978e02c3b 100644
--- a/aio/content/examples/comparing-observables/src/observables.spec.ts
+++ b/aio/content/examples/comparing-observables/src/observables.spec.ts
@@ -2,11 +2,11 @@ import { docRegionChain, docRegionObservable, docRegionUnsubscribe } from './obs
 
 describe('observables', () => {
   it('should print 2', (doneFn: DoneFn) => {
-    const consoleLogSpy = spyOn(console, 'log');
-    const observable = docRegionObservable(console);
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    const observable = docRegionObservable(consoleSpy);
     observable.subscribe(() => {
-      expect(consoleLogSpy).toHaveBeenCalledTimes(1);
-      expect(consoleLogSpy).toHaveBeenCalledWith(2);
+      expect(consoleSpy.log).toHaveBeenCalledTimes(1);
+      expect(consoleSpy.log).toHaveBeenCalledWith(2);
       doneFn();
     });
   });
diff --git a/aio/content/examples/comparing-observables/src/promises.spec.ts b/aio/content/examples/comparing-observables/src/promises.spec.ts
index 9d10092f1d..db65024be2 100644
--- a/aio/content/examples/comparing-observables/src/promises.spec.ts
+++ b/aio/content/examples/comparing-observables/src/promises.spec.ts
@@ -2,11 +2,11 @@ import { docRegionError, docRegionPromise } from './promises';
 
 describe('promises', () => {
   it('should print 2', (doneFn: DoneFn) => {
-    const consoleLogSpy = spyOn(console, 'log');
-    const pr = docRegionPromise(console, 2);
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    const pr = docRegionPromise(consoleSpy, 2);
     pr.then((value) => {
-      expect(consoleLogSpy).toHaveBeenCalledTimes(1);
-      expect(consoleLogSpy).toHaveBeenCalledWith(2);
+      expect(consoleSpy.log).toHaveBeenCalledTimes(1);
+      expect(consoleSpy.log).toHaveBeenCalledWith(2);
       expect(value).toBe(4);
       doneFn();
     });
diff --git a/aio/content/examples/comparing-observables/src/promises.ts b/aio/content/examples/comparing-observables/src/promises.ts
index d24bba12ae..160b0aa887 100644
--- a/aio/content/examples/comparing-observables/src/promises.ts
+++ b/aio/content/examples/comparing-observables/src/promises.ts
@@ -3,7 +3,7 @@
 export function docRegionPromise(console: Console, inputValue: number) {
   // #docregion promise
   // initiate execution
-  let promise = new Promise<number>((resolve, reject) => {
+  let promise = new Promise<number>(resolve => {
     // Executer fn...
     // #enddocregion promise
     // The below is used in the unit tests.
diff --git a/aio/content/examples/component-interaction/src/app/astronaut.component.ts b/aio/content/examples/component-interaction/src/app/astronaut.component.ts
index c87edd7b10..197a973c7e 100644
--- a/aio/content/examples/component-interaction/src/app/astronaut.component.ts
+++ b/aio/content/examples/component-interaction/src/app/astronaut.component.ts
@@ -18,7 +18,7 @@ import { Subscription } from 'rxjs';
   `
 })
 export class AstronautComponent implements OnDestroy {
-  @Input() astronaut: string;
+  @Input() astronaut = '';
   mission = '<no mission announced>';
   confirmed = false;
   announced = false;
diff --git a/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
index 5c2399d721..3f0d07787a 100644
--- a/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
+++ b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
@@ -40,7 +40,7 @@ export class CountdownLocalVarParentComponent { }
 export class CountdownViewChildParentComponent implements AfterViewInit {
 
   @ViewChild(CountdownTimerComponent)
-  private timerComponent: CountdownTimerComponent;
+  private timerComponent!: CountdownTimerComponent;
 
   seconds() { return 0; }
 
diff --git a/aio/content/examples/component-interaction/src/app/hero-child.component.ts b/aio/content/examples/component-interaction/src/app/hero-child.component.ts
index d36ffdeeb1..cd96a83c8b 100644
--- a/aio/content/examples/component-interaction/src/app/hero-child.component.ts
+++ b/aio/content/examples/component-interaction/src/app/hero-child.component.ts
@@ -11,7 +11,7 @@ import { Hero } from './hero';
   `
 })
 export class HeroChildComponent {
-  @Input() hero: Hero;
-  @Input('master') masterName: string; // tslint:disable-line: no-input-rename
+  @Input() hero!: Hero;
+  @Input('master') masterName = ''; // tslint:disable-line: no-input-rename
 }
 // #enddocregion
diff --git a/aio/content/examples/component-interaction/src/app/version-child.component.ts b/aio/content/examples/component-interaction/src/app/version-child.component.ts
index 93ef079d5d..64c5992e8e 100644
--- a/aio/content/examples/component-interaction/src/app/version-child.component.ts
+++ b/aio/content/examples/component-interaction/src/app/version-child.component.ts
@@ -13,8 +13,8 @@ import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
   `
 })
 export class VersionChildComponent implements OnChanges {
-  @Input() major: number;
-  @Input() minor: number;
+  @Input() major = 0;
+  @Input() minor = 0;
   changeLog: string[] = [];
 
   ngOnChanges(changes: SimpleChanges) {
diff --git a/aio/content/examples/component-interaction/src/app/voter.component.ts b/aio/content/examples/component-interaction/src/app/voter.component.ts
index 845e6fba0e..26436988a1 100644
--- a/aio/content/examples/component-interaction/src/app/voter.component.ts
+++ b/aio/content/examples/component-interaction/src/app/voter.component.ts
@@ -10,7 +10,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   `
 })
 export class VoterComponent {
-  @Input()  name: string;
+  @Input()  name = '';
   @Output() voted = new EventEmitter<boolean>();
   didVote = false;
 
diff --git a/aio/content/examples/component-styles/src/app/hero-app-main.component.ts b/aio/content/examples/component-styles/src/app/hero-app-main.component.ts
index efecea0b42..c5476cdc2f 100644
--- a/aio/content/examples/component-styles/src/app/hero-app-main.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-app-main.component.ts
@@ -12,5 +12,5 @@ import { Hero } from './hero';
   `
 })
 export class HeroAppMainComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
diff --git a/aio/content/examples/component-styles/src/app/hero-controls.component.ts b/aio/content/examples/component-styles/src/app/hero-controls.component.ts
index 2b6ad84aa0..b3fa1efaa8 100644
--- a/aio/content/examples/component-styles/src/app/hero-controls.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-controls.component.ts
@@ -17,7 +17,7 @@ import { Hero } from './hero';
 })
 // #enddocregion inlinestyles
 export class HeroControlsComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 
   activate() {
     this.hero.active = true;
diff --git a/aio/content/examples/component-styles/src/app/hero-details.component.ts b/aio/content/examples/component-styles/src/app/hero-details.component.ts
index 3d4dbd0712..dd530bca87 100644
--- a/aio/content/examples/component-styles/src/app/hero-details.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-details.component.ts
@@ -11,5 +11,5 @@ import { Hero } from './hero';
   styleUrls: ['./hero-details.component.css']
 })
 export class HeroDetailsComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
diff --git a/aio/content/examples/component-styles/src/app/hero-team.component.ts b/aio/content/examples/component-styles/src/app/hero-team.component.ts
index 62b4ff5abc..412d08483e 100644
--- a/aio/content/examples/component-styles/src/app/hero-team.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-team.component.ts
@@ -16,5 +16,5 @@ import { Hero } from './hero';
 })
 // #enddocregion stylelink
 export class HeroTeamComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
diff --git a/aio/content/examples/component-styles/src/app/hero.ts b/aio/content/examples/component-styles/src/app/hero.ts
index 7f8969e682..bed3ccaed2 100644
--- a/aio/content/examples/component-styles/src/app/hero.ts
+++ b/aio/content/examples/component-styles/src/app/hero.ts
@@ -1,5 +1,5 @@
 export class Hero {
-  active: boolean;
+  active = false;
 
   constructor(public name: string,
               public team: string[]) {
diff --git a/aio/content/examples/content-projection/src/app/app.component.ts b/aio/content/examples/content-projection/src/app/app.component.ts
index e6fb53d482..926beb1123 100644
--- a/aio/content/examples/content-projection/src/app/app.component.ts
+++ b/aio/content/examples/content-projection/src/app/app.component.ts
@@ -37,6 +37,6 @@ export class ZippyComponent {
   contentId = `zippy-${nextId++}`;
   @Input() expanded = false;
   // #docregion contentchild
-  @ContentChild(ZippyContentDirective) content: ZippyContentDirective;
+  @ContentChild(ZippyContentDirective) content!: ZippyContentDirective;
   // #enddocregion contentchild
 }
diff --git a/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts b/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts
index f13d6ad042..e68ca2aa5e 100644
--- a/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts
@@ -1,4 +1,4 @@
-import { browser, element, by } from 'protractor';
+import { browser, element, by, ElementFinder } from 'protractor';
 
 describe('Dependency Injection Cookbook', () => {
 
@@ -19,7 +19,7 @@ describe('Dependency Injection Cookbook', () => {
       expect(await sortedHeroes.isPresent()).toBe(true);
 
       const sortedHeroElems = element.all(by.css('app-sorted-heroes div'));
-      const sortedHeroNames = await sortedHeroElems.map(elem => elem.getText());
+      const sortedHeroNames = await sortedHeroElems.map(elem => elem?.getText());
       expect(sortedHeroNames).toEqual(['Dr Nice', 'Magma', 'RubberMan']);
     });
 
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
index 1a73a70dfc..a3c666d138 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
@@ -16,7 +16,7 @@ import { HeroCacheService } from './hero-cache.service';
 })
 
 export class HeroBioComponent implements OnInit  {
-  @Input() heroId: number;
+  @Input() heroId = 0;
 
   constructor(private heroCache: HeroCacheService) { }
 
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts
index 9e1a24fc88..c62157bb00 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-cache.service.ts
@@ -7,7 +7,7 @@ import { HeroService } from './hero.service';
 // #docregion service
 @Injectable()
 export class HeroCacheService {
-  hero: Hero;
+  hero!: Hero;
   constructor(private heroService: HeroService) {}
 
   fetchCachedHero(id: number) {
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts
index 2137613971..9630f82360 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero.service.ts
@@ -15,7 +15,7 @@ export class HeroService {
  ];
 
   getHeroById(id: number): Hero {
-    return this.heroes.find(hero => hero.id === id);
+    return this.heroes.find(hero => hero.id === id)!;
   }
 
   getAllHeroes(): Array<Hero> {
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts b/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
index 94b4e0b7fe..3e22648dd2 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
@@ -7,7 +7,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 })
 export class HighlightDirective {
 
-  @Input('appHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor = '';
 
   private el: HTMLElement;
 
@@ -20,7 +20,7 @@ export class HighlightDirective {
   }
 
   @HostListener('mouseleave') onMouseLeave() {
-    this.highlight(null);
+    this.highlight('');
   }
 
   private highlight(color: string) {
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts
index 001dfda86e..1b92d9b5a1 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/minimal-logger.service.ts
@@ -2,8 +2,8 @@
 // Class used as a "narrowing" interface that exposes a minimal logger
 // Other members of the actual implementation are invisible
 export abstract class MinimalLogger {
-  logs: string[];
-  logInfo: (msg: string) => void;
+  abstract logs: string[];
+  abstract logInfo: (msg: string) => void;
 }
 // #enddocregion
 
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
index 4596b3b497..aa96201411 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
@@ -8,7 +8,7 @@ export abstract class Base { name = 'Count Basie'; }
 
 // Marker class, used as an interface
 // #docregion parent
-export abstract class Parent { name: string; }
+export abstract class Parent { abstract name: string; }
 // #enddocregion parent
 
 const DifferentParent = Parent;
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
index 68a05a8776..9920d14797 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
@@ -15,7 +15,7 @@ import { HeroService } from './hero.service';
 export class HeroesBaseComponent implements OnInit {
   constructor(private heroService: HeroService) { }
 
-  heroes: Array<Hero>;
+  heroes: Hero[] = [];
 
   ngOnInit() {
     this.heroes = this.heroService.getAllHeroes();
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts b/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
index 1a08a28b05..dd725a5581 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
@@ -7,8 +7,8 @@ import { UserService } from './user.service';
   providedIn: 'root'
 })
 export class UserContextService {
-  name: string;
-  role: string;
+  name = '';
+  role = '';
   loggedInSince: Date;
 
   constructor(private userService: UserService, private loggerService: LoggerService) {
diff --git a/aio/content/examples/dependency-injection/src/app/injector.component.ts b/aio/content/examples/dependency-injection/src/app/injector.component.ts
index cf2b50b38c..9cb95271f8 100644
--- a/aio/content/examples/dependency-injection/src/app/injector.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/injector.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import { Component, Injector, OnInit } from '@angular/core';
+import { Component, Injector } from '@angular/core';
 
 import { Car, Engine, Tires } from './car/car';
 import { Hero } from './heroes/hero';
@@ -18,7 +18,7 @@ import { Logger } from './logger.service';
   `,
   providers: [Car, Engine, Tires, heroServiceProvider, Logger]
 })
-export class InjectorComponent implements OnInit {
+export class InjectorComponent {
   car: Car;
 
   // #docregion get-hero-service
@@ -26,9 +26,7 @@ export class InjectorComponent implements OnInit {
   // #enddocregion get-hero-service
   hero: Hero;
 
-  constructor(private injector: Injector) { }
-
-  ngOnInit() {
+  constructor(private injector: Injector) {
     this.car = this.injector.get(Car);
     this.heroService = this.injector.get(HeroService);
     this.hero = this.heroService.getHeroes()[0];
diff --git a/aio/content/examples/dependency-injection/src/app/providers.component.ts b/aio/content/examples/dependency-injection/src/app/providers.component.ts
index ee5ade88e0..69b18aeef8 100644
--- a/aio/content/examples/dependency-injection/src/app/providers.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/providers.component.ts
@@ -210,7 +210,7 @@ export class Provider8Component {
   // #enddocregion providers-9
 })
 export class Provider9Component implements OnInit {
-  log: string;
+  log = '';
   /*
    // #docregion provider-9-ctor-interface
    // Can't inject using the interface as the parameter type
@@ -237,7 +237,7 @@ const someMessage = 'Hello from the injected logger';
   providers: [{ provide: Logger, useValue: null }]
 })
 export class Provider10Component implements OnInit {
-  log: string;
+  log = '';
   constructor(@Optional() private logger?: Logger) {
     if (this.logger) {
       this.logger.log(someMessage);
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.ts b/aio/content/examples/docs-style-guide/src/app/app.component.ts
index bc2667c804..731aa52fb7 100644
--- a/aio/content/examples/docs-style-guide/src/app/app.component.ts
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.ts
@@ -13,7 +13,7 @@ export class AppComponent {
 // #enddocregion class-skeleton
   title = 'Authors Style Guide Sample';
   heroes = HEROES;
-  selectedHero: Hero;
+  selectedHero!: Hero;
 
   onSelect(hero: Hero): void {
     this.selectedHero = hero;
diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
index 989bc87b46..5afa512d7b 100644
--- a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
+++ b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
@@ -18,9 +18,9 @@ import { AdComponent } from './ad.component';
 })
 // #docregion class
 export class AdBannerComponent implements OnInit, OnDestroy {
-  @Input() ads: AdItem[];
+  @Input() ads: AdItem[] = [];
   currentAdIndex = -1;
-  @ViewChild(AdDirective, {static: true}) adHost: AdDirective;
+  @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
   interval: any;
 
   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
diff --git a/aio/content/examples/dynamic-component-loader/src/app/app.component.ts b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
index 4f208000f9..65cd6d9228 100644
--- a/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
+++ b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
@@ -13,7 +13,7 @@ import { AdItem } from './ad-item';
   `
 })
 export class AppComponent implements OnInit {
-  ads: AdItem[];
+  ads: AdItem[] = [];
 
   constructor(private adService: AdService) {}
 
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
index 1f4fa86451..9816054c77 100644
--- a/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
@@ -9,7 +9,7 @@ import { QuestionBase } from './question-base';
   templateUrl: './dynamic-form-question.component.html'
 })
 export class DynamicFormQuestionComponent {
-  @Input() question: QuestionBase<string>;
-  @Input() form: FormGroup;
+  @Input() question!: QuestionBase<string>;
+  @Input() form!: FormGroup;
   get isValid() { return this.form.controls[this.question.key].valid; }
 }
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
index aff48ed5ff..f260126695 100644
--- a/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
@@ -12,14 +12,14 @@ import { QuestionControlService } from './question-control.service';
 })
 export class DynamicFormComponent implements OnInit {
 
-  @Input() questions: QuestionBase<string>[] = [];
-  form: FormGroup;
+  @Input() questions: QuestionBase<string>[] | null = [];
+  form!: FormGroup;
   payLoad = '';
 
-  constructor(private qcs: QuestionControlService) {  }
+  constructor(private qcs: QuestionControlService) {}
 
   ngOnInit() {
-    this.form = this.qcs.toFormGroup(this.questions);
+    this.form = this.qcs.toFormGroup(this.questions as QuestionBase<string>[]);
   }
 
   onSubmit() {
diff --git a/aio/content/examples/dynamic-form/src/app/question-base.ts b/aio/content/examples/dynamic-form/src/app/question-base.ts
index b82558438f..009355819e 100644
--- a/aio/content/examples/dynamic-form/src/app/question-base.ts
+++ b/aio/content/examples/dynamic-form/src/app/question-base.ts
@@ -1,6 +1,6 @@
 // #docregion
 export class QuestionBase<T> {
-  value: T;
+  value: T|undefined;
   key: string;
   label: string;
   required: boolean;
diff --git a/aio/content/examples/elements/src/app/popup.component.ts b/aio/content/examples/elements/src/app/popup.component.ts
index 45fe6ef647..eda1d8212a 100644
--- a/aio/content/examples/elements/src/app/popup.component.ts
+++ b/aio/content/examples/elements/src/app/popup.component.ts
@@ -47,7 +47,7 @@ export class PopupComponent {
     this._message = message;
     this.state = 'opened';
   }
-  private _message: string;
+  private _message = '';
 
   @Output()
   closed = new EventEmitter();
diff --git a/aio/content/examples/event-binding/src/app/app.component.html b/aio/content/examples/event-binding/src/app/app.component.html
index 719e3460d9..f5387f6f2a 100644
--- a/aio/content/examples/event-binding/src/app/app.component.html
+++ b/aio/content/examples/event-binding/src/app/app.component.html
@@ -20,7 +20,7 @@
 
   <!-- #docregion event-binding-3-->
   <input [value]="currentItem.name"
-         (input)="currentItem.name=getValue($event.target)">
+         (input)="currentItem.name=getValue($event)">
   <!-- #enddocregion event-binding-3-->
   without NgModel
 </div>
diff --git a/aio/content/examples/event-binding/src/app/app.component.ts b/aio/content/examples/event-binding/src/app/app.component.ts
index 83af6bd897..83728bde94 100644
--- a/aio/content/examples/event-binding/src/app/app.component.ts
+++ b/aio/content/examples/event-binding/src/app/app.component.ts
@@ -27,8 +27,8 @@ export class AppComponent {
   }
 
   // #docregion getValue
-  getValue(target: EventTarget): string {
-    return (target as HTMLInputElement).value;
+  getValue(event: Event): string {
+    return (event.target as HTMLInputElement).value;
   }
   // #enddocregion getValue
 }
diff --git a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts
index b05b901f6d..7934176b6f 100644
--- a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts
+++ b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts
@@ -10,7 +10,7 @@ import { Item } from '../item';
 })
 export class ItemDetailComponent {
 
-  @Input() item;
+  @Input() item!: Item;
   itemImageUrl = 'assets/teapot.svg';
   lineThrough = '';
   displayNone = '';
diff --git a/aio/content/examples/event-binding/src/app/item.ts b/aio/content/examples/event-binding/src/app/item.ts
index 1a80527e1c..6e7f806fa8 100644
--- a/aio/content/examples/event-binding/src/app/item.ts
+++ b/aio/content/examples/event-binding/src/app/item.ts
@@ -1,4 +1,4 @@
 export class Item {
-  name: '';
+  name = '';
 }
 
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
index 4589ece3de..98472f4e29 100644
--- a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
@@ -18,13 +18,13 @@
           <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="alert alert-danger">
 
-            <div *ngIf="name.errors.required">
+            <div *ngIf="name.errors?.required">
               Name is required.
             </div>
-            <div *ngIf="name.errors.minlength">
+            <div *ngIf="name.errors?.minlength">
               Name must be at least 4 characters long.
             </div>
-            <div *ngIf="name.errors.forbiddenName">
+            <div *ngIf="name.errors?.forbiddenName">
               Name cannot be Bob.
             </div>
           </div>
@@ -59,7 +59,7 @@
         </select>
 
         <div *ngIf="power.invalid && power.touched" class="alert alert-danger">
-          <div *ngIf="power.errors.required">Power is required.</div>
+          <div *ngIf="power.errors?.required">Power is required.</div>
         </div>
       </div>
 
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
index 07d33afa73..120fd2d7e2 100644
--- a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
@@ -17,7 +17,7 @@ export class HeroFormReactiveComponent implements OnInit {
 
   hero = { name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0] };
 
-  heroForm: FormGroup;
+  heroForm!: FormGroup;
 
   ngOnInit(): void {
     this.heroForm = new FormGroup({
@@ -34,11 +34,11 @@ export class HeroFormReactiveComponent implements OnInit {
     },  { validators: identityRevealedValidator }); // <-- add custom validator at the FormGroup level
   }
 
-  get name() { return this.heroForm.get('name'); }
+  get name() { return this.heroForm.get('name')!; }
 
-  get power() { return this.heroForm.get('power'); }
+  get power() { return this.heroForm.get('power')!; }
 
-  get alterEgo() { return this.heroForm.get('alterEgo'); }
+  get alterEgo() { return this.heroForm.get('alterEgo')!; }
 
   constructor(private alterEgoValidator: UniqueAlterEgoValidator) { }
 }
diff --git a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
index 60510fe6c6..5b9e2c4c24 100644
--- a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
+++ b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
@@ -20,7 +20,7 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
   // #enddocregion directive-providers
 })
 export class ForbiddenValidatorDirective implements Validator {
-  @Input('appForbiddenName') forbiddenName: string;
+  @Input('appForbiddenName') forbiddenName = '';
 
   validate(control: AbstractControl): ValidationErrors | null {
     return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
diff --git a/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts b/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts
index 3c10d241a8..2fe3212062 100644
--- a/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts
+++ b/aio/content/examples/form-validation/src/app/shared/identity-revealed.directive.ts
@@ -18,7 +18,7 @@ export const identityRevealedValidator: ValidatorFn = (control: AbstractControl)
   providers: [{ provide: NG_VALIDATORS, useExisting: IdentityRevealedValidatorDirective, multi: true }]
 })
 export class IdentityRevealedValidatorDirective implements Validator {
-  validate(control: AbstractControl): ValidationErrors {
+  validate(control: AbstractControl): ValidationErrors | null {
     return identityRevealedValidator(control);
   }
 }
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
index 9f5f62d640..125b6452f7 100644
--- a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.html
@@ -19,13 +19,13 @@
           <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="alert">
 
-            <div *ngIf="name.errors.required">
+            <div *ngIf="name.errors?.required">
               Name is required.
             </div>
-            <div *ngIf="name.errors.minlength">
+            <div *ngIf="name.errors?.minlength">
               Name must be at least 4 characters long.
             </div>
-            <div *ngIf="name.errors.forbiddenName">
+            <div *ngIf="name.errors?.forbiddenName">
               Name cannot be Bob.
             </div>
 
diff --git a/aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts b/aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts
index 0dfcc856c9..13f089c6f3 100644
--- a/aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts
@@ -65,7 +65,7 @@ describe('Getting Started', () => {
       await pageElements.productListLinks.get(0).click();
 
       const product = pageElements.productDetailsPage;
-      const buyButton = await product.element(by.css('button'));
+      const buyButton = product.element(by.css('button'));
       const checkoutLink = pageElements.topBarCheckoutLink;
 
       await buyButton.click();
@@ -89,12 +89,12 @@ describe('Getting Started', () => {
 
       const checkoutLink = pageElements.topBarCheckoutLink;
       const productDetailsPage = pageElements.productDetailsPage;
-      const buyButton = await productDetailsPage.element(by.css('button'));
+      const buyButton = productDetailsPage.element(by.css('button'));
 
       const cartPage = pageElements.cartPage;
       const inputFields = cartPage.all(by.css('form input'));
 
-      const purchaseButton = await cartPage.element(by.css('button'));
+      const purchaseButton = cartPage.element(by.css('button'));
       const nameField = inputFields.get(0);
       const addressField = inputFields.get(1);
 
diff --git a/aio/content/examples/getting-started/src/app/cart.service.ts b/aio/content/examples/getting-started/src/app/cart.service.ts
index 999a13d8b8..5252a800d9 100644
--- a/aio/content/examples/getting-started/src/app/cart.service.ts
+++ b/aio/content/examples/getting-started/src/app/cart.service.ts
@@ -2,6 +2,7 @@
 // #docregion import-http
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Product } from './products';
 // #enddocregion import-http
 
 @Injectable({
@@ -10,7 +11,7 @@ import { HttpClient } from '@angular/common/http';
 // #docregion props, methods, inject-http, get-shipping
 export class CartService {
 // #enddocregion get-shipping
-  items = [];
+  items: Product[] = [];
 // #enddocregion props, methods
 
   constructor(
@@ -19,7 +20,7 @@ export class CartService {
 // #enddocregion inject-http
 // #docregion methods
 
-  addToCart(product) {
+  addToCart(product: Product) {
     this.items.push(product);
   }
 
diff --git a/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts b/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts
index a92b624261..7233c7e247 100644
--- a/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts
+++ b/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts
@@ -3,6 +3,7 @@
 import { Component, OnInit } from '@angular/core';
 // #enddocregion as-generated
 import { Input } from '@angular/core';
+import { Product } from '../products';
 // #enddocregion imports
 // #docregion as-generated
 
@@ -14,7 +15,7 @@ import { Input } from '@angular/core';
 // #docregion input-decorator
 export class ProductAlertsComponent implements OnInit {
 // #enddocregion as-generated
-  @Input() product;
+  @Input() product!: Product;
 // #docregion as-generated
   constructor() { }
 
diff --git a/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts b/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts
index 42b4d59e0a..f8144cf057 100644
--- a/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts
+++ b/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.ts
@@ -3,6 +3,7 @@
 import { Component } from '@angular/core';
 import { Input } from '@angular/core';
 import { Output, EventEmitter } from '@angular/core';
+import { Product } from '../products';
 // #enddocregion imports
 
 @Component({
@@ -12,6 +13,6 @@ import { Output, EventEmitter } from '@angular/core';
 })
 // #docregion input-output
 export class ProductAlertsComponent {
-  @Input() product;
+  @Input() product!: Product;
   @Output() notify = new EventEmitter();
 }
diff --git a/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts b/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
index d598b3d389..a7aa0aa0cb 100644
--- a/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
+++ b/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
@@ -3,7 +3,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { products } from '../products';
+import { Product, products } from '../products';
 // #enddocregion imports
 
 @Component({
@@ -13,7 +13,7 @@ import { products } from '../products';
 })
 // #docregion props-methods, product-prop
 export class ProductDetailsComponent implements OnInit {
-  product;
+  product: Product|undefined;
   // #enddocregion product-prop
 
   constructor(
diff --git a/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts b/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
index 4d28fcd615..d80e370b88 100644
--- a/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
+++ b/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
@@ -3,7 +3,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { products } from '../products';
+import { Product, products } from '../products';
 import { CartService } from '../cart.service';
 // #enddocregion cart-service
 
@@ -15,7 +15,7 @@ import { CartService } from '../cart.service';
 // #docregion inject-cart-service, add-to-cart
 export class ProductDetailsComponent implements OnInit {
 // #enddocregion add-to-cart, inject-cart-service
-  product;
+  product: Product|undefined;
 
 // #docregion inject-cart-service
   constructor(
@@ -34,7 +34,7 @@ export class ProductDetailsComponent implements OnInit {
   }
 
 // #docregion add-to-cart
-  addToCart(product) {
+  addToCart(product: Product) {
     this.cartService.addToCart(product);
     window.alert('Your product has been added to the cart!');
   }
diff --git a/aio/content/examples/getting-started/src/app/products.ts b/aio/content/examples/getting-started/src/app/products.ts
index ebcde04caa..4d9980709c 100644
--- a/aio/content/examples/getting-started/src/app/products.ts
+++ b/aio/content/examples/getting-started/src/app/products.ts
@@ -1,4 +1,11 @@
-export const products = [
+export interface Product {
+  id: number;
+  name: string;
+  price: number;
+  description: string;
+}
+
+export const products: Product[] = [
   {
     id: 1,
     name: 'Phone XL',
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts
index b82301d64b..30593be3bd 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts
@@ -5,8 +5,8 @@ import { HeroesService } from './heroes.service';
 
 @Injectable()
 export class HeroTaxReturnService {
-  private currentTaxReturn: HeroTaxReturn;
-  private originalTaxReturn: HeroTaxReturn;
+  private currentTaxReturn!: HeroTaxReturn;
+  private originalTaxReturn!: HeroTaxReturn;
 
   constructor(private heroService: HeroesService) { }
 
diff --git a/aio/content/examples/http/src/app/config/config.component.ts b/aio/content/examples/http/src/app/config/config.component.ts
index 5b88a27aa7..8df5dd00b0 100644
--- a/aio/content/examples/http/src/app/config/config.component.ts
+++ b/aio/content/examples/http/src/app/config/config.component.ts
@@ -11,9 +11,9 @@ import { Config, ConfigService } from './config.service';
 })
 export class ConfigComponent {
   error: any;
-  headers: string[];
+  headers: string[] = [];
   // #docregion v2
-  config: Config;
+  config: Config | undefined;
 
   // #enddocregion v2
   constructor(private configService: ConfigService) {}
@@ -21,7 +21,7 @@ export class ConfigComponent {
   clear() {
     this.config = undefined;
     this.error = undefined;
-    this.headers = undefined;
+    this.headers = [];
   }
 
   // #docregion v1, v2
@@ -64,7 +64,7 @@ export class ConfigComponent {
           `${key}: ${resp.headers.get(key)}`);
 
         // access the body directly, which is typed as `Config`.
-        this.config = { ... resp.body };
+        this.config = { ...resp.body! };
       });
   }
 // #enddocregion showConfigResponse
diff --git a/aio/content/examples/http/src/app/config/config.service.ts b/aio/content/examples/http/src/app/config/config.service.ts
index 0c24de5078..4905fd4d58 100644
--- a/aio/content/examples/http/src/app/config/config.service.ts
+++ b/aio/content/examples/http/src/app/config/config.service.ts
@@ -43,7 +43,7 @@ export class ConfigService {
 
   getConfig_1() {
   // #docregion getConfig_1
-    return this.http.get(this.configUrl);
+    return this.http.get<Config>(this.configUrl);
   }
   // #enddocregion getConfig_1
 
diff --git a/aio/content/examples/http/src/app/downloader/downloader.component.ts b/aio/content/examples/http/src/app/downloader/downloader.component.ts
index 21216d1c63..2efee0748a 100644
--- a/aio/content/examples/http/src/app/downloader/downloader.component.ts
+++ b/aio/content/examples/http/src/app/downloader/downloader.component.ts
@@ -7,7 +7,7 @@ import { DownloaderService } from './downloader.service';
   providers: [ DownloaderService ]
 })
 export class DownloaderComponent {
-  contents: string;
+  contents: string | undefined;
   constructor(private downloaderService: DownloaderService) {}
 
   clear() {
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.ts b/aio/content/examples/http/src/app/heroes/heroes.component.ts
index 7b7547aec8..ea0a0f263c 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.ts
@@ -10,8 +10,8 @@ import { HeroesService } from './heroes.service';
   styleUrls: ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
-  editHero: Hero; // the hero currently being edited
+  heroes: Hero[] = [];
+  editHero: Hero | undefined; // the hero currently being edited
 
   constructor(private heroesService: HeroesService) {}
 
diff --git a/aio/content/examples/http/src/app/heroes/heroes.service.ts b/aio/content/examples/http/src/app/heroes/heroes.service.ts
index 96b0d826f7..ac31663b92 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.service.ts
+++ b/aio/content/examples/http/src/app/heroes/heroes.service.ts
@@ -70,7 +70,7 @@ export class HeroesService {
 
   // #docregion deleteHero
   /** DELETE: delete the hero from the server */
-  deleteHero(id: number): Observable<{}> {
+  deleteHero(id: number): Observable<unknown> {
     const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
     return this.http.delete(url, httpOptions)
       .pipe(
diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.html b/aio/content/examples/http/src/app/package-search/package-search.component.html
index 1dbd19ebe1..85c3402fcf 100644
--- a/aio/content/examples/http/src/app/package-search/package-search.component.html
+++ b/aio/content/examples/http/src/app/package-search/package-search.component.html
@@ -2,7 +2,7 @@
 <h2>Search Npm Packages</h2>
 <p><i>Searches when typing stops. Caches for 30 seconds.</i></p>
 <!-- #docregion search -->
-<input type="text" (keyup)="search(getValue($event.target))" id="name" placeholder="Search"/>
+<input type="text" (keyup)="search(getValue($event))" id="name" placeholder="Search"/>
 <!-- #enddocregion search -->
 <input type="checkbox" id="refresh" [checked]="withRefresh" (click)="toggleRefresh()">
 <label for="refresh">with refresh</label>
diff --git a/aio/content/examples/http/src/app/package-search/package-search.component.ts b/aio/content/examples/http/src/app/package-search/package-search.component.ts
index 9d235fad1a..8353d99fca 100644
--- a/aio/content/examples/http/src/app/package-search/package-search.component.ts
+++ b/aio/content/examples/http/src/app/package-search/package-search.component.ts
@@ -14,7 +14,7 @@ import { NpmPackageInfo, PackageSearchService } from './package-search.service';
 export class PackageSearchComponent implements OnInit {
   // #docregion debounce
   withRefresh = false;
-  packages$: Observable<NpmPackageInfo[]>;
+  packages$!: Observable<NpmPackageInfo[]>;
   private searchText$ = new Subject<string>();
 
   search(packageName: string) {
@@ -37,8 +37,8 @@ export class PackageSearchComponent implements OnInit {
   toggleRefresh() { this.withRefresh = ! this.withRefresh; }
 
   // #docregion getValue
-  getValue(target: EventTarget): string {
-    return (target as HTMLInputElement).value;
+  getValue(event: Event): string {
+    return (event.target as HTMLInputElement).value;
   }
   // #enddocregion getValue
 }
diff --git a/aio/content/examples/http/src/app/package-search/package-search.service.ts b/aio/content/examples/http/src/app/package-search/package-search.service.ts
index a1454625ff..089913283a 100644
--- a/aio/content/examples/http/src/app/package-search/package-search.service.ts
+++ b/aio/content/examples/http/src/app/package-search/package-search.service.ts
@@ -14,17 +14,11 @@ export interface NpmPackageInfo {
 
 export const searchUrl = 'https://npmsearch.com/query';
 
-const httpOptions = {
-  headers: new HttpHeaders({
-    'x-refresh':  'true'
-  })
-};
-
 function createHttpOptions(packageName: string, refresh = false) {
     // npm package name search api
     // e.g., http://npmsearch.com/query?q=dom'
     const params = new HttpParams({ fromObject: { q: packageName } });
-    const headerMap = refresh ? {'x-refresh': 'true'} : {};
+    const headerMap: Record<string, string> = refresh ? {'x-refresh': 'true'} : {};
     const headers = new HttpHeaders(headerMap) ;
     return { headers, params };
 }
diff --git a/aio/content/examples/http/src/app/uploader/uploader.component.ts b/aio/content/examples/http/src/app/uploader/uploader.component.ts
index aadb7152fa..3692f7c517 100644
--- a/aio/content/examples/http/src/app/uploader/uploader.component.ts
+++ b/aio/content/examples/http/src/app/uploader/uploader.component.ts
@@ -8,16 +8,16 @@ import { UploaderService } from './uploader.service';
   providers: [ UploaderService ]
 })
 export class UploaderComponent {
-  message: string;
+  message = '';
 
   constructor(private uploaderService: UploaderService) {}
 
   onPicked(input: HTMLInputElement) {
-    const file = input.files[0];
+    const file = input.files?.[0];
     if (file) {
       this.uploaderService.upload(file).subscribe(
         msg => {
-          input.value = null;
+          input.value = '';
           this.message = msg;
         }
       );
diff --git a/aio/content/examples/http/src/app/uploader/uploader.service.ts b/aio/content/examples/http/src/app/uploader/uploader.service.ts
index b461f6d876..a46fd8f131 100644
--- a/aio/content/examples/http/src/app/uploader/uploader.service.ts
+++ b/aio/content/examples/http/src/app/uploader/uploader.service.ts
@@ -62,7 +62,7 @@ export class UploaderService {
 
       case HttpEventType.UploadProgress:
         // Compute and show the % done:
-        const percentDone = Math.round(100 * event.loaded / event.total);
+        const percentDone = Math.round(100 * event.loaded / (event.total ?? 0));
         return `File "${file.name}" is ${percentDone}% uploaded.`;
 
       case HttpEventType.Response:
diff --git a/aio/content/examples/http/src/main-specs.ts b/aio/content/examples/http/src/main-specs.ts
index 0190a64610..d72feb340e 100644
--- a/aio/content/examples/http/src/main-specs.ts
+++ b/aio/content/examples/http/src/main-specs.ts
@@ -2,7 +2,7 @@ import './testing/global-jasmine';
 import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
 import 'jasmine-core/lib/jasmine-core/boot.js';
 
-declare var jasmine;
+declare var jasmine: any;
 
 import './polyfills';
 
@@ -27,7 +27,7 @@ function bootstrap() {
     location.reload();
     return;
   } else {
-    window.onload(undefined);
+    window.onload?.({} as Event);
     (window as any).jasmineRef = jasmine.getEnv();
   }
 
diff --git a/aio/content/examples/http/src/testing/jasmine.d.ts b/aio/content/examples/http/src/testing/jasmine.d.ts
new file mode 100644
index 0000000000..4bd2b0815c
--- /dev/null
+++ b/aio/content/examples/http/src/testing/jasmine.d.ts
@@ -0,0 +1 @@
+declare module 'jasmine-core/lib/jasmine-core/jasmine.js';
diff --git a/aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts b/aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts
index 50816b3260..f3e7c59c00 100644
--- a/aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts
@@ -5,7 +5,7 @@ describe('Inputs and Outputs', () => {
   beforeEach(() => browser.get(''));
 
    // helper function used to test what's logged to the console
-  async function logChecker(contents) {
+  async function logChecker(contents: string) {
     const logs = await browser
       .manage()
       .logs()
diff --git a/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts b/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts
index 3d15fd1bc9..5be9b00ec2 100644
--- a/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts
@@ -13,10 +13,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class AliasingComponent {
 
-  input1: string;
+  input1 = '';
   outputEvent1: EventEmitter<string> = new EventEmitter<string>();
 
-  @Input('wishListItem') input2: string; //  @Input(alias)
+  @Input('wishListItem') input2 = ''; //  @Input(alias)
   @Output('wishEvent') outputEvent2 = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
 
 
diff --git a/aio/content/examples/inputs-outputs/src/app/app.component.ts b/aio/content/examples/inputs-outputs/src/app/app.component.ts
index 515cbbd595..47cc1ab1b3 100644
--- a/aio/content/examples/inputs-outputs/src/app/app.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/app.component.ts
@@ -34,11 +34,11 @@ export class AppComponent {
     console.warn(`Parent says: crossing off ${item}.`);
   }
 
-  buyClearanceItem(item) {
+  buyClearanceItem(item: string) {
     console.warn(`Parent says: buying ${item}.`);
   }
 
-  saveForLater(item) {
+  saveForLater(item: string) {
     console.warn(`Parent says: saving ${item} for later.`);
   }
 
diff --git a/aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts b/aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts
index 1179589a69..1e1e7cb634 100644
--- a/aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/in-the-metadata/in-the-metadata.component.ts
@@ -17,7 +17,7 @@ export class InTheMetadataComponent  {
 
 
   buyEvent = new EventEmitter<string>();
-  clearanceItem: string;
+  clearanceItem = '';
 
   buyIt() {
     console.warn('Child says: emiting buyEvent with', this.clearanceItem);
diff --git a/aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts b/aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts
index b8dfdacb58..3b8241f741 100644
--- a/aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/input-output/input-output.component.ts
@@ -6,7 +6,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   styleUrls: ['./input-output.component.css']
 })
 export class InputOutputComponent {
-  @Input() item: string;
+  @Input() item = '';
   @Output() deleteRequest = new EventEmitter<string>();
 
   lineThrough = '';
diff --git a/aio/content/examples/inputs-outputs/src/app/item-detail/item-detail.component.ts b/aio/content/examples/inputs-outputs/src/app/item-detail/item-detail.component.ts
index 32f1b5fb59..e4b06e87e6 100644
--- a/aio/content/examples/inputs-outputs/src/app/item-detail/item-detail.component.ts
+++ b/aio/content/examples/inputs-outputs/src/app/item-detail/item-detail.component.ts
@@ -11,6 +11,6 @@ import { Component, Input } from '@angular/core'; // First, import Input
 
 // #docregion use-input
 export class ItemDetailComponent {
-  @Input() item: string; // decorate the property with @Input()
+  @Input() item = ''; // decorate the property with @Input()
 }
 // #enddocregion use-input
diff --git a/aio/content/examples/interpolation/src/app/customer.ts b/aio/content/examples/interpolation/src/app/customer.ts
index c191255efb..b92bc896ca 100644
--- a/aio/content/examples/interpolation/src/app/customer.ts
+++ b/aio/content/examples/interpolation/src/app/customer.ts
@@ -1,3 +1,3 @@
 export class Customer {
-  name: string;
+  name = '';
 }
diff --git a/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
index 9dfa1a7058..957ce01026 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
@@ -25,7 +25,7 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
   comment = '';
 
   // Query for a CONTENT child of type `ChildComponent`
-  @ContentChild(ChildComponent) contentChild: ChildComponent;
+  @ContentChild(ChildComponent) contentChild!: ChildComponent;
 
 // #enddocregion hooks
   constructor(private logger: LoggerService) {
diff --git a/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
index 7a1121776a..3fa831ccf6 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
@@ -27,7 +27,7 @@ export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
   private prevHero = '';
 
   // Query for a VIEW child of type `ChildViewComponent`
-  @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
+  @ViewChild(ChildViewComponent) viewChild!: ChildViewComponent;
 
   // #enddocregion hooks
   constructor(private logger: LoggerService) {
diff --git a/aio/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts b/aio/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts
index 238eb384fc..433c7a3a12 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/counter-parent.component.ts
@@ -20,7 +20,7 @@ import { LoggerService } from './logger.service';
   providers: [LoggerService]
 })
 export class CounterParentComponent {
-  value: number;
+  value = 0;
   spyLog: string[] = [];
 
   private logger: LoggerService;
diff --git a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
index acbbc39056..e361316170 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
@@ -16,7 +16,7 @@ import {
   `
 })
 export class MyCounterComponent implements OnChanges {
-  @Input() counter: number;
+  @Input() counter = 0;
   changeLog: string[] = [];
 
   ngOnChanges(changes: SimpleChanges) {
diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts
index 09c572fbfe..38f51e882a 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.ts
@@ -8,10 +8,10 @@ import { Hero } from './hero';
   templateUrl: './do-check-parent.component.html'
 })
 export class DoCheckParentComponent {
-  hero: Hero;
-  power: string;
+  hero!: Hero;
+  power = '';
   title = 'DoCheck';
-  @ViewChild(DoCheckComponent) childView: DoCheckComponent;
+  @ViewChild(DoCheckComponent) childView!: DoCheckComponent;
 
   constructor() {
     this.reset();
diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts b/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts
index e5fddb063e..17caed2ba0 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/do-check.component.ts
@@ -16,8 +16,8 @@ import { Hero } from './hero';
   `
 })
 export class DoCheckComponent implements DoCheck {
-  @Input() hero: Hero;
-  @Input() power: string;
+  @Input() hero!: Hero;
+  @Input() power = '';
 
   changeDetected = false;
   changeLog: string[] = [];
diff --git a/aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts b/aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts
index 8ed68f8f92..1be9b1af51 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.ts
@@ -9,10 +9,10 @@ import { OnChangesComponent } from './on-changes.component';
   styles: ['']
 })
 export class OnChangesParentComponent {
-  hero: Hero;
-  power: string;
+  hero!: Hero;
+  power = '';
   title = 'OnChanges';
-  @ViewChild(OnChangesComponent) childView: OnChangesComponent;
+  @ViewChild(OnChangesComponent) childView!: OnChangesComponent;
 
   constructor() {
     this.reset();
diff --git a/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts b/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
index 132d5bbcf3..d90a7bd051 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
@@ -17,8 +17,8 @@ import { Hero } from './hero';
 })
 export class OnChangesComponent implements OnChanges {
 // #docregion inputs
-  @Input() hero: Hero;
-  @Input() power: string;
+  @Input() hero!: Hero;
+  @Input() power = '';
 // #enddocregion inputs
 
   changeLog: string[] = [];
diff --git a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts
index a6f2f93ca7..1a89fd3a3b 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts
@@ -28,7 +28,7 @@ import { LoggerService } from './logger.service';
 export class PeekABooParentComponent {
 
   hasChild = false;
-  hookLog: string[];
+  hookLog: string[] = [];
 
   heroName = 'Windstorm';
   private logger: LoggerService;
diff --git a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
index 693afd5e1c..9bf082d6a0 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
@@ -28,7 +28,7 @@ export class PeekABooComponent extends PeekABooDirective implements
              AfterContentInit, AfterContentChecked,
              AfterViewInit, AfterViewChecked,
              OnDestroy {
-  @Input()  name: string;
+  @Input() name = '';
 
   private verb = 'initialized';
 
diff --git a/aio/content/examples/ngcontainer/src/app/app.component.ts b/aio/content/examples/ngcontainer/src/app/app.component.ts
index e17f5ecdf9..b17014d6a3 100644
--- a/aio/content/examples/ngcontainer/src/app/app.component.ts
+++ b/aio/content/examples/ngcontainer/src/app/app.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from '@angular/core';
 
-import { heroes } from './hero';
+import { Hero, heroes } from './hero';
 
 @Component({
   selector: 'app-root',
@@ -10,7 +10,7 @@ import { heroes } from './hero';
 })
 export class AppComponent {
   heroes = heroes;
-  hero = this.heroes[0];
+  hero: Hero | null = this.heroes[0];
   heroTraits = ['honest', 'brave', 'considerate'];
 
   // flags for the table
diff --git a/aio/content/examples/ngcontainer/src/app/hero.components.ts b/aio/content/examples/ngcontainer/src/app/hero.components.ts
index 12706deda9..3ccb2e94a8 100644
--- a/aio/content/examples/ngcontainer/src/app/hero.components.ts
+++ b/aio/content/examples/ngcontainer/src/app/hero.components.ts
@@ -8,7 +8,7 @@ import { Hero } from './hero';
   template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
 })
 export class HappyHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -16,7 +16,7 @@ export class HappyHeroComponent {
   template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
 })
 export class SadHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -24,7 +24,7 @@ export class SadHeroComponent {
   template: `Are you as confused as {{hero.name}}?`
 })
 export class ConfusedHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -32,7 +32,7 @@ export class ConfusedHeroComponent {
   template: `{{message}}`
 })
 export class UnknownHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
   get message() {
     return this.hero && this.hero.name
       ? `${this.hero.name} is strange and mysterious.`
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.component.ts b/aio/content/examples/ngmodules/src/app/contact/contact.component.ts
index 9cea3c8829..6697763354 100644
--- a/aio/content/examples/ngmodules/src/app/contact/contact.component.ts
+++ b/aio/content/examples/ngmodules/src/app/contact/contact.component.ts
@@ -11,8 +11,8 @@ import { UserService } from '../greeting/user.service';
   styleUrls: [ './contact.component.css' ]
 })
 export class ContactComponent implements OnInit {
-  contact: Contact;
-  contacts: Contact[];
+  contact!: Contact;
+  contacts: Contact[] = [];
 
   msg = 'Loading contacts ...';
   userName = '';
@@ -34,7 +34,7 @@ export class ContactComponent implements OnInit {
       this.msg = '';
       this.contacts = contacts;
       this.contact = contacts[0];
-      this.contactForm.get('name').setValue(this.contact.name);
+      this.contactForm.get('name')!.setValue(this.contact.name);
     });
   }
 
@@ -46,14 +46,14 @@ export class ContactComponent implements OnInit {
   }
 
   onSubmit() {
-    const newName = this.contactForm.get('name').value;
+    const newName = this.contactForm.get('name')!.value;
     this.displayMessage('Saved ' + newName);
     this.contact.name = newName;
   }
 
   newContact() {
     this.displayMessage('New contact');
-    this.contactForm.get('name').setValue('');
+    this.contactForm.get('name')!.setValue('');
     this.contact = {id: 42, name: ''};
     this.contacts.push(this.contact);
   }
diff --git a/aio/content/examples/ngmodules/src/app/contact/contact.service.ts b/aio/content/examples/ngmodules/src/app/contact/contact.service.ts
index f3326bcbdd..1cbae2efc0 100644
--- a/aio/content/examples/ngmodules/src/app/contact/contact.service.ts
+++ b/aio/content/examples/ngmodules/src/app/contact/contact.service.ts
@@ -27,7 +27,7 @@ export class ContactService implements OnDestroy {
   }
 
   getContact(id: number | string): Observable<Contact> {
-    const contact$ = of(CONTACTS.find(contact => contact.id === +id));
+    const contact$ = of(CONTACTS.find(contact => contact.id === +id)!);
     return contact$.pipe(delay(FETCH_LATENCY));
   }
 }
diff --git a/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts b/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts
index 7d0818f242..55148d9acd 100644
--- a/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts
+++ b/aio/content/examples/ngmodules/src/app/customers/customers-detail.component.ts
@@ -18,14 +18,14 @@ import { Customer,
   `
 })
 export class CustomersDetailComponent implements OnInit {
-  customer: Customer;
+  customer!: Customer;
 
   constructor(
     private route: ActivatedRoute,
     private customersService: CustomersService) { }
 
   ngOnInit() {
-    const id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
+    const id = parseInt(this.route.snapshot.paramMap.get('id')!, 10);
     this.customersService.getCustomer(id).subscribe(customer => this.customer = customer);
   }
 }
diff --git a/aio/content/examples/ngmodules/src/app/customers/customers.service.ts b/aio/content/examples/ngmodules/src/app/customers/customers.service.ts
index 174181ceb4..0a04ea8083 100644
--- a/aio/content/examples/ngmodules/src/app/customers/customers.service.ts
+++ b/aio/content/examples/ngmodules/src/app/customers/customers.service.ts
@@ -30,7 +30,7 @@ export class CustomersService implements OnDestroy {
   }
 
   getCustomer(id: number | string): Observable<Customer> {
-    const customer$ = of(CUSTOMERS.find(customer => customer.id === +id));
+    const customer$ = of(CUSTOMERS.find(customer => customer.id === +id)!);
     return customer$.pipe(delay(FETCH_LATENCY));
   }
 }
diff --git a/aio/content/examples/ngmodules/src/app/greeting/greeting.component.ts b/aio/content/examples/ngmodules/src/app/greeting/greeting.component.ts
index 6c03c4e55e..0994a2aff6 100644
--- a/aio/content/examples/ngmodules/src/app/greeting/greeting.component.ts
+++ b/aio/content/examples/ngmodules/src/app/greeting/greeting.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { UserService } from '../greeting/user.service';
 
 @Component({
diff --git a/aio/content/examples/ngmodules/src/app/items/items-detail.component.ts b/aio/content/examples/ngmodules/src/app/items/items-detail.component.ts
index c88a997205..718dab8acb 100644
--- a/aio/content/examples/ngmodules/src/app/items/items-detail.component.ts
+++ b/aio/content/examples/ngmodules/src/app/items/items-detail.component.ts
@@ -1,9 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { Item,
-  ItemService } from './items.service';
-
 @Component({
   template: `
     <h3 highlight>Item Detail</h3>
@@ -13,11 +10,11 @@ import { Item,
   `
 })
 export class ItemsDetailComponent implements OnInit {
-  id: number;
+  id = 0;
   constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
-    this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
+    this.id = parseInt(this.route.snapshot.paramMap.get('id')!, 10);
   }
 }
 
diff --git a/aio/content/examples/ngmodules/src/app/items/items.service.ts b/aio/content/examples/ngmodules/src/app/items/items.service.ts
index e148a475b1..60fd7950c0 100644
--- a/aio/content/examples/ngmodules/src/app/items/items.service.ts
+++ b/aio/content/examples/ngmodules/src/app/items/items.service.ts
@@ -28,7 +28,7 @@ export class ItemService implements OnDestroy {
   }
 
   getItem(id: number | string): Observable<Item> {
-    const item$ = of(ITEMS.find(item => item.id === +id));
+    const item$ = of(ITEMS.find(item => item.id === +id)!);
     return item$.pipe(delay(FETCH_LATENCY));
   }
 }
diff --git a/aio/content/examples/observables-in-angular/src/main.ts b/aio/content/examples/observables-in-angular/src/main.ts
index 3c846a598f..553020efb6 100644
--- a/aio/content/examples/observables-in-angular/src/main.ts
+++ b/aio/content/examples/observables-in-angular/src/main.ts
@@ -2,6 +2,7 @@
 // tslint:disable: no-output-native
 // #docregion
 import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { Observable } from 'rxjs';
 
 // #docregion eventemitter
@@ -56,14 +57,13 @@ import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-routable',
-  templateUrl: './routable.component.html',
-  styleUrls: ['./routable.component.css']
+  template: 'Routable1Component template'
 })
 export class Routable1Component implements OnInit {
 
   navStart: Observable<NavigationStart>;
 
-  constructor(private router: Router) {
+  constructor(router: Router) {
     // Create a new Observable that publishes only the NavigationStart event
     this.navStart = router.events.pipe(
       filter(evt => evt instanceof NavigationStart)
@@ -71,7 +71,7 @@ export class Routable1Component implements OnInit {
   }
 
   ngOnInit() {
-    this.navStart.subscribe(evt => console.log('Navigation Started!'));
+    this.navStart.subscribe(() => console.log('Navigation Started!'));
   }
 }
 
@@ -84,8 +84,7 @@ import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-routable',
-  templateUrl: './routable.component.html',
-  styleUrls: ['./routable.component.css']
+  template: 'Routable2Component template'
 })
 export class Routable2Component implements OnInit {
   constructor(private activatedRoute: ActivatedRoute) {}
@@ -109,14 +108,14 @@ import { FormGroup } from '@angular/forms';
 })
 export class MyComponent implements OnInit {
   nameChangeLog: string[] = [];
-  heroForm: FormGroup;
+  heroForm!: FormGroup;
 
   ngOnInit() {
     this.logNameChange();
   }
   logNameChange() {
     const nameControl = this.heroForm.get('name');
-    nameControl.valueChanges.forEach(
+    nameControl?.valueChanges.forEach(
       (value: string) => this.nameChangeLog.push(value)
     );
   }
@@ -127,6 +126,7 @@ export class MyComponent implements OnInit {
 
 
 @NgModule({
+  imports: [CommonModule],
   declarations:
       [ZippyComponent, AsyncObservablePipeComponent, Routable1Component, Routable2Component, MyComponent]
 })
diff --git a/aio/content/examples/observables/src/creating.spec.ts b/aio/content/examples/observables/src/creating.spec.ts
index e1718a9585..001251e7f1 100644
--- a/aio/content/examples/observables/src/creating.spec.ts
+++ b/aio/content/examples/observables/src/creating.spec.ts
@@ -2,10 +2,10 @@ import { docRegionFromEvent, docRegionSubscriber } from './creating';
 
 describe('observables', () => {
   it('should create an observable using the constructor', () => {
-    const console = {log: jasmine.createSpy('log')};
-    docRegionSubscriber(console);
-    expect(console.log).toHaveBeenCalledTimes(4);
-    expect(console.log.calls.allArgs()).toEqual([
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    docRegionSubscriber(consoleSpy);
+    expect(consoleSpy.log).toHaveBeenCalledTimes(4);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       [1],
       [2],
       [3],
@@ -14,12 +14,12 @@ describe('observables', () => {
   });
 
   it('should listen to input changes', () => {
-    let triggerInputChange;
+    let triggerInputChange!: (e: {keyCode: number}) => void;
     const input = {
       value: 'Test',
       addEventListener: jasmine
         .createSpy('addEvent')
-        .and.callFake((eventName: string, cb: (e) => void) => {
+        .and.callFake((eventName: string, cb: (e: {keyCode: number}) => void) => {
           if (eventName === 'keydown') {
             triggerInputChange = cb;
           }
@@ -27,7 +27,7 @@ describe('observables', () => {
       removeEventListener: jasmine.createSpy('removeEventListener'),
     };
 
-    const document = { getElementById: () => input };
+    const document = { getElementById: () => input } as unknown as Document;
     docRegionFromEvent(document);
     triggerInputChange({keyCode: 65});
     expect(input.value).toBe('Test');
@@ -41,14 +41,14 @@ describe('observables', () => {
       addEventListener: jasmine.createSpy('addEvent'),
       removeEventListener: jasmine
         .createSpy('removeEvent')
-        .and.callFake((eventName: string, cb: (e) => void) => {
+        .and.callFake((eventName: string) => {
           if (eventName === 'keydown') {
             doneFn();
           }
         })
     };
 
-    const document = { getElementById: () => input };
+    const document = { getElementById: () => input } as unknown as Document;
     const subscription = docRegionFromEvent(document);
     subscription.unsubscribe();
   });
diff --git a/aio/content/examples/observables/src/creating.ts b/aio/content/examples/observables/src/creating.ts
index 7a673228cc..73be5ce0f3 100644
--- a/aio/content/examples/observables/src/creating.ts
+++ b/aio/content/examples/observables/src/creating.ts
@@ -1,11 +1,11 @@
 // #docplaster
 
-import { Observable } from 'rxjs';
+import { Observable, Observer } from 'rxjs';
 
-export function docRegionSubscriber(console) {
+export function docRegionSubscriber(console: Console) {
   // #docregion subscriber
   // This function runs when subscribe() is called
-  function sequenceSubscriber(observer) {
+  function sequenceSubscriber(observer: Observer<number>) {
     // synchronously deliver 1, 2, and 3, then complete
     observer.next(1);
     observer.next(2);
@@ -36,9 +36,9 @@ export function docRegionSubscriber(console) {
 
 // #docregion fromevent
 
-function fromEvent(target, eventName) {
-  return new Observable((observer) => {
-    const handler = (e) => observer.next(e);
+function fromEvent<T extends keyof HTMLElementEventMap>(target: HTMLElement, eventName: T) {
+  return new Observable<HTMLElementEventMap[T]>((observer) => {
+    const handler = (e: HTMLElementEventMap[T]) => observer.next(e);
 
     // Add the event handler to the target
     target.addEventListener(eventName, handler);
@@ -52,7 +52,7 @@ function fromEvent(target, eventName) {
 
 // #enddocregion fromevent
 
-export function docRegionFromEvent(document) {
+export function docRegionFromEvent(document: Document) {
   // #docregion fromevent_use
 
   const ESC_KEY = 27;
diff --git a/aio/content/examples/observables/src/geolocation.ts b/aio/content/examples/observables/src/geolocation.ts
index e1f0a2e40f..c774dc9624 100644
--- a/aio/content/examples/observables/src/geolocation.ts
+++ b/aio/content/examples/observables/src/geolocation.ts
@@ -9,9 +9,9 @@ const locations = new Observable((observer) => {
 
   // Simple geolocation API check provides values to publish
   if ('geolocation' in navigator) {
-    watchId = navigator.geolocation.watchPosition((position: Position) => {
+    watchId = navigator.geolocation.watchPosition((position: GeolocationPosition) => {
       observer.next(position);
-    }, (error: PositionError) => {
+    }, (error: GeolocationPositionError) => {
       observer.error(error);
     });
   } else {
diff --git a/aio/content/examples/observables/src/multicasting.spec.ts b/aio/content/examples/observables/src/multicasting.spec.ts
index 90bab96151..56e85cad4f 100644
--- a/aio/content/examples/observables/src/multicasting.spec.ts
+++ b/aio/content/examples/observables/src/multicasting.spec.ts
@@ -1,10 +1,8 @@
 import { docRegionDelaySequence, docRegionMulticastSequence } from './multicasting';
 
 describe('multicasting', () => {
-  let console;
   beforeEach(() => {
     jasmine.clock().install();
-    console = {log: jasmine.createSpy('log')};
   });
 
   afterEach(() => {
@@ -12,10 +10,11 @@ describe('multicasting', () => {
   });
 
   it('should create an observable and emit in sequence', () => {
-    docRegionDelaySequence(console);
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    docRegionDelaySequence(consoleSpy);
     jasmine.clock().tick(10000);
-    expect(console.log).toHaveBeenCalledTimes(12);
-    expect(console.log.calls.allArgs()).toEqual([
+    expect(consoleSpy.log).toHaveBeenCalledTimes(12);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       [1],
       ['1st subscribe: 1'],
       ['2nd subscribe: 1'],
@@ -32,10 +31,11 @@ describe('multicasting', () => {
   });
 
   it('should create an observable and multicast the emissions', () => {
-    docRegionMulticastSequence(console);
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    docRegionMulticastSequence(consoleSpy);
     jasmine.clock().tick(10000);
-    expect(console.log).toHaveBeenCalledTimes(7);
-    expect(console.log.calls.allArgs()).toEqual([
+    expect(consoleSpy.log).toHaveBeenCalledTimes(7);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['1st subscribe: 1'],
       ['1st subscribe: 2'],
       ['2nd subscribe: 2'],
diff --git a/aio/content/examples/observables/src/multicasting.ts b/aio/content/examples/observables/src/multicasting.ts
index fe821edd2a..45a8922e2b 100644
--- a/aio/content/examples/observables/src/multicasting.ts
+++ b/aio/content/examples/observables/src/multicasting.ts
@@ -1,16 +1,16 @@
 // #docplaster
 
-import { Observable } from 'rxjs';
+import { Observable, Observer } from 'rxjs';
 
-export function docRegionDelaySequence(console) {
+export function docRegionDelaySequence(console: Console) {
   // #docregion delay_sequence
-  function sequenceSubscriber(observer) {
+  function sequenceSubscriber(observer: Observer<number>) {
     const seq = [1, 2, 3];
-    let timeoutId;
+    let timeoutId: any;
 
     // Will run through an array of numbers, emitting one value
     // per second until it gets to the end of the array.
-    function doInSequence(arr, idx) {
+    function doInSequence(arr: number[], idx: number) {
       timeoutId = setTimeout(() => {
         observer.next(arr[idx]);
         if (idx === arr.length - 1) {
@@ -76,19 +76,19 @@ export function docRegionDelaySequence(console) {
   // #enddocregion subscribe_twice
 }
 
-export function docRegionMulticastSequence(console) {
+export function docRegionMulticastSequence(console: Console) {
   // #docregion multicast_sequence
   function multicastSequenceSubscriber() {
     const seq = [1, 2, 3];
     // Keep track of each observer (one for every active subscription)
-    const observers = [];
+    const observers: Observer<unknown>[] = [];
     // Still a single timeoutId because there will only ever be one
     // set of values being generated, multicasted to each subscriber
-    let timeoutId;
+    let timeoutId: any;
 
     // Return the subscriber function (runs when subscribe()
     // function is invoked)
-    return observer => {
+    return (observer: Observer<unknown>) => {
       observers.push(observer);
       // When this is the first subscription, start the sequence
       if (observers.length === 1) {
@@ -97,6 +97,7 @@ export function docRegionMulticastSequence(console) {
             // Iterate through observers and notify all subscriptions
             observers.forEach(obs => obs.next(val));
           },
+          error() { /* Handle the error... */ },
           complete() {
             // Notify all complete callbacks
             observers.slice(0).forEach(obs => obs.complete());
@@ -119,7 +120,7 @@ export function docRegionMulticastSequence(console) {
 
   // Run through an array of numbers, emitting one value
   // per second until it gets to the end of the array.
-  function doSequence(observer, arr, idx) {
+  function doSequence(observer: Observer<number>, arr: number[], idx: number) {
     return setTimeout(() => {
       observer.next(arr[idx]);
       if (idx === arr.length - 1) {
diff --git a/aio/content/examples/observables/src/subscribing.spec.ts b/aio/content/examples/observables/src/subscribing.spec.ts
index 43d0307e5d..e1ebe3a523 100644
--- a/aio/content/examples/observables/src/subscribing.spec.ts
+++ b/aio/content/examples/observables/src/subscribing.spec.ts
@@ -2,10 +2,10 @@ import { docRegionObserver } from './subscribing';
 
 describe('subscribing', () => {
   it('should subscribe and emit', () => {
-    const console = {log: jasmine.createSpy('log')};
-    docRegionObserver(console);
-    expect(console.log).toHaveBeenCalledTimes(8);
-    expect(console.log.calls.allArgs()).toEqual([
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    docRegionObserver(consoleSpy);
+    expect(consoleSpy.log).toHaveBeenCalledTimes(8);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['Observer got a next value: 1'],
       ['Observer got a next value: 2'],
       ['Observer got a next value: 3'],
diff --git a/aio/content/examples/observables/src/subscribing.ts b/aio/content/examples/observables/src/subscribing.ts
index 47677b5d9e..8d8ef6416c 100644
--- a/aio/content/examples/observables/src/subscribing.ts
+++ b/aio/content/examples/observables/src/subscribing.ts
@@ -1,7 +1,7 @@
 // #docplaster
 import { of } from 'rxjs';
 
-export function docRegionObserver(console) {
+export function docRegionObserver(console: Console) {
   // #docregion observer
 
   // Create simple observable that emits three values
@@ -9,8 +9,8 @@ export function docRegionObserver(console) {
 
   // Create observer object
   const myObserver = {
-    next: x => console.log('Observer got a next value: ' + x),
-    error: err => console.error('Observer got an error: ' + err),
+    next: (x: number) => console.log('Observer got a next value: ' + x),
+    error: (err: Error) => console.error('Observer got an error: ' + err),
     complete: () => console.log('Observer got a complete notification'),
   };
 
diff --git a/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts b/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts
index de8a8fca2d..64ddcd77f8 100644
--- a/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts
+++ b/aio/content/examples/pipes/src/app/exponential-strength.pipe.ts
@@ -11,7 +11,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 */
 @Pipe({name: 'exponentialStrength'})
 export class ExponentialStrengthPipe implements PipeTransform {
-  transform(value: number, exponent?: number): number {
-    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
+  transform(value: number, exponent = 1): number {
+    return Math.pow(value, exponent);
   }
 }
diff --git a/aio/content/examples/pipes/src/app/hero-async-message.component.ts b/aio/content/examples/pipes/src/app/hero-async-message.component.ts
index 558e916f53..7c922fbd35 100644
--- a/aio/content/examples/pipes/src/app/hero-async-message.component.ts
+++ b/aio/content/examples/pipes/src/app/hero-async-message.component.ts
@@ -20,10 +20,16 @@ export class HeroAsyncMessageComponent {
     'Will you be my hero?'
   ];
 
-  constructor() { this.resend(); }
+  constructor() {
+    this.message$ = this.getResendObservable();
+  }
 
   resend() {
-    this.message$ = interval(500).pipe(
+    this.message$ = this.getResendObservable();
+  }
+
+  private getResendObservable() {
+    return interval(500).pipe(
       map(i => this.messages[i]),
       take(this.messages.length)
     );
diff --git a/aio/content/examples/practical-observable-usage/src/backoff.ts b/aio/content/examples/practical-observable-usage/src/backoff.ts
index 68d724d097..888c2b13d1 100644
--- a/aio/content/examples/practical-observable-usage/src/backoff.ts
+++ b/aio/content/examples/practical-observable-usage/src/backoff.ts
@@ -4,7 +4,7 @@ import { of, pipe, range, throwError, timer, zip } from 'rxjs';
 import { ajax } from 'rxjs/ajax';
 import { map, mergeMap, retryWhen } from 'rxjs/operators';
 
-export function backoff(maxTries, delay) {
+export function backoff(maxTries: number, delay: number) {
   return pipe(
     retryWhen(attempts =>
       zip(range(1, maxTries + 1), attempts).pipe(
diff --git a/aio/content/examples/practical-observable-usage/src/typeahead.spec.ts b/aio/content/examples/practical-observable-usage/src/typeahead.spec.ts
index 285dd7e12e..a8ca614a6f 100644
--- a/aio/content/examples/practical-observable-usage/src/typeahead.spec.ts
+++ b/aio/content/examples/practical-observable-usage/src/typeahead.spec.ts
@@ -1,17 +1,17 @@
-import { of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { docRegionTypeahead } from './typeahead';
 
 describe('typeahead', () => {
-  let document;
-  let ajax;
-  let triggertInputChange;
+  let document: Document;
+  let ajax: jasmine.Spy;
+  let triggertInputChange: (e: { target: { value: string } }) => void;
 
   beforeEach(() => {
     jasmine.clock().install();
     const input = {
       addEventListener: jasmine
         .createSpy('addEvent')
-        .and.callFake((eventName: string, cb: (e) => void) => {
+        .and.callFake((eventName: string, cb: (e: unknown) => void) => {
           if (eventName === 'input') {
             triggertInputChange = cb;
           }
@@ -19,7 +19,7 @@ describe('typeahead', () => {
       removeEventListener: jasmine.createSpy('removeEvent'),
     };
 
-    document = { getElementById: (id: string) => input };
+    document = { getElementById: (id: string) => input } as unknown as Document;
     ajax = jasmine.createSpy('ajax').and.callFake((url: string) => of('foo bar'));
   });
 
diff --git a/aio/content/examples/practical-observable-usage/src/typeahead.ts b/aio/content/examples/practical-observable-usage/src/typeahead.ts
index adbddd66c4..bb4fd2888c 100644
--- a/aio/content/examples/practical-observable-usage/src/typeahead.ts
+++ b/aio/content/examples/practical-observable-usage/src/typeahead.ts
@@ -4,19 +4,18 @@
 */
 // #docplaster
 // #docregion
-  import { fromEvent } from 'rxjs';
-  import { ajax } from 'rxjs/ajax';
+  import { fromEvent, Observable } from 'rxjs';
   import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
 
 // #enddocregion
 /* tslint:disable:no-shadowed-variable */
 /* tslint:disable:align */
-export function docRegionTypeahead(document, ajax) {
+export function docRegionTypeahead(document: Document, ajax: (url: string) => Observable<string>) {
   // #docregion
-  const searchBox = document.getElementById('search-box');
+  const searchBox = document.getElementById('search-box') as HTMLInputElement;
 
   const typeahead = fromEvent(searchBox, 'input').pipe(
-    map((e: KeyboardEvent) => (e.target as HTMLInputElement).value),
+    map(e => (e.target as HTMLInputElement).value),
     filter(text => text.length > 2),
     debounceTime(10),
     distinctUntilChanged(),
diff --git a/aio/content/examples/property-binding/src/app/item-detail/item-detail.component.ts b/aio/content/examples/property-binding/src/app/item-detail/item-detail.component.ts
index e16be07036..715ad9dc79 100644
--- a/aio/content/examples/property-binding/src/app/item-detail/item-detail.component.ts
+++ b/aio/content/examples/property-binding/src/app/item-detail/item-detail.component.ts
@@ -10,7 +10,7 @@ import { Component, OnInit, Input } from '@angular/core';
 export class ItemDetailComponent implements OnInit {
 
   // #docregion input-type
-  @Input() childItem: string;
+  @Input() childItem = '';
   // #enddocregion input-type
 
   // items = ITEMS;
diff --git a/aio/content/examples/property-binding/src/app/item-list/item-list.component.ts b/aio/content/examples/property-binding/src/app/item-list/item-list.component.ts
index 38d29e0f64..0e9ca8c459 100644
--- a/aio/content/examples/property-binding/src/app/item-list/item-list.component.ts
+++ b/aio/content/examples/property-binding/src/app/item-list/item-list.component.ts
@@ -10,7 +10,7 @@ import { Item } from '../item';
 export class ItemListComponent {
   listItems = ITEMS;
   // #docregion item-input
-  @Input() items: Item[];
+  @Input() items: Item[] = [];
   // #enddocregion item-input
   constructor() { }
 
diff --git a/aio/content/examples/property-binding/src/app/string-init/string-init.component.ts b/aio/content/examples/property-binding/src/app/string-init/string-init.component.ts
index a49bf41093..c25de4fdbf 100644
--- a/aio/content/examples/property-binding/src/app/string-init/string-init.component.ts
+++ b/aio/content/examples/property-binding/src/app/string-init/string-init.component.ts
@@ -7,7 +7,7 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class StringInitComponent implements OnInit {
 
-  @Input() prefix: string;
+  @Input() prefix = '';
 
   constructor() { }
 
diff --git a/aio/content/examples/providers/src/app/app.component.ts b/aio/content/examples/providers/src/app/app.component.ts
index 37c8e53586..8e3f2a934a 100644
--- a/aio/content/examples/providers/src/app/app.component.ts
+++ b/aio/content/examples/providers/src/app/app.component.ts
@@ -14,7 +14,7 @@ import { User, UserService } from './user.service';
 // #enddocregion component-providers
 export class AppComponent implements OnInit {
   title = 'Users list';
-  users: User[];
+  users: User[] = [];
 
   constructor(private userService: UserService) { }
 
diff --git a/aio/content/examples/providers/src/app/user.service.ts b/aio/content/examples/providers/src/app/user.service.ts
index 096d1c8fb1..5363b47120 100644
--- a/aio/content/examples/providers/src/app/user.service.ts
+++ b/aio/content/examples/providers/src/app/user.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-export class User {
+export interface User {
   id: number;
   name: string;
 }
diff --git a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
index 53c3d756b7..e22cb11f49 100644
--- a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
@@ -56,7 +56,7 @@ describe('Reactive forms', () => {
     const streetInput = getInput('street');
     const addAliasButton = element(by.buttonText('Add Alias'));
     const updateButton = profileEditor.element(by.buttonText('Update Profile'));
-    const profile = {
+    const profile: Record<string, string | number> = {
       firstName: 'John',
       lastName: 'Smith',
       street: '345 South Lane',
diff --git a/aio/content/examples/resolution-modifiers/src/app/host/host.component.html b/aio/content/examples/resolution-modifiers/src/app/host/host.component.html
index b38f843af9..af9796859a 100755
--- a/aio/content/examples/resolution-modifiers/src/app/host/host.component.html
+++ b/aio/content/examples/resolution-modifiers/src/app/host/host.component.html
@@ -1,6 +1,6 @@
 <div class="section">
 	<h2>@Host() Component</h2>
-	<p>Flower emoji: {{flower.emoji}}</p>
+	<p>Flower emoji: {{flower?.emoji}}</p>
 	<p><i>(@Host() stops it here)</i></p>
 	<app-host-child></app-host-child>
 </div>
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts
index 6db32e4807..a58f95ef34 100644
--- a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.1.ts
@@ -10,8 +10,8 @@ import { map } from 'rxjs/operators';
   styleUrls: ['./admin-dashboard.component.css']
 })
 export class AdminDashboardComponent implements OnInit {
-  sessionId: Observable<string>;
-  token: Observable<string>;
+  sessionId!: Observable<string>;
+  token!: Observable<string>;
 
   constructor(private route: ActivatedRoute) {}
 
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts
index db892d9990..da9cd828fc 100644
--- a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.ts
@@ -12,9 +12,9 @@ import { SelectivePreloadingStrategyService } from '../../selective-preloading-s
   styleUrls: ['./admin-dashboard.component.css']
 })
 export class AdminDashboardComponent implements OnInit {
-  sessionId: Observable<string>;
-  token: Observable<string>;
-  modules: string[];
+  sessionId!: Observable<string>;
+  token!: Observable<string>;
+  modules: string[] = [];
 
   constructor(
     private route: ActivatedRoute,
diff --git a/aio/content/examples/router/src/app/auth/auth.service.ts b/aio/content/examples/router/src/app/auth/auth.service.ts
index 280caa14da..338f7a19e9 100644
--- a/aio/content/examples/router/src/app/auth/auth.service.ts
+++ b/aio/content/examples/router/src/app/auth/auth.service.ts
@@ -11,12 +11,12 @@ export class AuthService {
   isLoggedIn = false;
 
   // store the URL so we can redirect after logging in
-  redirectUrl: string;
+  redirectUrl: string | null = null;
 
   login(): Observable<boolean> {
     return of(true).pipe(
       delay(1000),
-      tap(val => this.isLoggedIn = true)
+      tap(() => this.isLoggedIn = true)
     );
   }
 
diff --git a/aio/content/examples/router/src/app/auth/login/login.component.1.ts b/aio/content/examples/router/src/app/auth/login/login.component.1.ts
index fbc45c5d36..78218b3b02 100644
--- a/aio/content/examples/router/src/app/auth/login/login.component.1.ts
+++ b/aio/content/examples/router/src/app/auth/login/login.component.1.ts
@@ -12,18 +12,18 @@ export class LoginComponent {
   message: string;
 
   constructor(public authService: AuthService, public router: Router) {
-    this.setMessage();
+    this.message = this.getMessage();
   }
 
-  setMessage() {
-    this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
+  getMessage() {
+    return 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
   }
 
   login() {
     this.message = 'Trying to log in ...';
 
     this.authService.login().subscribe(() => {
-      this.setMessage();
+      this.message = this.getMessage();
       if (this.authService.isLoggedIn) {
         // Usually you would use the redirect URL from the auth service.
         // However to keep the example simple, we will always redirect to `/admin`.
@@ -37,6 +37,6 @@ export class LoginComponent {
 
   logout() {
     this.authService.logout();
-    this.setMessage();
+    this.message = this.getMessage();
   }
 }
diff --git a/aio/content/examples/router/src/app/auth/login/login.component.ts b/aio/content/examples/router/src/app/auth/login/login.component.ts
index 66461effca..67d15a863b 100644
--- a/aio/content/examples/router/src/app/auth/login/login.component.ts
+++ b/aio/content/examples/router/src/app/auth/login/login.component.ts
@@ -12,18 +12,18 @@ export class LoginComponent {
   message: string;
 
   constructor(public authService: AuthService, public router: Router) {
-    this.setMessage();
+    this.message = this.getMessage();
   }
 
-  setMessage() {
-    this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
+  getMessage() {
+    return 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
   }
 
   login() {
     this.message = 'Trying to log in ...';
 
     this.authService.login().subscribe(() => {
-      this.setMessage();
+      this.message = this.getMessage();
       if (this.authService.isLoggedIn) {
         // Usually you would use the redirect URL from the auth service.
         // However to keep the example simple, we will always redirect to `/admin`.
@@ -46,6 +46,6 @@ export class LoginComponent {
 
   logout() {
     this.authService.logout();
-    this.setMessage();
+    this.message = this.getMessage();
   }
 }
diff --git a/aio/content/examples/router/src/app/compose-message/compose-message.component.ts b/aio/content/examples/router/src/app/compose-message/compose-message.component.ts
index 534a341ca5..5e4a468091 100644
--- a/aio/content/examples/router/src/app/compose-message/compose-message.component.ts
+++ b/aio/content/examples/router/src/app/compose-message/compose-message.component.ts
@@ -8,8 +8,8 @@ import { Router } from '@angular/router';
   styleUrls: ['./compose-message.component.css']
 })
 export class ComposeMessageComponent {
-  details: string;
-  message: string;
+  details = '';
+  message = '';
   sending = false;
 
   constructor(private router: Router) {}
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
index cc521b439a..8bcfc33bfd 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
@@ -19,7 +19,7 @@ export class CrisisDetailResolverService implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
   resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Crisis> | Observable<never> {
-    const id = route.paramMap.get('id');
+    const id = route.paramMap.get('id')!;
 
     return this.cs.getCrisis(id).pipe(
       take(1),
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts
index 6e7516296f..d0f4a6054f 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.1.ts
@@ -13,8 +13,8 @@ import { DialogService } from '../../dialog.service';
   styleUrls: ['./crisis-detail.component.css']
 })
 export class CrisisDetailComponent implements OnInit {
-  crisis: Crisis;
-  editName: string;
+  crisis!: Crisis;
+  editName = '';
 
   constructor(
     private service: CrisisService,
@@ -27,7 +27,7 @@ export class CrisisDetailComponent implements OnInit {
     this.route.paramMap
       .pipe(
         switchMap((params: ParamMap) =>
-          this.service.getCrisis(params.get('id'))))
+          this.service.getCrisis(params.get('id')!)))
       .subscribe((crisis: Crisis) => {
         if (crisis) {
           this.editName = crisis.name;
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts
index 3ce296d04c..332db103e5 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-detail/crisis-detail.component.ts
@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion
-import { Component, OnInit, HostBinding } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 
@@ -13,8 +13,8 @@ import { DialogService } from '../../dialog.service';
   styleUrls: ['./crisis-detail.component.css']
 })
 export class CrisisDetailComponent implements OnInit {
-  crisis: Crisis;
-  editName: string;
+  crisis!: Crisis;
+  editName = '';
 
   constructor(
     private route: ActivatedRoute,
@@ -25,9 +25,10 @@ export class CrisisDetailComponent implements OnInit {
 // #docregion ngOnInit
   ngOnInit() {
     this.route.data
-      .subscribe((data: { crisis: Crisis }) => {
-        this.editName = data.crisis.name;
-        this.crisis = data.crisis;
+      .subscribe(data => {
+        const crisis: Crisis = data.crisis;
+        this.editName = crisis.name;
+        this.crisis = crisis;
       });
   }
 // #enddocregion ngOnInit
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.1.ts b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.1.ts
index 2c01ce0095..5ba52b48ae 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.1.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.1.ts
@@ -13,8 +13,8 @@ import { switchMap } from 'rxjs/operators';
   styleUrls: ['./crisis-list.component.css']
 })
 export class CrisisListComponent implements OnInit {
-  crises$: Observable<Crisis[]>;
-  selectedId: number;
+  crises$!: Observable<Crisis[]>;
+  selectedId = 0;
 
   constructor(
     private service: CrisisService,
@@ -25,7 +25,7 @@ export class CrisisListComponent implements OnInit {
   ngOnInit() {
     this.crises$ = this.route.paramMap.pipe(
       switchMap((params: ParamMap) => {
-        this.selectedId = +params.get('id');
+        this.selectedId = parseInt(params.get('id')!, 10);
         return this.service.getCrises();
       })
     );
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts
index 19bf6c3177..3941e4f31c 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.ts
@@ -12,8 +12,8 @@ import { switchMap } from 'rxjs/operators';
   styleUrls: ['./crisis-list.component.css']
 })
 export class CrisisListComponent implements OnInit {
-  crises$: Observable<Crisis[]>;
-  selectedId: number;
+  crises$!: Observable<Crisis[]>;
+  selectedId = 0;
 
   constructor(
     private service: CrisisService,
@@ -23,7 +23,7 @@ export class CrisisListComponent implements OnInit {
   ngOnInit() {
     this.crises$ = this.route.paramMap.pipe(
       switchMap(params => {
-        this.selectedId = +params.get('id');
+        this.selectedId = parseInt(params.get('id')!, 10);
         return this.service.getCrises();
       })
     );
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis.service.ts b/aio/content/examples/router/src/app/crisis-center/crisis.service.ts
index 957b65c9c9..dd18d82f11 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis.service.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis.service.ts
@@ -21,7 +21,7 @@ export class CrisisService {
 
   getCrisis(id: number | string) {
     return this.getCrises().pipe(
-      map(crises => crises.find(crisis => crisis.id === +id))
+      map(crises => crises.find(crisis => crisis.id === +id)!)
     );
   }
 
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis.ts b/aio/content/examples/router/src/app/crisis-center/crisis.ts
index 3b89ceec79..c7fc032be4 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis.ts
+++ b/aio/content/examples/router/src/app/crisis-center/crisis.ts
@@ -1,4 +1,4 @@
-export class Crisis {
+export interface Crisis {
   id: number;
   name: string;
 }
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts
index b340df6daf..6b1f113d81 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.1.ts
@@ -16,7 +16,7 @@ import { Hero } from '../hero';
   styleUrls: ['./hero-detail.component.css']
 })
 export class HeroDetailComponent implements OnInit  {
-  hero$: Observable<Hero>;
+  hero$!: Observable<Hero>;
 
   constructor(
     private route: ActivatedRoute,
@@ -27,7 +27,7 @@ export class HeroDetailComponent implements OnInit  {
   ngOnInit() {
     this.hero$ = this.route.paramMap.pipe(
       switchMap((params: ParamMap) =>
-        this.service.getHero(params.get('id')))
+        this.service.getHero(params.get('id')!))
     );
   }
 
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.2.ts b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.2.ts
index 135863ebff..2e2c3c0fd6 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.2.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.2.ts
@@ -13,7 +13,7 @@ import { Hero } from '../hero';
   styleUrls: ['./hero-detail.component.css']
 })
 export class HeroDetailComponent implements OnInit  {
-  hero$: Observable<Hero>;
+  hero$!: Observable<Hero>;
 
   constructor(
     private route: ActivatedRoute,
@@ -23,7 +23,7 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion snapshot
   ngOnInit() {
-    const id = this.route.snapshot.paramMap.get('id');
+    const id = this.route.snapshot.paramMap.get('id')!;
 
     this.hero$ = this.service.getHero(id);
   }
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts
index ddd4e270f5..a910ab508b 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.3.ts
@@ -16,7 +16,7 @@ import { Hero } from '../hero';
   styleUrls: ['./hero-detail.component.css']
 })
 export class HeroDetailComponent implements OnInit {
-  hero$: Observable<Hero>;
+  hero$!: Observable<Hero>;
 
   // #docregion ctor
   constructor(
@@ -30,7 +30,7 @@ export class HeroDetailComponent implements OnInit {
   ngOnInit() {
     this.hero$ = this.route.paramMap.pipe(
       switchMap((params: ParamMap) =>
-        this.service.getHero(params.get('id')))
+        this.service.getHero(params.get('id')!))
     );
   }
   // #enddocregion ngOnInit
diff --git a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts
index b5114be22d..f879fcdbaa 100644
--- a/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-detail/hero-detail.component.ts
@@ -16,7 +16,7 @@ import { Hero } from '../hero';
   styleUrls: ['./hero-detail.component.css']
 })
 export class HeroDetailComponent implements OnInit {
-  hero$: Observable<Hero>;
+  hero$!: Observable<Hero>;
 
   // #docregion activated-route
   constructor(
@@ -32,7 +32,7 @@ export class HeroDetailComponent implements OnInit {
   ngOnInit() {
     this.hero$ = this.route.paramMap.pipe(
       switchMap((params: ParamMap) =>
-        this.service.getHero(params.get('id')))
+        this.service.getHero(params.get('id')!))
     );
   }
 
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts
index f621428e6d..220ab34bb5 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts
@@ -12,7 +12,7 @@ import { Hero } from '../hero';
   styleUrls: ['./hero-list.component.css']
 })
 export class HeroListComponent implements OnInit {
-  heroes$: Observable<Hero[]>;
+  heroes$!: Observable<Hero[]>;
 
   constructor(
     private router: Router,
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts
index e6e01341aa..1565a38193 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts
+++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.ts
@@ -20,8 +20,8 @@ import { Hero } from '../hero';
 })
 // #docregion ctor
 export class HeroListComponent implements OnInit {
-  heroes$: Observable<Hero[]>;
-  selectedId: number;
+  heroes$!: Observable<Hero[]>;
+  selectedId = 0;
 
   constructor(
     private service: HeroService,
@@ -31,8 +31,7 @@ export class HeroListComponent implements OnInit {
   ngOnInit() {
     this.heroes$ = this.route.paramMap.pipe(
       switchMap(params => {
-        // (+) before `params.get()` turns the string into a number
-        this.selectedId = +params.get('id');
+        this.selectedId = parseInt(params.get('id')!, 10);
         return this.service.getHeroes();
       })
     );
diff --git a/aio/content/examples/router/src/app/heroes/hero.service.ts b/aio/content/examples/router/src/app/heroes/hero.service.ts
index 2a85f7511c..79ace7ae29 100644
--- a/aio/content/examples/router/src/app/heroes/hero.service.ts
+++ b/aio/content/examples/router/src/app/heroes/hero.service.ts
@@ -24,7 +24,7 @@ export class HeroService {
   getHero(id: number | string) {
     return this.getHeroes().pipe(
       // (+) before `id` turns the string into a number
-      map((heroes: Hero[]) => heroes.find(hero => hero.id === +id))
+      map((heroes: Hero[]) => heroes.find(hero => hero.id === +id)!)
     );
   }
 }
diff --git a/aio/content/examples/router/src/app/selective-preloading-strategy.service.ts b/aio/content/examples/router/src/app/selective-preloading-strategy.service.ts
index bcbd539d53..c00f94cc56 100644
--- a/aio/content/examples/router/src/app/selective-preloading-strategy.service.ts
+++ b/aio/content/examples/router/src/app/selective-preloading-strategy.service.ts
@@ -10,7 +10,7 @@ export class SelectivePreloadingStrategyService implements PreloadingStrategy {
   preloadedModules: string[] = [];
 
   preload(route: Route, load: () => Observable<any>): Observable<any> {
-    if (route.data && route.data.preload) {
+    if (route.data && route.data.preload && route.path != null) {
       // add the route path to the preloaded module array
       this.preloadedModules.push(route.path);
 
diff --git a/aio/content/examples/rx-library/src/error-handling.spec.ts b/aio/content/examples/rx-library/src/error-handling.spec.ts
index 9dc82b45e8..c358658f74 100644
--- a/aio/content/examples/rx-library/src/error-handling.spec.ts
+++ b/aio/content/examples/rx-library/src/error-handling.spec.ts
@@ -2,12 +2,12 @@ import { Subject, throwError } from 'rxjs';
 import { docRegionDefault } from './error-handling';
 
 describe('error-handling', () => {
-  let mockConsole;
-  let ajaxSubject;
-  let ajax;
+  let consoleSpy: jasmine.SpyObj<Console>;
+  let ajaxSubject: Subject<any>;
+  let ajax: jasmine.Spy;
 
   beforeEach(() => {
-    mockConsole = {log: jasmine.createSpy('log')};
+    consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
     ajaxSubject = new Subject();
     ajax = jasmine
       .createSpy('ajax')
@@ -17,19 +17,19 @@ describe('error-handling', () => {
   afterEach(() => ajaxSubject.unsubscribe());
 
   it('should return the response object', () => {
-    docRegionDefault(mockConsole, ajax);
+    docRegionDefault(consoleSpy, ajax);
 
     ajaxSubject.next({response: {foo: 'bar'}});
-    expect(mockConsole.log.calls.allArgs()).toEqual([
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['data: ', {foo: 'bar'}]
     ]);
   });
 
   it('should return an empty array when using an object without a `response` property', () => {
-    docRegionDefault(mockConsole, ajax);
+    docRegionDefault(consoleSpy, ajax);
 
     ajaxSubject.next({foo: 'bar'});
-    expect(mockConsole.log.calls.allArgs()).toEqual([
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['data: ', []]
     ]);
   });
@@ -37,9 +37,9 @@ describe('error-handling', () => {
   it('should return an empty array when the ajax observable errors', () => {
     ajax.and.returnValue(throwError('Test Error'));
 
-    docRegionDefault(mockConsole, ajax);
+    docRegionDefault(consoleSpy, ajax);
 
-    expect(mockConsole.log.calls.allArgs()).toEqual([
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['data: ', []]
     ]);
   });
diff --git a/aio/content/examples/rx-library/src/error-handling.ts b/aio/content/examples/rx-library/src/error-handling.ts
index 4daca5de8f..2bbc2f875a 100644
--- a/aio/content/examples/rx-library/src/error-handling.ts
+++ b/aio/content/examples/rx-library/src/error-handling.ts
@@ -6,13 +6,13 @@
 /* tslint:disable:no-shadowed-variable */
 /* tslint:disable:align */
 // #docregion
-  import { of } from 'rxjs';
+  import { Observable, of } from 'rxjs';
   import { ajax } from 'rxjs/ajax';
   import { map, catchError } from 'rxjs/operators';
 
 // #enddocregion
 
-export function docRegionDefault(console, ajax) {
+export function docRegionDefault<T>(console: Console, ajax: (url: string) => Observable<T>) {
   // #docregion
   // Return "response" from the API. If an error happens,
   // return an empty array.
@@ -23,12 +23,12 @@ export function docRegionDefault(console, ajax) {
       }
       return res.response;
     }),
-    catchError(err => of([]))
+    catchError(() => of([]))
   );
 
   apiData.subscribe({
-    next(x) { console.log('data: ', x); },
-    error(err) { console.log('errors already caught... will not run'); }
+    next(x: T) { console.log('data: ', x); },
+    error() { console.log('errors already caught... will not run'); }
   });
 
   // #enddocregion
diff --git a/aio/content/examples/rx-library/src/naming-convention.ts b/aio/content/examples/rx-library/src/naming-convention.ts
index 1e337b293a..b94913cbcb 100644
--- a/aio/content/examples/rx-library/src/naming-convention.ts
+++ b/aio/content/examples/rx-library/src/naming-convention.ts
@@ -9,8 +9,8 @@ import { Observable } from 'rxjs';
 })
 export class StopwatchComponent {
 
-  stopwatchValue: number;
-  stopwatchValue$: Observable<number>;
+  stopwatchValue = 0;
+  stopwatchValue$!: Observable<number>;
 
   start() {
     this.stopwatchValue$.subscribe(num =>
diff --git a/aio/content/examples/rx-library/src/operators.1.spec.ts b/aio/content/examples/rx-library/src/operators.1.spec.ts
index 04fb0b8de0..eb31815a93 100644
--- a/aio/content/examples/rx-library/src/operators.1.spec.ts
+++ b/aio/content/examples/rx-library/src/operators.1.spec.ts
@@ -2,10 +2,10 @@ import { docRegionDefault } from './operators.1';
 
 describe('squareOdd - operators.1.ts', () => {
   it('should return square odds', () => {
-    const console = {log: jasmine.createSpy('log')};
-    docRegionDefault(console);
-    expect(console.log).toHaveBeenCalledTimes(3);
-    expect(console.log.calls.allArgs()).toEqual([
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    docRegionDefault(consoleSpy);
+    expect(consoleSpy.log).toHaveBeenCalledTimes(3);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       [1],
       [9],
       [25],
diff --git a/aio/content/examples/rx-library/src/operators.1.ts b/aio/content/examples/rx-library/src/operators.1.ts
index 1ed0293098..6e23d5a4eb 100644
--- a/aio/content/examples/rx-library/src/operators.1.ts
+++ b/aio/content/examples/rx-library/src/operators.1.ts
@@ -10,7 +10,7 @@
 
 // #enddocregion
 
-export function docRegionDefault(console) {
+export function docRegionDefault(console: Console) {
   // #docregion
   const nums = of(1, 2, 3, 4, 5);
 
diff --git a/aio/content/examples/rx-library/src/operators.2.spec.ts b/aio/content/examples/rx-library/src/operators.2.spec.ts
index f9d1d14103..79ccba2503 100644
--- a/aio/content/examples/rx-library/src/operators.2.spec.ts
+++ b/aio/content/examples/rx-library/src/operators.2.spec.ts
@@ -2,10 +2,10 @@ import { docRegionDefault } from './operators.2';
 
 describe('squareOdd - operators.2.ts', () => {
   it('should return square odds', () => {
-    const console = {log: jasmine.createSpy('log')};
-    docRegionDefault(console);
-    expect(console.log).toHaveBeenCalledTimes(3);
-    expect(console.log.calls.allArgs()).toEqual([
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    docRegionDefault(consoleSpy);
+    expect(consoleSpy.log).toHaveBeenCalledTimes(3);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       [1],
       [9],
       [25],
diff --git a/aio/content/examples/rx-library/src/operators.2.ts b/aio/content/examples/rx-library/src/operators.2.ts
index fd792bff99..e4b77d42d9 100644
--- a/aio/content/examples/rx-library/src/operators.2.ts
+++ b/aio/content/examples/rx-library/src/operators.2.ts
@@ -10,7 +10,7 @@
 
 // #enddocregion
 
-export function docRegionDefault(console) {
+export function docRegionDefault(console: Console) {
   // #docregion
   const squareOdd = of(1, 2, 3, 4, 5)
     .pipe(
diff --git a/aio/content/examples/rx-library/src/operators.spec.ts b/aio/content/examples/rx-library/src/operators.spec.ts
index 2842d76806..c6f73d4339 100644
--- a/aio/content/examples/rx-library/src/operators.spec.ts
+++ b/aio/content/examples/rx-library/src/operators.spec.ts
@@ -2,10 +2,10 @@ import { docRegionDefault } from './operators';
 
 describe('squaredNums - operators.ts', () => {
   it('should return square odds', () => {
-    const console = {log: jasmine.createSpy('log')};
-    docRegionDefault(console);
-    expect(console.log).toHaveBeenCalledTimes(3);
-    expect(console.log.calls.allArgs()).toEqual([
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    docRegionDefault(consoleSpy);
+    expect(consoleSpy.log).toHaveBeenCalledTimes(3);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       [1],
       [4],
       [9],
diff --git a/aio/content/examples/rx-library/src/operators.ts b/aio/content/examples/rx-library/src/operators.ts
index d650413c3c..45b6237dfc 100644
--- a/aio/content/examples/rx-library/src/operators.ts
+++ b/aio/content/examples/rx-library/src/operators.ts
@@ -10,7 +10,7 @@
 
 // #enddocregion
 
-export function docRegionDefault(console) {
+export function docRegionDefault(console: Console) {
   // #docregion
   const nums = of(1, 2, 3);
 
diff --git a/aio/content/examples/rx-library/src/retry-on-error.spec.ts b/aio/content/examples/rx-library/src/retry-on-error.spec.ts
index 89b9f3145a..3475e43c4c 100644
--- a/aio/content/examples/rx-library/src/retry-on-error.spec.ts
+++ b/aio/content/examples/rx-library/src/retry-on-error.spec.ts
@@ -3,25 +3,25 @@ import { mergeMap, tap } from 'rxjs/operators';
 import { docRegionDefault } from './retry-on-error';
 
 describe('retry-on-error', () => {
-  let mockConsole;
-  beforeEach(() => mockConsole = { log: jasmine.createSpy('log') });
+  let consoleSpy: jasmine.SpyObj<Console>;
+  beforeEach(() => consoleSpy = jasmine.createSpyObj<Console>('console', ['log']));
 
   it('should return the response object', () => {
     const ajax = () => of({ response: { foo: 'bar' } });
 
-    docRegionDefault(mockConsole, ajax);
-    expect(mockConsole.log.calls.allArgs()).toEqual([
+    docRegionDefault(consoleSpy, ajax);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['data: ', { foo: 'bar' }],
     ]);
   });
 
   it('should return an empty array after 3 retries + 1 initial request', () => {
     const ajax = () => {
-      return of({ noresponse: true }).pipe(tap(() => mockConsole.log('Subscribed to AJAX')));
+      return of({ noresponse: true }).pipe(tap(() => consoleSpy.log('Subscribed to AJAX')));
     };
 
-    docRegionDefault(mockConsole, ajax);
-    expect(mockConsole.log.calls.allArgs()).toEqual([
+    docRegionDefault(consoleSpy, ajax);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['Subscribed to AJAX'],
       ['Error occurred.'],
       ['Subscribed to AJAX'],
@@ -38,7 +38,7 @@ describe('retry-on-error', () => {
     // Fail on the first two requests, but succeed from the 3rd onwards.
     let failCount = 2;
     const ajax = () => of(null).pipe(
-      tap(() => mockConsole.log('Subscribed to AJAX')),
+      tap(() => consoleSpy.log('Subscribed to AJAX')),
       // Fail on the first 2 requests, but succeed from the 3rd onwards.
       mergeMap(() => {
         if (failCount > 0) {
@@ -49,8 +49,8 @@ describe('retry-on-error', () => {
       }),
     );
 
-    docRegionDefault(mockConsole, ajax);
-    expect(mockConsole.log.calls.allArgs()).toEqual([
+    docRegionDefault(consoleSpy, ajax);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['Subscribed to AJAX'],  // Initial request   | 1st attempt overall
       ['Subscribed to AJAX'],  // 1st retry attempt | 2nd attempt overall
       ['Subscribed to AJAX'],  // 2nd retry attempt | 3rd attempt overall
@@ -61,8 +61,8 @@ describe('retry-on-error', () => {
   it('should return an empty array when the ajax observable throws an error', () => {
     const ajax = () => throwError('Test Error');
 
-    docRegionDefault(mockConsole, ajax);
-    expect(mockConsole.log.calls.allArgs()).toEqual([
+    docRegionDefault(consoleSpy, ajax);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['data: ', []],
     ]);
   });
diff --git a/aio/content/examples/rx-library/src/retry-on-error.ts b/aio/content/examples/rx-library/src/retry-on-error.ts
index eaa8539379..44dae103c3 100644
--- a/aio/content/examples/rx-library/src/retry-on-error.ts
+++ b/aio/content/examples/rx-library/src/retry-on-error.ts
@@ -6,13 +6,13 @@
 /* tslint:disable:no-shadowed-variable */
 /* tslint:disable:align */
 // #docregion
-  import { of } from 'rxjs';
+  import { Observable, of } from 'rxjs';
   import { ajax } from 'rxjs/ajax';
   import { map, retry, catchError } from 'rxjs/operators';
 
 // #enddocregion
 
-export function docRegionDefault(console, ajax) {
+export function docRegionDefault<T>(console: Console, ajax: (url: string) => Observable<T>) {
   // #docregion
   const apiData = ajax('/api/data').pipe(
     map((res: any) => {
@@ -23,12 +23,12 @@ export function docRegionDefault(console, ajax) {
       return res.response;
     }),
     retry(3), // Retry up to 3 times before failing
-    catchError(err => of([]))
+    catchError(() => of([]))
   );
 
   apiData.subscribe({
-    next(x) { console.log('data: ', x); },
-    error(err) { console.log('errors already caught... will not run'); }
+    next(x: T) { console.log('data: ', x); },
+    error() { console.log('errors already caught... will not run'); }
   });
 
   // #enddocregion
diff --git a/aio/content/examples/rx-library/src/simple-creation.1.spec.ts b/aio/content/examples/rx-library/src/simple-creation.1.spec.ts
index 8c2944dd44..278b053f6c 100644
--- a/aio/content/examples/rx-library/src/simple-creation.1.spec.ts
+++ b/aio/content/examples/rx-library/src/simple-creation.1.spec.ts
@@ -3,10 +3,10 @@ import { docRegionPromise } from './simple-creation.1';
 
 describe('simple-creation.1', () => {
   it('should create a promise from an observable and return an empty object', () => {
-    const console = {log: jasmine.createSpy('log')};
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
     const fetch = () => of({foo: 42});
-    docRegionPromise(console, fetch);
-    expect(console.log.calls.allArgs()).toEqual([
+    docRegionPromise(consoleSpy, fetch);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       [{foo: 42}],
       ['Completed'],
     ]);
diff --git a/aio/content/examples/rx-library/src/simple-creation.1.ts b/aio/content/examples/rx-library/src/simple-creation.1.ts
index 6388b18cc0..1c89b5c916 100644
--- a/aio/content/examples/rx-library/src/simple-creation.1.ts
+++ b/aio/content/examples/rx-library/src/simple-creation.1.ts
@@ -5,11 +5,11 @@
 */
 /* tslint:disable:align */
 // #docregion promise
-  import { from } from 'rxjs';
+  import { from, Observable } from 'rxjs';
 
 // #enddocregion promise
 
-export function docRegionPromise(console, fetch) {
+export function docRegionPromise<T>(console: Console, fetch: (url: string) => Observable<T>) {
   // #docregion promise
   // Create an Observable out of a promise
   const data = from(fetch('/api/endpoint'));
diff --git a/aio/content/examples/rx-library/src/simple-creation.2.spec.ts b/aio/content/examples/rx-library/src/simple-creation.2.spec.ts
index 4716482a48..f35e21bd1f 100644
--- a/aio/content/examples/rx-library/src/simple-creation.2.spec.ts
+++ b/aio/content/examples/rx-library/src/simple-creation.2.spec.ts
@@ -5,17 +5,17 @@ describe('simple-creation.2', () => {
   afterEach(() => jasmine.clock().uninstall());
 
   it('should create an Observable that will publish a value on an interval', () => {
-    const console = {log: jasmine.createSpy('log')};
-    const subscription = docRegionInterval(console);
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
+    const subscription = docRegionInterval(consoleSpy);
     jasmine.clock().tick(1000);
-    expect(console.log).toHaveBeenCalledWith('It\'s been 1 seconds since subscribing!');
-    console.log.calls.reset();
+    expect(consoleSpy.log).toHaveBeenCalledWith('It\'s been 1 seconds since subscribing!');
+    consoleSpy.log.calls.reset();
 
     jasmine.clock().tick(999);
-    expect(console.log).not.toHaveBeenCalled();
+    expect(consoleSpy.log).not.toHaveBeenCalled();
 
     jasmine.clock().tick(1);
-    expect(console.log).toHaveBeenCalledWith('It\'s been 2 seconds since subscribing!');
+    expect(consoleSpy.log).toHaveBeenCalledWith('It\'s been 2 seconds since subscribing!');
     subscription.unsubscribe();
   });
 });
diff --git a/aio/content/examples/rx-library/src/simple-creation.2.ts b/aio/content/examples/rx-library/src/simple-creation.2.ts
index fb186d693b..a34ad70eee 100644
--- a/aio/content/examples/rx-library/src/simple-creation.2.ts
+++ b/aio/content/examples/rx-library/src/simple-creation.2.ts
@@ -9,7 +9,7 @@
 
 // #enddocregion interval
 
-export function docRegionInterval(console) {
+export function docRegionInterval(console: Console) {
   // #docregion interval
   // Create an Observable that will publish a value on an interval
   const secondsCounter = interval(1000);
diff --git a/aio/content/examples/rx-library/src/simple-creation.3.spec.ts b/aio/content/examples/rx-library/src/simple-creation.3.spec.ts
index 7c1ed586a4..3d3182c5cc 100644
--- a/aio/content/examples/rx-library/src/simple-creation.3.spec.ts
+++ b/aio/content/examples/rx-library/src/simple-creation.3.spec.ts
@@ -1,13 +1,13 @@
 import { docRegionEvent } from './simple-creation.3';
 
 describe('simple-creation.3', () => {
-  let triggerMousemove;
-  let mockConsole;
-  let input;
-  let mockDocument;
+  let triggerMousemove: (event: Partial<MouseEvent>) => void;
+  let consoleSpy: jasmine.SpyObj<Console>;
+  let input: HTMLInputElement;
+  let mockDocument: Document;
 
   beforeEach(() => {
-    mockConsole = {log: jasmine.createSpy('log')};
+    consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
     input = {
       addEventListener: jasmine
         .createSpy('addEventListener')
@@ -17,20 +17,20 @@ describe('simple-creation.3', () => {
           }
         }),
       removeEventListener: jasmine.createSpy('removeEventListener'),
-    };
-    mockDocument = { getElementById: () => input };
+    } as unknown as HTMLInputElement;
+    mockDocument = { getElementById: () => input } as unknown as Document;
   });
 
   it('should log coords when subscribing', () => {
-    docRegionEvent(mockConsole, mockDocument);
+    docRegionEvent(consoleSpy, mockDocument);
 
-    expect(mockConsole.log).not.toHaveBeenCalled();
+    expect(consoleSpy.log).not.toHaveBeenCalled();
 
     triggerMousemove({ clientX: 50, clientY: 50 });
     triggerMousemove({ clientX: 30, clientY: 50 });
     triggerMousemove({ clientX: 50, clientY: 30 });
-    expect(mockConsole.log).toHaveBeenCalledTimes(3);
-    expect(mockConsole.log.calls.allArgs()).toEqual([
+    expect(consoleSpy.log).toHaveBeenCalledTimes(3);
+    expect(consoleSpy.log.calls.allArgs()).toEqual([
       ['Coords: 50 X 50'],
       ['Coords: 30 X 50'],
       ['Coords: 50 X 30']
@@ -38,16 +38,16 @@ describe('simple-creation.3', () => {
   });
 
   it('should call unsubscribe when clientX and clientY are below < 40 ', () => {
-    docRegionEvent(mockConsole, mockDocument);
+    docRegionEvent(consoleSpy, mockDocument);
 
-    expect(mockConsole.log).not.toHaveBeenCalled();
+    expect(consoleSpy.log).not.toHaveBeenCalled();
 
     // Ensure that we have unsubscribed.
     triggerMousemove({ clientX: 30, clientY: 30 });
     expect(input.removeEventListener).toHaveBeenCalledWith('mousemove', triggerMousemove, undefined);
-    mockConsole.log.calls.reset();
+    consoleSpy.log.calls.reset();
 
     triggerMousemove({ clientX: 50, clientY: 50 });
-    expect(mockConsole.log).not.toHaveBeenCalled();
+    expect(consoleSpy.log).not.toHaveBeenCalled();
   });
 });
diff --git a/aio/content/examples/rx-library/src/simple-creation.3.ts b/aio/content/examples/rx-library/src/simple-creation.3.ts
index 63a3651727..869f7d2f85 100644
--- a/aio/content/examples/rx-library/src/simple-creation.3.ts
+++ b/aio/content/examples/rx-library/src/simple-creation.3.ts
@@ -9,15 +9,15 @@
 
 // #enddocregion event
 
-export function docRegionEvent(console, document) {
+export function docRegionEvent(console: Console, document: Document) {
   // #docregion event
-  const el = document.getElementById('my-element');
+  const el = document.getElementById('my-element')!;
 
   // Create an Observable that will publish mouse movements
-  const mouseMoves = fromEvent(el, 'mousemove');
+  const mouseMoves = fromEvent<MouseEvent>(el, 'mousemove');
 
   // Subscribe to start listening for mouse-move events
-  const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
+  const subscription = mouseMoves.subscribe(evt => {
     // Log coords of mouse movements
     console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
 
diff --git a/aio/content/examples/rx-library/src/simple-creation.spec.ts b/aio/content/examples/rx-library/src/simple-creation.spec.ts
index 8de9a846e2..270130478b 100644
--- a/aio/content/examples/rx-library/src/simple-creation.spec.ts
+++ b/aio/content/examples/rx-library/src/simple-creation.spec.ts
@@ -3,12 +3,12 @@ import { docRegionAjax } from './simple-creation';
 
 describe('ajax', () => {
   it('should make a request and console log the status and response', () => {
-    const console = {log: jasmine.createSpy('log')};
+    const consoleSpy = jasmine.createSpyObj<Console>('console', ['log']);
     const ajax = jasmine.createSpy('ajax').and.callFake((url: string) => {
       return of({status: 200, response: 'foo bar'});
     });
 
-    docRegionAjax(console, ajax);
-    expect(console.log).toHaveBeenCalledWith(200, 'foo bar');
+    docRegionAjax(consoleSpy, ajax);
+    expect(consoleSpy.log).toHaveBeenCalledWith(200, 'foo bar');
   });
 });
diff --git a/aio/content/examples/rx-library/src/simple-creation.ts b/aio/content/examples/rx-library/src/simple-creation.ts
index bc2ef49994..6c17522387 100644
--- a/aio/content/examples/rx-library/src/simple-creation.ts
+++ b/aio/content/examples/rx-library/src/simple-creation.ts
@@ -6,11 +6,13 @@
 /* tslint:disable:no-shadowed-variable */
 /* tslint:disable:align */
 // #docregion ajax
+  import { Observable } from 'rxjs';
   import { ajax } from 'rxjs/ajax';
 
 // Create an Observable that will create an AJAX request
 // #enddocregion ajax
-export function docRegionAjax(console, ajax) {
+export function docRegionAjax<T>(console: Console,
+                                 ajax: (url: string) => Observable<{status: number, response: T}>) {
   // #docregion ajax
   const apiData = ajax('/api/data');
   // Subscribe to create the request
diff --git a/aio/content/examples/security/src/app/bypass-security.component.ts b/aio/content/examples/security/src/app/bypass-security.component.ts
index 7858db96c1..ce7191b593 100644
--- a/aio/content/examples/security/src/app/bypass-security.component.ts
+++ b/aio/content/examples/security/src/app/bypass-security.component.ts
@@ -10,8 +10,8 @@ import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browse
 export class BypassSecurityComponent {
   dangerousUrl: string;
   trustedUrl: SafeUrl;
-  dangerousVideoUrl: string;
-  videoUrl: SafeResourceUrl;
+  dangerousVideoUrl!: string;
+  videoUrl!: SafeResourceUrl;
 
   // #docregion trust-url
   constructor(private sanitizer: DomSanitizer) {
diff --git a/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts b/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
index 9e3e56012e..3d2ea87bae 100755
--- a/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
+++ b/aio/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
+import { SwUpdate, UpdateAvailableEvent } from '@angular/service-worker';
 
-function promptUser(event): boolean {
+function promptUser(event: UpdateAvailableEvent): boolean {
   return true;
 }
 
diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html
index 9fd74b2098..e39e74e5c3 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.html
+++ b/aio/content/examples/structural-directives/src/app/app.component.html
@@ -138,25 +138,25 @@
 <h4>NgSwitch</h4>
 
 <div [ngSwitch]="hero?.emotion">
-  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
-  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
-  <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
-  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero!"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero!"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero!"></app-confused-hero>
+  <app-unknown-hero  *ngSwitchDefault           [hero]="hero!"></app-unknown-hero>
 </div>
 
 <h4>NgSwitch with &lt;ng-template&gt;</h4>
 <div [ngSwitch]="hero?.emotion">
   <ng-template [ngSwitchCase]="'happy'">
-    <app-happy-hero [hero]="hero"></app-happy-hero>
+    <app-happy-hero [hero]="hero!"></app-happy-hero>
   </ng-template>
   <ng-template [ngSwitchCase]="'sad'">
-    <app-sad-hero [hero]="hero"></app-sad-hero>
+    <app-sad-hero [hero]="hero!"></app-sad-hero>
   </ng-template>
   <ng-template [ngSwitchCase]="'confused'">
-    <app-confused-hero [hero]="hero"></app-confused-hero>
+    <app-confused-hero [hero]="hero!"></app-confused-hero>
   </ng-template >
   <ng-template ngSwitchDefault>
-    <app-unknown-hero [hero]="hero"></app-unknown-hero>
+    <app-unknown-hero [hero]="hero!"></app-unknown-hero>
   </ng-template>
 </div>
 
diff --git a/aio/content/examples/structural-directives/src/app/app.component.ts b/aio/content/examples/structural-directives/src/app/app.component.ts
index c30efc576a..4855cac6fd 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.ts
+++ b/aio/content/examples/structural-directives/src/app/app.component.ts
@@ -9,7 +9,7 @@ import { Hero, heroes } from './hero';
 })
 export class AppComponent {
   heroes = heroes;
-  hero = this.heroes[0];
+  hero: Hero | null = this.heroes[0];
   // #docregion condition
   condition = false;
   // #enddocregion condition
diff --git a/aio/content/examples/structural-directives/src/app/hero-switch.components.ts b/aio/content/examples/structural-directives/src/app/hero-switch.components.ts
index 27bf8de8d5..c779c32655 100644
--- a/aio/content/examples/structural-directives/src/app/hero-switch.components.ts
+++ b/aio/content/examples/structural-directives/src/app/hero-switch.components.ts
@@ -7,7 +7,7 @@ import { Hero } from './hero';
   template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
 })
 export class HappyHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -15,7 +15,7 @@ export class HappyHeroComponent {
   template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
 })
 export class SadHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -23,7 +23,7 @@ export class SadHeroComponent {
   template: `Are you as confused as {{hero.name}}?`
 })
 export class ConfusedHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -31,7 +31,7 @@ export class ConfusedHeroComponent {
   template: `{{message}}`
 })
 export class UnknownHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
   get message() {
     return this.hero && this.hero.name ?
       `${this.hero.name} is strange and mysterious.` :
diff --git a/aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts b/aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts
index fffe4bf0b7..2fb0e9c0f4 100644
--- a/aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts
+++ b/aio/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts
@@ -8,7 +8,7 @@ import { Component, EventEmitter, Output } from '@angular/core';
 export class FilterTextComponent {
   @Output() changed: EventEmitter<string>;
 
-  filter: string;
+  filter = '';
 
   constructor() {
     this.changed = new EventEmitter<string>();
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
index cb8a416102..f0015c3f36 100644
--- a/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
+++ b/aio/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
@@ -13,7 +13,7 @@ import { SpinnerState, SpinnerService } from './spinner.service';
 export class SpinnerComponent implements OnDestroy, OnInit {
   visible = false;
 
-  private spinnerStateChanged: Subscription;
+  private spinnerStateChanged!: Subscription;
 
   constructor(
     private loggerService: LoggerService,
diff --git a/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
index b0064be1b2..a2c8c263c8 100644
--- a/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
+++ b/aio/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
@@ -8,7 +8,7 @@ import { SpinnerService } from '../core/spinner/spinner.service';
   templateUrl: './heroes.component.html'
 })
 export class HeroesComponent {
-  heroes: any[];
+  heroes: any[] = [];
 
   constructor(
     private loggerService: LoggerService,
diff --git a/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
index f84b16c140..0ff5e81d35 100644
--- a/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
+++ b/aio/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
@@ -7,7 +7,7 @@ import { LoggerService } from '../core/logger.service';
   templateUrl: './heroes.component.html'
 })
 export class HeroesComponent {
-  heroes: any[];
+  heroes: any[] = [];
 
   constructor(private loggerService: LoggerService) { }
 
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
index eaa59a752d..ab95062ce7 100644
--- a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { Hero, HeroService } from './shared';
@@ -54,13 +54,11 @@ import { Hero, HeroService } from './shared';
     }
   `]
 })
-export class HeroesComponent implements OnInit {
+export class HeroesComponent {
   heroes: Observable<Hero[]>;
-  selectedHero: Hero;
+  selectedHero!: Hero;
 
- constructor(private heroService: HeroService) { }
-
-  ngOnInit() {
+  constructor(private heroService: HeroService) {
     this.heroes = this.heroService.getHeroes();
   }
 }
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
index 4d6ae1aee6..f0bbe09e86 100644
--- a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { Hero, HeroService } from './shared';
@@ -9,13 +9,11 @@ import { Hero, HeroService } from './shared';
   templateUrl: './heroes.component.html',
   styleUrls:  ['./heroes.component.css']
 })
-export class HeroesComponent implements OnInit {
+export class HeroesComponent {
   heroes: Observable<Hero[]>;
-  selectedHero: Hero;
+  selectedHero!: Hero;
 
- constructor(private heroService: HeroService) { }
-
-  ngOnInit() {
+  constructor(private heroService: HeroService) {
     this.heroes = this.heroService.getHeroes();
   }
 }
diff --git a/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
index cd7414d7be..66bbaefa47 100644
--- a/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/aio/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
@@ -8,6 +8,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 })
 export class HeroButtonComponent {
   @Output() heroChange = new EventEmitter<any>();
-  @Input() label: string;
+  @Input() label = '';
 }
 // #enddocregion example
diff --git a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
index f71aa71cfa..2163e6d100 100644
--- a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
@@ -9,6 +9,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 export class HeroButtonComponent {
   // No aliases
   @Output() heroChange = new EventEmitter<any>();
-  @Input() label: string;
+  @Input() label = '';
 }
 // #enddocregion example
diff --git a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
index 3af48d241e..a7152277d6 100644
--- a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
+++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
@@ -6,7 +6,7 @@ import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
 export class HeroHighlightDirective implements OnChanges {
 
   // Aliased because `color` is a better property name than `heroHighlight`
-  @Input('heroHighlight') color: string;
+  @Input('heroHighlight') color = '';
 
   constructor(private el: ElementRef) {}
 
diff --git a/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
index d7b8ea4af0..25bd6c395a 100644
--- a/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
+++ b/aio/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
@@ -8,8 +8,8 @@ import { Component, OnInit } from '@angular/core';
 // #docregion example
 export class ToastComponent implements OnInit {
   // public properties
-  message: string;
-  title: string;
+  message = '';
+  title = '';
 
   // private fields
   private defaults = {
diff --git a/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts
index 1fdb893c13..15e0c9f876 100644
--- a/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts
+++ b/aio/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts
@@ -8,7 +8,7 @@ import { Hero, HeroService } from '../shared';
   template: `...`
 })
 export class HeroListComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Hero[] = [];
   constructor(private heroService: HeroService) {}
   getHeroes() {
     this.heroes = [];
diff --git a/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts
index 5f18cc5b0c..a3904abbe0 100644
--- a/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts
@@ -19,7 +19,7 @@ import { Hero } from '../shared/hero.model';
 })
 export class HeroListComponent {
   heroes: Hero[];
-  totalPowers: number;
+  totalPowers = 0;
 
   // #enddocregion example
   // testing harness
diff --git a/aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts b/aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
index 334f836a7d..095358d2c8 100644
--- a/aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
+++ b/aio/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
@@ -7,7 +7,7 @@ import { Hero } from '../shared/hero.model';
   template: `...`
 })
 export class HeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 
diff --git a/aio/content/examples/styleguide/src/07-01/app/app.component.ts b/aio/content/examples/styleguide/src/07-01/app/app.component.ts
index 354b0ec303..50c86e91bf 100644
--- a/aio/content/examples/styleguide/src/07-01/app/app.component.ts
+++ b/aio/content/examples/styleguide/src/07-01/app/app.component.ts
@@ -8,7 +8,7 @@ import { Hero, HeroService } from './heroes';
   providers: [HeroService]
 })
 export class AppComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Hero[] = [];
 
   constructor(private heroService: HeroService) { }
 
diff --git a/aio/content/examples/template-expression-operators/src/app/app.component.ts b/aio/content/examples/template-expression-operators/src/app/app.component.ts
index 18258c59be..31e19a207e 100644
--- a/aio/content/examples/template-expression-operators/src/app/app.component.ts
+++ b/aio/content/examples/template-expression-operators/src/app/app.component.ts
@@ -23,7 +23,7 @@ export class AppComponent {
     price: 98,
   };
 
-  nullItem = null;
+  nullItem: Item | null = null;
 
 }
 
diff --git a/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts b/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts
index 9adeed1dae..3fb0af1811 100644
--- a/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts
@@ -4,7 +4,7 @@ describe('Template-reference-variables-example', () => {
   beforeEach(() => browser.get(''));
 
   // helper function used to test what's logged to the console
-  async function logChecker(contents) {
+  async function logChecker(contents: string) {
     const logs = await browser
       .manage()
       .logs()
diff --git a/aio/content/examples/template-reference-variables/src/app/app.component.ts b/aio/content/examples/template-reference-variables/src/app/app.component.ts
index 3ed03c8d82..655dec01bd 100644
--- a/aio/content/examples/template-reference-variables/src/app/app.component.ts
+++ b/aio/content/examples/template-reference-variables/src/app/app.component.ts
@@ -39,7 +39,7 @@ export class AppComponent {
 
   {{ ref.value }}`;
 
-  @ViewChild('itemForm', { static: false }) form: NgForm;
+  @ViewChild('itemForm', { static: false }) form!: NgForm;
 
   get submitMessage() { return this._submitMessage; }
   private _submitMessage = '';  // tslint:disable-line: variable-name
diff --git a/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts
index 784e1f6696..57707a346f 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.ts
+++ b/aio/content/examples/template-syntax/src/app/app.component.ts
@@ -28,8 +28,8 @@ export class AppComponent implements AfterViewInit, OnInit {
     trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
   }
 
-  @ViewChildren('noTrackBy')   heroesNoTrackBy: QueryList<ElementRef>;
-  @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList<ElementRef>;
+  @ViewChildren('noTrackBy')   heroesNoTrackBy!: QueryList<ElementRef>;
+  @ViewChildren('withTrackBy') heroesWithTrackBy!: QueryList<ElementRef>;
 
   actionName = 'Go for it';
   badCurly = 'bad curly';
@@ -63,7 +63,7 @@ export class AppComponent implements AfterViewInit, OnInit {
   color = Color.Red;
   colorToggle() {this.color = (this.color === Color.Red) ? Color.Blue : Color.Red; }
 
-  currentHero: Hero;
+  currentHero!: Hero;
 
   updateCurrentHeroName(event: Event) {
     this.currentHero.name = (event.target as any).value;
@@ -81,9 +81,9 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   getVal(): number { return 2; }
 
-  name: string = Hero.heroes[0].name;
-  hero: Hero; // defined to demonstrate template context precedence
-  heroes: Hero[];
+  name: string = Hero.heroes[0].name || '';
+  hero!: Hero; // defined to demonstrate template context precedence
+  heroes: Hero[] = [];
 
   // trackBy change counting
   heroesNoTrackByCount   = 0;
@@ -104,7 +104,7 @@ export class AppComponent implements AfterViewInit, OnInit {
   isSpecial = true;
   isUnchanged = true;
 
-  get nullHero(): Hero { return null; }
+  get nullHero(): Hero | null { return null; }
 
   onClickMe(event?: MouseEvent) {
     const evtMsg = event ? ' Event target class is ' + (event.target as HTMLElement).className  : '';
@@ -136,7 +136,7 @@ export class AppComponent implements AfterViewInit, OnInit {
     this.currentHero.name = name.toUpperCase();
   }
 
-  currentClasses: {};
+  currentClasses: Record<string, boolean> = {};
   setCurrentClasses() {
     // CSS classes: added/removed per current state of component properties
     this.currentClasses =  {
@@ -146,7 +146,7 @@ export class AppComponent implements AfterViewInit, OnInit {
     };
   }
 
-  currentStyles: {};
+  currentStyles: Record<string, string> = {};
   setCurrentStyles() {
     // CSS styles: set per current state of component properties
     this.currentStyles = {
diff --git a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
index 1ec221c35f..a0be4dbe20 100644
--- a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
@@ -14,13 +14,13 @@ import { Hero } from './hero';
   <div>
     <img src="{{heroImageUrl}}">
     <span [style.text-decoration]="lineThrough">
-      {{prefix}} {{hero?.name}}
+      {{prefix}} {{hero.name}}
     </span>
     <button (click)="delete()">Delete</button>
   </div>`
 })
 export class HeroDetailComponent {
-  hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
+  hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
   // heroImageUrl = 'https://wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
   // Public Domain terms of use: https://wpclipart.com/terms.html
   heroImageUrl = 'assets/images/hero.png';
@@ -41,12 +41,12 @@ export class HeroDetailComponent {
   template: `
   <div class="detail">
     <img src="{{heroImageUrl}}">
-    <div><b>{{hero?.name}}</b></div>
-    <div>Name: {{hero?.name}}</div>
-    <div>Emotion: {{hero?.emotion}}</div>
-    <div>Birthdate: {{hero?.birthdate | date:'longDate'}}</div>
-    <div>Web: <a href="{{hero?.url}}" target="_blank">{{hero?.url}}</a></div>
-    <div>Rate/hr: {{hero?.rate | currency:'EUR'}}</div>
+    <div><b>{{hero.name}}</b></div>
+    <div>Name: {{hero.name}}</div>
+    <div>Emotion: {{hero.emotion}}</div>
+    <div>Birthdate: {{hero.birthdate | date:'longDate'}}</div>
+    <div>Web: <a href="{{hero.url}}" target="_blank">{{hero.url}}</a></div>
+    <div>Rate/hr: {{hero.rate | currency:'EUR'}}</div>
     <br clear="all">
     <button (click)="delete()">Delete</button>
   </div>
@@ -58,7 +58,7 @@ export class HeroDetailComponent {
 })
 export class BigHeroDetailComponent extends HeroDetailComponent {
 
-  @Input()  hero: Hero;
+  @Input() hero!: Hero;
   @Output() deleteRequest = new EventEmitter<Hero>();
 
   delete() {
diff --git a/aio/content/examples/template-syntax/src/app/hero-form.component.ts b/aio/content/examples/template-syntax/src/app/hero-form.component.ts
index 0c52e73f55..673a93e023 100644
--- a/aio/content/examples/template-syntax/src/app/hero-form.component.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-form.component.ts
@@ -12,8 +12,8 @@ import { Hero } from './hero';
   `]
 })
 export class HeroFormComponent {
-  @Input() hero: Hero;
-  @ViewChild('heroForm') form: NgForm;
+  @Input() hero!: Hero;
+  @ViewChild('heroForm') form!: NgForm;
 
   // tslint:disable-next-line:variable-name
   private _submitMessage = '';
diff --git a/aio/content/examples/template-syntax/src/app/hero-switch.components.ts b/aio/content/examples/template-syntax/src/app/hero-switch.components.ts
index d2a2dcc7cc..34ab073c3b 100644
--- a/aio/content/examples/template-syntax/src/app/hero-switch.components.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-switch.components.ts
@@ -6,7 +6,7 @@ import { Hero } from './hero';
   template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
 })
 export class HappyHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -14,7 +14,7 @@ export class HappyHeroComponent {
   template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
 })
 export class SadHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -22,7 +22,7 @@ export class SadHeroComponent {
   template: `Are you as confused as {{hero.name}}?`
 })
 export class ConfusedHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
 
 @Component({
@@ -30,7 +30,7 @@ export class ConfusedHeroComponent {
   template: `{{message}}`
 })
 export class UnknownHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
   get message() {
     return this.hero && this.hero.name ?
       `${this.hero.name} is strange and mysterious.` :
diff --git a/aio/content/examples/template-syntax/src/app/hero.ts b/aio/content/examples/template-syntax/src/app/hero.ts
index add9b335bd..8d5e970142 100644
--- a/aio/content/examples/template-syntax/src/app/hero.ts
+++ b/aio/content/examples/template-syntax/src/app/hero.ts
@@ -3,7 +3,7 @@ export class Hero {
 
   static heroes: Hero[] = [
     new Hero(
-      null,
+      0,
       'Hercules',
       'happy',
       new Date(1970, 1, 25),
@@ -18,15 +18,13 @@ export class Hero {
 
 
   constructor(
-    public id?: number,
+    public id = Hero.nextId++,
     public name?: string,
     public emotion?: string,
     public birthdate?: Date,
     public url?: string,
     public rate = 100,
-    ) {
-    this.id = id ? id : Hero.nextId++;
-  }
+    ) {}
 
   clone(): Hero {
     return Object.assign(new Hero(), this);
diff --git a/aio/content/examples/template-syntax/src/app/sizer.component.ts b/aio/content/examples/template-syntax/src/app/sizer.component.ts
index 3cb45a77da..c4443ede51 100644
--- a/aio/content/examples/template-syntax/src/app/sizer.component.ts
+++ b/aio/content/examples/template-syntax/src/app/sizer.component.ts
@@ -11,7 +11,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   </div>`
 })
 export class SizerComponent {
-  @Input()  size: number | string;
+  @Input()  size!: number | string;
   @Output() sizeChange = new EventEmitter<number>();
 
   dec() { this.resize(-1); }
diff --git a/aio/content/examples/testing/e2e/src/app.e2e-spec.ts b/aio/content/examples/testing/e2e/src/app.e2e-spec.ts
index d458faa747..4d7246b83f 100644
--- a/aio/content/examples/testing/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/testing/e2e/src/app.e2e-spec.ts
@@ -17,7 +17,7 @@ describe('Testing Example', () => {
   });
 
   it(`has views ${expectedViewNames}`, async () => {
-    const viewNames = await getPageElts().navElts.map(el => el.getText());
+    const viewNames = await getPageElts().navElts.map(el => el!.getText());
 
     expect(viewNames).toEqual(expectedViewNames);
   });
diff --git a/aio/content/examples/testing/src/app/app.component.router.spec.ts b/aio/content/examples/testing/src/app/app.component.router.spec.ts
index d094c0fef9..5dedff8e3b 100644
--- a/aio/content/examples/testing/src/app/app.component.router.spec.ts
+++ b/aio/content/examples/testing/src/app/app.component.router.spec.ts
@@ -159,7 +159,6 @@ class Page {
 
   // for debugging
   comp: AppComponent;
-  location: SpyLocation;
   router: Router;
   fixture: ComponentFixture<AppComponent>;
 
diff --git a/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
index 6ded93febf..7ff7da0d8b 100644
--- a/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
+++ b/aio/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
@@ -84,7 +84,7 @@ describe('BannerComponent (with beforeEach)', () => {
     // #docregion nativeElement
     const bannerElement: HTMLElement = fixture.nativeElement;
     // #enddocregion nativeElement
-    const p = bannerElement.querySelector('p');
+    const p = bannerElement.querySelector('p')!;
     expect(p.textContent).toEqual('banner works!');
   });
   // #enddocregion v4-test-3
@@ -96,7 +96,7 @@ describe('BannerComponent (with beforeEach)', () => {
     const bannerDe: DebugElement = fixture.debugElement;
     const bannerEl: HTMLElement = bannerDe.nativeElement;
     // #enddocregion debugElement-nativeElement
-    const p = bannerEl.querySelector('p');
+    const p = bannerEl.querySelector('p')!;
     expect(p.textContent).toEqual('banner works!');
   });
   // #enddocregion v4-test-4
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
index 9eae3ede14..ff040f83f6 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
@@ -68,7 +68,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
   // #docregion click-test
   it('should raise selected event when clicked (triggerEventHandler)', () => {
-    let selectedHero: Hero;
+    let selectedHero: Hero | undefined;
     comp.selected.subscribe((hero: Hero) => selectedHero = hero);
 
     // #docregion trigger-event-handler
@@ -80,7 +80,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
   // #docregion click-test-2
   it('should raise selected event when clicked (element.click)', () => {
-    let selectedHero: Hero;
+    let selectedHero: Hero | undefined;
     comp.selected.subscribe((hero: Hero) => selectedHero = hero);
 
     heroEl.click();
@@ -90,7 +90,7 @@ describe('DashboardHeroComponent when tested directly', () => {
 
   // #docregion click-test-3
   it('should raise selected event when clicked (click helper)', () => {
-    let selectedHero: Hero;
+    let selectedHero: Hero | undefined;
     comp.selected.subscribe((hero: Hero) => selectedHero = hero);
 
     click(heroDe);  // click helper with DebugElement
@@ -152,7 +152,7 @@ import { Component } from '@angular/core';
 })
 class TestHostComponent {
   hero: Hero = {id: 42, name: 'Test Name'};
-  selectedHero: Hero;
+  selectedHero: Hero | undefined;
   onSelected(hero: Hero) {
     this.selectedHero = hero;
   }
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
index ca1ff573bf..c124255873 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
@@ -14,7 +14,7 @@ import { Hero } from '../model/hero';
 })
 // #docregion class
 export class DashboardHeroComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
   @Output() selected = new EventEmitter<Hero>();
   click() { this.selected.emit(this.hero); }
 }
diff --git a/aio/content/examples/testing/src/app/demo/async-helper.spec.ts b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
index 7b48af2c87..c05cf9f59d 100644
--- a/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts
@@ -133,11 +133,11 @@ describe('Angular async helper', () => {
     it('should get Date diff correctly in fakeAsync with rxjs scheduler', fakeAsync(() => {
          // need to add `import 'zone.js/plugins/zone-patch-rxjs-fake-async'
          // to patch rxjs scheduler
-         let result = null;
+         let result = '';
          of('hello').pipe(delay(1000)).subscribe(v => {
            result = v;
          });
-         expect(result).toBeNull();
+         expect(result).toBe('');
          tick(1000);
          expect(result).toBe('hello');
 
diff --git a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
index c1e1145945..a7cb1eefef 100644
--- a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
@@ -60,7 +60,7 @@ describe('demo (with TestBed):', () => {
 
     it('can inject a default value when service is not provided', () => {
       // #docregion testbed-get-w-null
-      service = TestBed.inject(NotProvided, null); // service is null
+      expect(TestBed.inject(NotProvided, null)).toBeNull();
       // #enddocregion testbed-get-w-null
     });
 
@@ -464,7 +464,7 @@ describe('demo (with TestBed):', () => {
         })
         .createComponent(TestComponent);
 
-      let testBedProvider: ValueService;
+      let testBedProvider!: ValueService;
       let tcProvider: ValueService;
       let tpcProvider: FakeValueService;
 
diff --git a/aio/content/examples/testing/src/app/demo/demo.ts b/aio/content/examples/testing/src/app/demo/demo.ts
index d1a4ac826c..617c9b1bec 100644
--- a/aio/content/examples/testing/src/app/demo/demo.ts
+++ b/aio/content/examples/testing/src/app/demo/demo.ts
@@ -62,8 +62,8 @@ export class ReversePipe implements PipeTransform {
  `
 })
 export class BankAccountComponent {
-  @Input() bank: string;
-  @Input('account') id: string;
+  @Input() bank = '';
+  @Input('account') id = '';
 
   // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
   // constructor(private renderer: Renderer, private el: ElementRef ) {
@@ -118,7 +118,7 @@ export class Child1Component {
   template: '<div>Child-2({{text}})</div>'
 })
 export class Child2Component {
-  @Input() text: string;
+  @Input() text = '';
 }
 
 @Component({
@@ -126,7 +126,7 @@ export class Child2Component {
   template: '<div>Child-3({{text}})</div>'
 })
 export class Child3Component {
-  @Input() text: string;
+  @Input() text = '';
 }
 
 @Component({
@@ -187,7 +187,7 @@ export class ParentComponent { }
   template: `<div class="hero" (click)="click()">Original {{hero.name}}</div>`
 })
 export class IoComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
   @Output() selected = new EventEmitter<Hero>();
   click() { this.selected.emit(this.hero); }
 }
@@ -206,7 +206,7 @@ export class IoComponent {
 })
 export class IoParentComponent {
   heroes: Hero[] = [ {name: 'Bob'}, {name: 'Carol'}, {name: 'Ted'}, {name: 'Alice'} ];
-  selectedHero: Hero;
+  selectedHero!: Hero;
   onSelect(hero: Hero) { this.selectedHero = hero; }
 }
 
@@ -242,7 +242,7 @@ export class TestViewProvidersComponent {
   templateUrl: './demo-external-template.html'
 })
 export class ExternalTemplateComponent implements OnInit {
-  serviceValue: string;
+  serviceValue = '';
 
   constructor(@Optional() private service?: ValueService) {  }
 
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
index 0d60864a16..deee62725e 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -23,7 +23,7 @@ export class HeroDetailComponent implements OnInit {
   // #enddocregion ctor
 // #enddocregion prototype
 
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 
   // #docregion ng-on-init
   ngOnInit(): void {
@@ -32,7 +32,7 @@ export class HeroDetailComponent implements OnInit {
   }
   // #enddocregion ng-on-init
 
-  private getHero(id: string): void {
+  private getHero(id: string | null): void {
     // when no id or id===0, create new blank hero
     if (!id) {
       this.hero = { id: 0, name: '' } as Hero;
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
index 82861fe5c7..8010f7ce09 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
@@ -13,7 +13,7 @@ export class HeroDetailService {
 // #enddocregion prototype
 
   // Returns a clone which caller may modify safely
-  getHero(id: number | string): Observable<Hero> {
+  getHero(id: number | string): Observable<Hero | null> {
     if (typeof id === 'string') {
       id = parseInt(id, 10);
     }
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
index 5839e666bd..d1294010cc 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { Observable } from 'rxjs';
@@ -11,15 +11,13 @@ import { HeroService } from '../model/hero.service';
   templateUrl: './hero-list.component.html',
   styleUrls: [ './hero-list.component.css' ]
 })
-export class HeroListComponent implements OnInit {
+export class HeroListComponent {
   heroes: Observable<Hero[]>;
-  selectedHero: Hero;
+  selectedHero!: Hero;
 
   constructor(
     private router: Router,
-    private heroService: HeroService) { }
-
-  ngOnInit() {
+    private heroService: HeroService) {
     this.heroes = this.heroService.getHeroes();
   }
 
diff --git a/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
index 01f6f05308..79571d8545 100644
--- a/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
+++ b/aio/content/examples/testing/src/app/model/testing/test-hero.service.ts
@@ -22,11 +22,13 @@ import { getTestHeroes } from './test-heroes';
 export class TestHeroService extends HeroService {
 
   constructor() {
-    super(null);
+    // This is a fake testing service that won't be making HTTP
+    // requests so we can pass in `null` as the HTTP client.
+    super(null!);
   }
 
   heroes = getTestHeroes();
-  lastResult: Observable<any>; // result from last method call
+  lastResult!: Observable<any>; // result from last method call
 
   addHero(hero: Hero): Observable<Hero> {
     throw new Error('Method not implemented.');
@@ -45,7 +47,8 @@ export class TestHeroService extends HeroService {
       id = parseInt(id, 10);
     }
     const hero = this.heroes.find(h => h.id === id);
-    return this.lastResult = asyncData(hero);
+    this.lastResult = asyncData(hero);
+    return this.lastResult;
   }
 
   updateHero(hero: Hero): Observable<Hero> {
diff --git a/aio/content/examples/testing/src/app/shared/canvas.component.ts b/aio/content/examples/testing/src/app/shared/canvas.component.ts
index c118af2a91..b9ef0ee834 100644
--- a/aio/content/examples/testing/src/app/shared/canvas.component.ts
+++ b/aio/content/examples/testing/src/app/shared/canvas.component.ts
@@ -14,18 +14,18 @@ import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 })
 export class CanvasComponent implements AfterViewInit {
   blobSize = 0;
-  @ViewChild('sampleCanvas') sampleCanvas: ElementRef;
+  @ViewChild('sampleCanvas') sampleCanvas!: ElementRef;
 
   ngAfterViewInit() {
     const canvas: HTMLCanvasElement = this.sampleCanvas.nativeElement;
-    const context = canvas.getContext('2d');
+    const context = canvas.getContext('2d')!;
 
     context.clearRect(0, 0, 200, 200);
     context.fillStyle = '#FF1122';
     context.fillRect(0, 0, 200, 200);
 
     canvas.toBlob(blob => {
-      this.blobSize = blob.size;
+      this.blobSize = blob?.size ?? 0;
     });
   }
 }
diff --git a/aio/content/examples/testing/src/app/shared/highlight.directive.ts b/aio/content/examples/testing/src/app/shared/highlight.directive.ts
index 465c39cd09..6961a44a87 100644
--- a/aio/content/examples/testing/src/app/shared/highlight.directive.ts
+++ b/aio/content/examples/testing/src/app/shared/highlight.directive.ts
@@ -11,7 +11,7 @@ export class HighlightDirective implements OnChanges {
 
   defaultColor =  'rgb(211, 211, 211)'; // lightgray
 
-  @Input('highlight') bgColor: string;
+  @Input('highlight') bgColor = '';
 
   constructor(private el: ElementRef) {
     el.nativeElement.style.customProperty = true;
diff --git a/aio/content/examples/testing/src/app/twain/quote.ts b/aio/content/examples/testing/src/app/twain/quote.ts
index 803cae0f60..293b134880 100644
--- a/aio/content/examples/testing/src/app/twain/quote.ts
+++ b/aio/content/examples/testing/src/app/twain/quote.ts
@@ -1,4 +1,4 @@
-export class Quote {
+export interface Quote {
   id: number;
   quote: string;
 }
diff --git a/aio/content/examples/testing/src/app/twain/twain.component.ts b/aio/content/examples/testing/src/app/twain/twain.component.ts
index eca6364f65..cb7037b388 100644
--- a/aio/content/examples/testing/src/app/twain/twain.component.ts
+++ b/aio/content/examples/testing/src/app/twain/twain.component.ts
@@ -20,8 +20,8 @@ import { TwainService } from './twain.service';
 
 })
 export class TwainComponent implements OnInit {
-  errorMessage: string;
-  quote: Observable<string>;
+  errorMessage!: string;
+  quote!: Observable<string>;
 
   constructor(private twainService: TwainService) {}
 
diff --git a/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
index 076f4c7405..e12e61c265 100644
--- a/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.spec.ts
@@ -32,7 +32,7 @@ describe('WelcomeComponent (class only)', () => {
 
   // #docregion class-only-tests
   it('should not have welcome message after construction', () => {
-    expect(comp.welcome).toBeUndefined();
+    expect(comp.welcome).toBe('');
   });
 
   it('should welcome logged in user after Angular calls ngOnInit', () => {
diff --git a/aio/content/examples/testing/src/app/welcome/welcome.component.ts b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
index 3bf225c7fd..20d4c63084 100644
--- a/aio/content/examples/testing/src/app/welcome/welcome.component.ts
+++ b/aio/content/examples/testing/src/app/welcome/welcome.component.ts
@@ -8,7 +8,7 @@ import { UserService } from '../model/user.service';
 })
 // #docregion class
 export class WelcomeComponent implements OnInit {
-  welcome: string;
+  welcome = '';
   constructor(private userService: UserService) { }
 
   ngOnInit(): void {
diff --git a/aio/content/examples/testing/src/main-specs.ts b/aio/content/examples/testing/src/main-specs.ts
index 6e7170ca47..c6f2aed805 100644
--- a/aio/content/examples/testing/src/main-specs.ts
+++ b/aio/content/examples/testing/src/main-specs.ts
@@ -2,7 +2,7 @@ import './testing/global-jasmine';
 import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
 import 'jasmine-core/lib/jasmine-core/boot.js';
 
-declare var jasmine;
+declare var jasmine: any;
 
 import './polyfills';
 
@@ -28,7 +28,7 @@ function bootstrap() {
     location.reload();
     return;
   } else {
-    window.onload(undefined);
+    window.onload?.({} as Event);
     (window as any).jasmineRef = jasmine.getEnv();
   }
 
diff --git a/aio/content/examples/testing/src/testing/jasmine.d.ts b/aio/content/examples/testing/src/testing/jasmine.d.ts
new file mode 100644
index 0000000000..4bd2b0815c
--- /dev/null
+++ b/aio/content/examples/testing/src/testing/jasmine.d.ts
@@ -0,0 +1 @@
+declare module 'jasmine-core/lib/jasmine-core/jasmine.js';
diff --git a/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts
index b9724c090e..dd644829bd 100644
--- a/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts
@@ -4,8 +4,7 @@ const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `${expectedH1}`;
 
 class Hero {
-  id: number;
-  name: string;
+  constructor(public id: number, public name: string) {}
 
   // Factory method
   // Get hero id and name from the given detail element.
@@ -14,10 +13,10 @@ class Hero {
     const id = await detail.all(by.css('div')).first().getText();
     // Get name from the h2
     const name = await detail.element(by.css('h2')).getText();
-    return {
-      id: +id.substr(id.indexOf(' ') + 1),
-      name: name.substr(0, name.lastIndexOf(' '))
-    };
+    return new Hero(
+      +id.substr(id.indexOf(' ') + 1),
+      name.substr(0, name.lastIndexOf(' '))
+    );
   }
 }
 
diff --git a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
index edf3b10fc6..9a25932f36 100644
--- a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
@@ -7,17 +7,16 @@ const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
 
 class Hero {
-  id: number;
-  name: string;
+  constructor(public id: number, public name: string) {}
 
   // Factory methods
 
   // Get hero from s formatted as '<id> <name>'.
   static fromString(s: string): Hero {
-    return {
-      id: +s.substr(0, s.indexOf(' ')),
-      name: s.substr(s.indexOf(' ') + 1),
-    };
+    return new Hero(
+      +s.substr(0, s.indexOf(' ')),
+      s.substr(s.indexOf(' ') + 1),
+    );
   }
 
   // Get hero id and name from the given detail element.
@@ -26,10 +25,10 @@ class Hero {
     const id = await detail.all(by.css('div')).first().getText();
     // Get name from the h2
     const name = await detail.element(by.css('h2')).getText();
-    return {
-      id: +id.substr(id.indexOf(' ') + 1),
-      name: name.substr(0, name.lastIndexOf(' '))
-    };
+    return new Hero(
+      +id.substr(id.indexOf(' ') + 1),
+      name.substr(0, name.lastIndexOf(' '))
+    );
   }
 }
 
diff --git a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
index b312ec9e67..bcc7dee50d 100644
--- a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
@@ -7,17 +7,16 @@ const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
 
 class Hero {
-  id: number;
-  name: string;
+  constructor(public id: number, public name: string) {}
 
   // Factory methods
 
   // Get hero from s formatted as '<id> <name>'.
   static fromString(s: string): Hero {
-    return {
-      id: +s.substr(0, s.indexOf(' ')),
-      name: s.substr(s.indexOf(' ') + 1),
-    };
+    return new Hero(
+      +s.substr(0, s.indexOf(' ')),
+      s.substr(s.indexOf(' ') + 1),
+    );
   }
 
   // Get hero id and name from the given detail element.
@@ -26,10 +25,10 @@ class Hero {
     const id = await detail.all(by.css('div')).first().getText();
     // Get name from the h2
     const name = await detail.element(by.css('h2')).getText();
-    return {
-      id: +id.substr(id.indexOf(' ') + 1),
-      name: name.substr(0, name.lastIndexOf(' '))
-    };
+    return new Hero(
+      +id.substr(id.indexOf(' ') + 1),
+      name.substr(0, name.lastIndexOf(' '))
+    );
   }
 }
 
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts
index 35462026c7..38601b8b45 100644
--- a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.ts
@@ -11,7 +11,7 @@ export class HeroesComponent implements OnInit {
 
   heroes = HEROES;
 
-  selectedHero: Hero;
+  selectedHero!: Hero;
 
   constructor() { }
 
diff --git a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
index 450d520246..eba88f2700 100644
--- a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
@@ -7,17 +7,16 @@ const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
 
 class Hero {
-  id: number;
-  name: string;
+  constructor(public id: number, public name: string) {}
 
   // Factory methods
 
   // Get hero from s formatted as '<id> <name>'.
   static fromString(s: string): Hero {
-    return {
-      id: +s.substr(0, s.indexOf(' ')),
-      name: s.substr(s.indexOf(' ') + 1),
-    };
+    return new Hero(
+      +s.substr(0, s.indexOf(' ')),
+      s.substr(s.indexOf(' ') + 1),
+    );
   }
 
   // Get hero id and name from the given detail element.
@@ -26,10 +25,10 @@ class Hero {
     const id = await detail.all(by.css('div')).first().getText();
     // Get name from the h2
     const name = await detail.element(by.css('h2')).getText();
-    return {
-      id: +id.substr(id.indexOf(' ') + 1),
-      name: name.substr(0, name.lastIndexOf(' '))
-    };
+    return new Hero(
+      +id.substr(id.indexOf(' ') + 1),
+      name.substr(0, name.lastIndexOf(' '))
+    );
   }
 }
 
@@ -80,12 +79,14 @@ function selectHeroTests() {
 
   it('shows selected hero details', async () => {
     const page = getPageElts();
-    const message = await getMessage();
+    const heroElement = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    await heroElement.click();
+    const message = element.all(by.css('app-root > app-messages > div > div')).get(1);
     const hero = await Hero.fromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name.toUpperCase());
     // Message text contain id number matches the hero.id number
-    expect(await message.getText()).toContain(hero.id);
+    expect(await message.getText()).toContain(await heroElement.getAttribute('id'));
   });
 }
 
@@ -131,9 +132,3 @@ function getPageElts() {
     heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
   };
 }
-
-async function getMessage() {
-  const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
-  await hero.click();
-  return element.all(by.css('app-root > app-messages > div > div')).get(1);
-}
diff --git a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
index 383013bf3d..e941dcc6a0 100644
--- a/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.ts
@@ -8,7 +8,7 @@ import { Hero } from '../hero';
 })
 export class HeroDetailComponent implements OnInit {
 
-  @Input() hero: Hero;
+  @Input() hero: Hero | undefined;
 
   constructor() { }
 
diff --git a/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
index 62320d7845..f468423eae 100644
--- a/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
@@ -8,17 +8,16 @@ const nameSuffix = 'X';
 const newHeroName = targetHero.name + nameSuffix;
 
 class Hero {
-  id: number;
-  name: string;
+  constructor(public id: number, public name: string) {}
 
   // Factory methods
 
   // Get hero from s formatted as '<id> <name>'.
   static fromString(s: string): Hero {
-    return {
-      id: +s.substr(0, s.indexOf(' ')),
-      name: s.substr(s.indexOf(' ') + 1),
-    };
+    return new Hero(
+      +s.substr(0, s.indexOf(' ')),
+      s.substr(s.indexOf(' ') + 1),
+    );
   }
 
   // Get hero id and name from the given detail element.
@@ -67,7 +66,7 @@ describe('Tutorial part 5', () => {
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
     it(`has views ${expectedViewNames}`, async () => {
-      const viewNames = await getPageElts().navElts.map(el => el.getText());
+      const viewNames = await getPageElts().navElts.map(el => el!.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
index dc6439a4bd..fca4e6ace6 100644
--- a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.ts
@@ -17,7 +17,7 @@ import { HeroService } from '../hero.service';
   styleUrls: [ './hero-detail.component.css' ]
 })
 export class HeroDetailComponent implements OnInit {
-  hero: Hero;
+  hero: Hero | undefined;
 
   // #docregion ctor
   constructor(
diff --git a/aio/content/examples/toh-pt5/src/app/hero.service.ts b/aio/content/examples/toh-pt5/src/app/hero.service.ts
index 4cdf959945..8584f0bdc1 100644
--- a/aio/content/examples/toh-pt5/src/app/hero.service.ts
+++ b/aio/content/examples/toh-pt5/src/app/hero.service.ts
@@ -21,7 +21,7 @@ export class HeroService {
   getHero(id: number): Observable<Hero> {
     // For now, assume that a hero with the specified `id` always exists.
     // Error handling will be added in the next step of the tutorial.
-    const hero = HEROES.find(h => h.id === id) as Hero;
+    const hero = HEROES.find(h => h.id === id)!;
     this.messageService.add(`HeroService: fetched hero id=${id}`);
     return of(hero);
   }
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts
index 3a893ba554..9b997ac806 100644
--- a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.ts
@@ -10,7 +10,7 @@ import { HeroService } from '../hero.service';
 })
 // #docregion class
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Hero[] = [];
 
   constructor(private heroService: HeroService) { }
 
diff --git a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
index 0f579dda7d..a4c38affba 100644
--- a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
@@ -8,17 +8,16 @@ const nameSuffix = 'X';
 const newHeroName = targetHero.name + nameSuffix;
 
 class Hero {
-  id: number;
-  name: string;
+  constructor(public id: number, public name: string) {}
 
   // Factory methods
 
   // Hero from string formatted as '<id> <name>'.
   static fromString(s: string): Hero {
-    return {
-      id: +s.substr(0, s.indexOf(' ')),
-      name: s.substr(s.indexOf(' ') + 1),
-    };
+    return new Hero(
+      +s.substr(0, s.indexOf(' ')),
+      s.substr(s.indexOf(' ') + 1),
+    );
   }
 
   // Hero from hero list <li> element.
@@ -79,7 +78,7 @@ describe('Tutorial part 6', () => {
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
     it(`has views ${expectedViewNames}`, async () => {
-      const viewNames = await getPageElts().navElts.map(el => el.getText());
+      const viewNames = await getPageElts().navElts.map(el => el!.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 
@@ -298,5 +297,5 @@ function getHeroLiEltById(id: number): ElementFinder {
 }
 
 async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
-  return allHeroes.map(Hero.fromLi);
+  return allHeroes.map(hero => Hero.fromLi(hero!));
 }
diff --git a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
index 7fb248d94b..c65e0fa9ee 100644
--- a/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
+++ b/aio/content/examples/toh-pt6/src/app/dashboard/dashboard.component.spec.ts
@@ -12,7 +12,7 @@ describe('DashboardComponent', () => {
   let component: DashboardComponent;
   let fixture: ComponentFixture<DashboardComponent>;
   let heroService;
-  let getHeroesSpy;
+  let getHeroesSpy: jasmine.Spy;
 
   beforeEach(waitForAsync(() => {
     heroService = jasmine.createSpyObj('HeroService', ['getHeroes']);
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts
index 8c3eab261a..4d06df16da 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.ts
@@ -11,7 +11,7 @@ import { HeroService } from '../hero.service';
   styleUrls: [ './hero-detail.component.css' ]
 })
 export class HeroDetailComponent implements OnInit {
-  hero: Hero;
+  hero: Hero | undefined;
 
   constructor(
     private route: ActivatedRoute,
@@ -24,7 +24,7 @@ export class HeroDetailComponent implements OnInit {
   }
 
   getHero(): void {
-    const id = +this.route.snapshot.paramMap.get('id');
+    const id = parseInt(this.route.snapshot.paramMap.get('id')!, 10);
     this.heroService.getHero(id)
       .subscribe(hero => this.hero = hero);
   }
@@ -35,8 +35,10 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion save
   save(): void {
-    this.heroService.updateHero(this.hero)
-      .subscribe(() => this.goBack());
+    if (this.hero) {
+      this.heroService.updateHero(this.hero)
+        .subscribe(() => this.goBack());
+    }
   }
   // #enddocregion save
 }
diff --git a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
index 0214d99377..c61309bc4c 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
+++ b/aio/content/examples/toh-pt6/src/app/hero-search/hero-search.component.ts
@@ -18,7 +18,7 @@ import { HeroService } from '../hero.service';
 })
 export class HeroSearchComponent implements OnInit {
   // #docregion heroes-stream
-  heroes$: Observable<Hero[]>;
+  heroes$!: Observable<Hero[]>;
   // #enddocregion heroes-stream
   // #docregion searchTerms
   private searchTerms = new Subject<string>();
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
index 5826d8ace8..b51c01cbab 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.ts
@@ -9,7 +9,7 @@ import { HeroService } from '../hero.service';
   styleUrls: ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Hero[] = [];
 
   constructor(private heroService: HeroService) { }
 
diff --git a/aio/content/examples/tslint.json b/aio/content/examples/tslint.json
index 7fab808e71..40f2273a04 100644
--- a/aio/content/examples/tslint.json
+++ b/aio/content/examples/tslint.json
@@ -56,7 +56,7 @@
       true,
       "ignore-params"
     ],
-    "no-non-null-assertion": true,
+    "no-non-null-assertion": false,
     "no-redundant-jsdoc": true,
     "no-switch-case-fall-through": true,
     "no-var-requires": false,
diff --git a/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.ts b/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.ts
index 51503f40d6..764f5d49f2 100644
--- a/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.ts
+++ b/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.ts
@@ -8,7 +8,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 // #docregion sizer-component
 export class SizerComponent {
 
-  @Input()  size: number | string;
+  @Input()  size!: number | string;
   @Output() sizeChange = new EventEmitter<number>();
 
   dec() { this.resize(-1); }
diff --git a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
index 7992cb36ba..d8c0a226e5 100644
--- a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
@@ -1,17 +1,16 @@
 import { browser, by, element, ElementArrayFinder, ElementFinder, logging } from 'protractor';
 
 class Hero {
-  id: number;
-  name: string;
+  constructor(public id: number, public name: string) {}
 
   // Factory methods
 
   // Hero from string formatted as '<id> <name>'.
   static fromString(s: string): Hero {
-    return {
-      id: +s.substr(0, s.indexOf(' ')),
-      name: s.substr(s.indexOf(' ') + 1),
-    };
+    return new Hero(
+      +s.substr(0, s.indexOf(' ')),
+      s.substr(s.indexOf(' ') + 1),
+    );
   }
 
   // Hero from hero list <li> element.
@@ -62,7 +61,7 @@ describe('Universal', () => {
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
     it(`has views ${expectedViewNames}`, async () => {
-      const viewNames = await getPageElts().navElts.map(el => el.getText());
+      const viewNames = await getPageElts().navElts.map(el => el!.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 
@@ -285,7 +284,7 @@ describe('Universal', () => {
   }
 
   async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
-    return await allHeroes.map(Hero.fromLi);
+    return await allHeroes.map(hero => Hero.fromLi(hero!));
   }
 
   async function updateHeroNameInDetailView(): Promise<void> {
diff --git a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.ts
index 6382af82bc..37b54d0363 100644
--- a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.ts
@@ -11,7 +11,7 @@ import { HeroService } from '../hero.service';
   styleUrls: [ './hero-detail.component.css' ]
 })
 export class HeroDetailComponent implements OnInit {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 
   constructor(
     private route: ActivatedRoute,
@@ -24,7 +24,7 @@ export class HeroDetailComponent implements OnInit {
   }
 
   getHero(): void {
-    const id = +this.route.snapshot.paramMap.get('id');
+    const id = parseInt(this.route.snapshot.paramMap.get('id')!, 10);
     this.heroService.getHero(id)
       .subscribe(hero => this.hero = hero);
   }
diff --git a/aio/content/examples/universal/src/app/hero-search/hero-search.component.ts b/aio/content/examples/universal/src/app/hero-search/hero-search.component.ts
index 91a2c9fd45..a6f2afc085 100644
--- a/aio/content/examples/universal/src/app/hero-search/hero-search.component.ts
+++ b/aio/content/examples/universal/src/app/hero-search/hero-search.component.ts
@@ -15,7 +15,7 @@ import { HeroService } from '../hero.service';
   styleUrls: [ './hero-search.component.css' ]
 })
 export class HeroSearchComponent implements OnInit {
-  heroes$: Observable<Hero[]>;
+  heroes$!: Observable<Hero[]>;
   private searchTerms = new Subject<string>();
 
   constructor(private heroService: HeroService) {}
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.ts b/aio/content/examples/universal/src/app/heroes/heroes.component.ts
index 813f807d29..0a13c55a07 100644
--- a/aio/content/examples/universal/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.ts
@@ -9,7 +9,7 @@ import { HeroService } from '../hero.service';
   styleUrls: ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Hero[] = [];
 
   constructor(private heroService: HeroService) { }
 
diff --git a/aio/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts b/aio/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts
index 51eed5229c..35fa604243 100644
--- a/aio/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts
+++ b/aio/content/examples/upgrade-lazy-load-ajs/src/app/angularjs-app/index.ts
@@ -5,7 +5,8 @@ const appModule = angular.module('myApp', [
   'ngRoute'
 ])
 .config(['$routeProvider', '$locationProvider',
-  function config($routeProvider, $locationProvider) {
+  function config($routeProvider: angular.route.IRouteProvider,
+                  $locationProvider: angular.ILocationProvider) {
     $locationProvider.html5Mode(true);
 
     $routeProvider.
diff --git a/aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts b/aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts
index 40ffc6e4a1..b464ef27c5 100644
--- a/aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts
+++ b/aio/content/examples/upgrade-lazy-load-ajs/src/app/lazy-loader.service.ts
@@ -5,7 +5,7 @@ import * as angular from 'angular';
   providedIn: 'root'
 })
 export class LazyLoaderService {
-  private app: angular.auto.IInjectorService;
+  private app: angular.auto.IInjectorService | undefined;
 
   load(el: HTMLElement): void {
     import('./angularjs-app').then(app => {
diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
index f8292434f2..b6d6b27b4b 100644
--- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts
@@ -22,7 +22,7 @@ import { Hero } from '../hero';
   selector: 'hero-detail'
 })
 export class HeroDetailDirective extends UpgradeComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 
   constructor(elementRef: ElementRef, injector: Injector) {
     super('heroDetail', elementRef, injector);
diff --git a/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts
index 7a2956eb26..0f517c9105 100644
--- a/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/ajs-to-a-projection/hero-detail.component.ts
@@ -12,5 +12,5 @@ import { Hero } from '../hero';
   `
 })
 export class HeroDetailComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
 }
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
index 94082813fd..f3fe755f31 100644
--- a/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
@@ -11,7 +11,7 @@ import { Hero } from '../hero';
   `
 })
 export class HeroDetailComponent {
-  @Input() hero: Hero;
+  @Input() hero!: Hero;
   @Output() deleted = new EventEmitter<Hero>();
   onDelete() {
     this.deleted.emit(this.hero);
diff --git a/aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts b/aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts
index cdcd35a273..fdbe1cc6f5 100644
--- a/aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/what-is-angular/e2e/src/app.e2e-spec.ts
@@ -16,7 +16,7 @@ describe('What is Angular', () => {
   beforeEach(() => browser.get(''));
 
   // helper function to test what's logged to the console
-  async function logChecker(contents) {
+  async function logChecker(contents: string) {
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
     const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false);
     expect(messages.length).toBeGreaterThan(0);
@@ -55,7 +55,7 @@ describe('What is Angular', () => {
   // Test for DI section
   it('should log the count', async () => {
     await diButton.click();
-    await logChecker(0);
+    await logChecker('0');
   });
 
 });
diff --git a/aio/tools/examples/shared/boilerplate/cli/tsconfig.json b/aio/tools/examples/shared/boilerplate/cli/tsconfig.json
index a3be1a775f..94a24fe1e0 100644
--- a/aio/tools/examples/shared/boilerplate/cli/tsconfig.json
+++ b/aio/tools/examples/shared/boilerplate/cli/tsconfig.json
@@ -5,8 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    // TODO(gkalpak): Fix the code and enable this.
-    // "strict": true,
+    "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
diff --git a/aio/tools/examples/shared/boilerplate/cli/tslint.json b/aio/tools/examples/shared/boilerplate/cli/tslint.json
index 7fab808e71..40f2273a04 100644
--- a/aio/tools/examples/shared/boilerplate/cli/tslint.json
+++ b/aio/tools/examples/shared/boilerplate/cli/tslint.json
@@ -56,7 +56,7 @@
       true,
       "ignore-params"
     ],
-    "no-non-null-assertion": true,
+    "no-non-null-assertion": false,
     "no-redundant-jsdoc": true,
     "no-switch-case-fall-through": true,
     "no-var-requires": false,