refactor(docs-infra): fix docs examples for tslint rules related to object properties (#38143)

This commit updates the docs examples to be compatible with the `no-string-literal`, `object-literal-key-quotes` and `object-literal-shorthand` tslint rules. This is in preparation of updating the docs examples `tslint.json` to match the one generated for new Angular CLI apps in a future commit. PR Close #38143
2020-07-30 13:03:14 +03:00 · 2020-07-30 13:03:14 +03:00 · 8aa29438ac
parent fc709423f2
commit 8aa29438ac
44 changed files with 78 additions and 88 deletions
--- a/aio/content/examples/animations/src/app/app.component.ts
+++ b/aio/content/examples/animations/src/app/app.component.ts
@ -34,7 +34,7 @@ export class AppComponent {

 // #docregion prepare-router-outlet
  prepareRoute(outlet: RouterOutlet) {
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }

 // #enddocregion prepare-router-outlet
--- a/aio/content/examples/built-in-directives/src/app/app.component.ts
+++ b/aio/content/examples/built-in-directives/src/app/app.component.ts
@ -46,9 +46,9 @@ export class AppComponent implements OnInit {
  setCurrentClasses() {
    // CSS classes: added/removed per current state of component properties
    this.currentClasses =  {
-      'saveable': this.canSave,
-      'modified': !this.isUnchanged,
-      'special':  this.isSpecial
+      saveable: this.canSave,
+      modified: !this.isUnchanged,
+      special:  this.isSpecial
    };
  }
  // #enddocregion setClasses
@ -107,7 +107,7 @@ export class AppComponent implements OnInit {
  trackByItems(index: number, item: Item): number { return item.id; }
 // #enddocregion trackByItems

-  trackById(index: number, item: any): number { return item['id']; }
+  trackById(index: number, item: any): number { return item.id; }

 }

--- a/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts
@ -111,8 +111,8 @@ describe('Component Communication Cookbook Tests', () => {
      let logs = ul.all(by.tagName('li'));

      return {
-        label: label,
-        logs: logs,
+        label,
+        logs,
        count: logs.count()
      };
    }
--- a/aio/content/examples/component-interaction/src/app/app.module.ts
+++ b/aio/content/examples/component-interaction/src/app/app.module.ts
@ -49,6 +49,6 @@ if (!/e2e/.test(location.search)) {
  ],
  declarations: directives,
  bootstrap: [ AppComponent ],
-  schemas: schemas
+  schemas
 })
 export class AppModule { }
--- a/aio/content/examples/dependency-injection/src/app/providers.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/providers.component.ts
@ -18,7 +18,7 @@ const template = '{{log}}';

@Component({
  selector: 'provider-1',
-  template: template,
+  template,
  // #docregion providers-1, providers-logger
  providers: [Logger]
  // #enddocregion providers-1, providers-logger
@ -35,7 +35,7 @@ export class Provider1Component {

@Component({
  selector: 'provider-3',
-  template: template,
+  template,
  providers:
    // #docregion providers-3
    [{ provide: Logger, useClass: Logger }]
@ -54,7 +54,7 @@ export class BetterLogger extends Logger {}

@Component({
  selector: 'provider-4',
-  template: template,
+  template,
  providers:
    // #docregion providers-4
    [{ provide: Logger, useClass: BetterLogger }]
@ -84,7 +84,7 @@ export class EvenBetterLogger extends Logger {

@Component({
  selector: 'provider-5',
-  template: template,
+  template,
  providers:
    // #docregion providers-5
    [ UserService,
@ -112,7 +112,7 @@ export class OldLogger {

@Component({
  selector: 'provider-6a',
-  template: template,
+  template,
  providers:
    // #docregion providers-6a
    [ NewLogger,
@ -135,7 +135,7 @@ export class Provider6aComponent {

@Component({
  selector: 'provider-6b',
-  template: template,
+  template,
  providers:
    // #docregion providers-6b
    [ NewLogger,
@ -168,7 +168,7 @@ export const SilentLogger = {

@Component({
  selector: 'provider-7',
-  template: template,
+  template,
  providers:
    // #docregion providers-7
    [{ provide: Logger, useValue: SilentLogger }]
@ -186,7 +186,7 @@ export class Provider7Component {

@Component({
  selector: 'provider-8',
-  template: template,
+  template,
  providers: [heroServiceProvider, Logger, UserService]
 })
 export class Provider8Component {
@ -202,7 +202,7 @@ export class Provider8Component {

@Component({
  selector: 'provider-9',
-  template: template,
+  template,
  /*
   // #docregion providers-9-interface
   // FAIL! Can't use interface as provider token
@ -241,7 +241,7 @@ let some_message = 'Hello from the injected logger';

@Component({
  selector: 'provider-10',
-  template: template,
+  template,
  providers: [{ provide: Logger, useValue: null }]
 })
 export class Provider10Component implements OnInit {
--- a/aio/content/examples/dynamic-form/src/app/question-base.ts
+++ b/aio/content/examples/dynamic-form/src/app/question-base.ts
@ -10,13 +10,14 @@ export class QuestionBase<T> {
  options: {key: string, value: string}[];

  constructor(options: {
-      value?: T,
-      key?: string,
-      label?: string,
-      required?: boolean,
-      order?: number,
-      controlType?: string,
-      type?: string
+      value?: T;
+      key?: string;
+      label?: string;
+      required?: boolean;
+      order?: number;
+      controlType?: string;
+      type?: string;
+      options?: {key: string, value: string}[];
    } = {}) {
    this.value = options.value;
    this.key = options.key || '';
@ -25,5 +26,6 @@ export class QuestionBase<T> {
    this.order = options.order === undefined ? 1 : options.order;
    this.controlType = options.controlType || '';
    this.type = options.type || '';
+    this.options = options.options || [];
  }
 }
--- a/aio/content/examples/dynamic-form/src/app/question-dropdown.ts
+++ b/aio/content/examples/dynamic-form/src/app/question-dropdown.ts
@ -3,10 +3,4 @@ import { QuestionBase } from './question-base';

 export class DropdownQuestion extends QuestionBase<string> {
  controlType = 'dropdown';
-  options: {key: string, value: string}[] = [];
-
-  constructor(options: {} = {}) {
-    super(options);
-    this.options = options['options'] || [];
-  }
 }
--- a/aio/content/examples/dynamic-form/src/app/question-textbox.ts
+++ b/aio/content/examples/dynamic-form/src/app/question-textbox.ts
@ -3,10 +3,4 @@ import { QuestionBase } from './question-base';

 export class TextboxQuestion extends QuestionBase<string> {
  controlType = 'textbox';
-  type: string;
-
-  constructor(options: {} = {}) {
-    super(options);
-    this.type = options['type'] || '';
-  }
 }
--- a/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts
@ -54,7 +54,7 @@ function getPage(sectionTag: string) {
  let buttons = section.all(by.css('button'));

  page = {
-    section: section,
+    section,
    form: section.element(by.css('form')),
    title: section.element(by.css('h1')),
    nameInput: section.element(by.css('#name')),
--- a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.1.ts
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.1.ts
@ -22,13 +22,13 @@ export class HeroFormReactiveComponent implements OnInit {
  ngOnInit(): void {
    // #docregion custom-validator
    this.heroForm = new FormGroup({
-      'name': new FormControl(this.hero.name, [
+      name: new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
      ]),
-      'alterEgo': new FormControl(this.hero.alterEgo),
-      'power': new FormControl(this.hero.power, Validators.required)
+      alterEgo: new FormControl(this.hero.alterEgo),
+      power: new FormControl(this.hero.power, Validators.required)
    });
    // #enddocregion custom-validator

--- a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.2.ts
@ -22,16 +22,16 @@ export class HeroFormReactiveComponent implements OnInit {
  ngOnInit(): void {
    // #docregion async-validation
    this.heroForm = new FormGroup({
-      'name': new FormControl(this.hero.name, [
+      name: new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        forbiddenNameValidator(/bob/i)
      ]),
-      'alterEgo': new FormControl(this.hero.alterEgo, {
+      alterEgo: new FormControl(this.hero.alterEgo, {
        asyncValidators: [this.alterEgoValidator.validate.bind(this.alterEgoValidator)],
        updateOn: 'blur'
      }),
-      'power': new FormControl(this.hero.power, Validators.required)
+      power: new FormControl(this.hero.power, Validators.required)
    });
    // #enddocregion async-validation
  }
--- 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
@ -21,16 +21,16 @@ export class HeroFormReactiveComponent implements OnInit {

  ngOnInit(): void {
    this.heroForm = new FormGroup({
-      'name': new FormControl(this.hero.name, [
+      name: new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        forbiddenNameValidator(/bob/i)
      ]),
-      'alterEgo': new FormControl(this.hero.alterEgo, {
+      alterEgo: new FormControl(this.hero.alterEgo, {
        asyncValidators: [this.alterEgoValidator.validate.bind(this.alterEgoValidator)],
        updateOn: 'blur'
      }),
-      'power': new FormControl(this.hero.power, Validators.required)
+      power: new FormControl(this.hero.power, Validators.required)
    },  { validators: identityRevealedValidator }); // <-- add custom validator at the FormGroup level
  }

--- 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
@ -7,7 +7,7 @@ import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } fr
 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
-    return forbidden ? {'forbiddenName': {value: control.value}} : null;
+    return forbidden ? {forbiddenName: {value: control.value}} : null;
  };
 }
 // #enddocregion custom-validator
--- 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
@ -8,7 +8,7 @@ export const identityRevealedValidator: ValidatorFn = (control: FormGroup): Vali
  const name = control.get('name');
  const alterEgo = control.get('alterEgo');

-  return name && alterEgo && name.value === alterEgo.value ? { 'identityRevealed': true } : null;
+  return name && alterEgo && name.value === alterEgo.value ? { identityRevealed: true } : null;
 };
 // #enddocregion cross-validation-validator

--- a/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
+++ b/aio/content/examples/forms/src/app/hero-form/hero-form.component.ts
@ -48,9 +48,9 @@ export class HeroFormComponent {
  // Reveal in html:
  //   Name via form.controls = {{showFormControls(heroForm)}}
  showFormControls(form: any) {
-    return form && form.controls['name'] &&
+    return form && form.controls.name &&
    // #docregion form-controls
-    form.controls['name'].value; // Dr. IQ
+    form.controls.name.value; // Dr. IQ
    // #enddocregion form-controls
  }

--- a/aio/content/examples/http/src/app/config/config.component.ts
+++ b/aio/content/examples/http/src/app/config/config.component.ts
@ -40,8 +40,8 @@ export class ConfigComponent {
    this.configService.getConfig_1()
  // #docregion v1, v1_callback
      .subscribe((data: Config) => this.config = {
-          heroesUrl: data['heroesUrl'],
-          textfile:  data['textfile']
+          heroesUrl: data.heroesUrl,
+          textfile:  data.textfile
      });
  // #enddocregion v1_callback
  }
--- a/aio/content/examples/http/src/app/heroes/heroes.service.ts
+++ b/aio/content/examples/http/src/app/heroes/heroes.service.ts
@ -16,7 +16,7 @@ import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
 const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
-    'Authorization': 'my-auth-token'
+    Authorization: 'my-auth-token'
  })
 };
 // #enddocregion http-options
--- a/aio/content/examples/http/src/main-specs.ts
+++ b/aio/content/examples/http/src/main-specs.ts
@ -22,13 +22,13 @@ import './testing/http-client.spec.ts';
 bootstrap();

 //
-function bootstrap () {
-  if (window['jasmineRef']) {
+function bootstrap() {
+  if ((window as any).jasmineRef) {
    location.reload();
    return;
  } else {
    window.onload(undefined);
-    window['jasmineRef'] = jasmine.getEnv();
+    (window as any).jasmineRef = jasmine.getEnv();
  }

  // First, initialize the Angular testing environment.
--- a/aio/content/examples/http/src/testing/global-jasmine.ts
+++ b/aio/content/examples/http/src/testing/global-jasmine.ts
@ -1,3 +1,3 @@
 import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';

-window['jasmineRequire'] = jasmineRequire;
+(window as any).jasmineRequire = jasmineRequire;
--- a/aio/content/examples/http/src/testing/http-client.spec.ts
+++ b/aio/content/examples/http/src/testing/http-client.spec.ts
@ -73,7 +73,7 @@ describe('HttpClient testing', () => {

    // Make an HTTP GET request with specific header
    httpClient.get<Data>(testUrl, {
-        headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+        headers: new HttpHeaders({Authorization: 'my-auth-token'})
      })
      .subscribe(data =>
        expect(data).toEqual(testData)
--- a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
@ -31,7 +31,7 @@ export class MyCounterComponent implements OnChanges {
    }

    // A change to `counter` is the only change we care about
-    let chng = changes['counter'];
+    let chng = changes.counter;
    let cur = chng.currentValue;
    let prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
    this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`);
--- 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
@ -57,7 +57,7 @@ export class PeekABooComponent extends PeekABooDirective implements
    let changesMsgs: string[] = [];
    for (let propName in changes) {
      if (propName === 'name') {
-        let name = changes['name'].currentValue;
+        let name = changes.name.currentValue;
        changesMsgs.push(`name ${this.verb} to "${name}"`);
      } else {
        changesMsgs.push(propName + ' ' + this.verb);
--- a/aio/content/examples/router/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/router/e2e/src/app.e2e-spec.ts
@ -20,12 +20,12 @@ describe('Router', () => {

      crisisHref: hrefEles.get(0),
      crisisList: element.all(by.css('app-root > div > app-crisis-center > app-crisis-list li')),
-      crisisDetail: crisisDetail,
+      crisisDetail,
      crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')),

      heroesHref: hrefEles.get(1),
      heroesList: element.all(by.css('app-root > div > app-hero-list li')),
-      heroDetail: heroDetail,
+      heroDetail,
      heroDetailTitle: heroDetail.element(by.xpath('*[2]')),

      adminHref: hrefEles.get(2),
--- a/aio/content/examples/router/src/app/app.component.2.ts
+++ b/aio/content/examples/router/src/app/app.component.2.ts
@ -15,7 +15,7 @@ import { slideInAnimation } from './animations';
 // #docregion function-binding
 export class AppComponent {
  getAnimationData(outlet: RouterOutlet) {
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }
 }
 // #enddocregion function-binding
--- a/aio/content/examples/router/src/app/app.component.ts
+++ b/aio/content/examples/router/src/app/app.component.ts
@ -12,6 +12,6 @@ import { slideInAnimation } from './animations';
 })
 export class AppComponent {
  getAnimationData(outlet: RouterOutlet) {
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }
 }
--- a/aio/content/examples/router/src/app/auth/auth.guard.4.ts
+++ b/aio/content/examples/router/src/app/auth/auth.guard.4.ts
@ -39,7 +39,7 @@ export class AuthGuard implements CanActivate, CanActivateChild {
    // Set our navigation extras object
    // that contains our global query params and fragment
    let navigationExtras: NavigationExtras = {
-      queryParams: { 'session_id': sessionId },
+      queryParams: { session_id: sessionId },
      fragment: 'anchor'
    };

--- a/aio/content/examples/router/src/app/auth/auth.guard.ts
+++ b/aio/content/examples/router/src/app/auth/auth.guard.ts
@ -46,7 +46,7 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
    // Set our navigation extras object
    // that contains our global query params and fragment
    let navigationExtras: NavigationExtras = {
-      queryParams: { 'session_id': sessionId },
+      queryParams: { session_id: sessionId },
      fragment: 'anchor'
    };

--- 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) {
      // add the route path to the preloaded module array
      this.preloadedModules.push(route.path);

--- a/aio/content/examples/testing/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/testing/e2e/src/app.e2e-spec.ts
@ -9,7 +9,7 @@ describe('Testing Example', () => {
    let navElts = element.all(by.css('app-root nav a'));

    return {
-      navElts: navElts,
+      navElts,

      appDashboard: element(by.css('app-root app-dashboard')),
    };
--- a/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
+++ b/aio/content/examples/testing/src/app/demo/demo.testbed.spec.ts
@ -222,7 +222,7 @@ describe('demo (with TestBed):', () => {
      fixture.detectChanges();
      const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow

-      const hero = ngForRow.context['hero']; // the hero object passed into the row
+      const hero = ngForRow.context.hero; // the hero object passed into the row
      expect(hero.name).toBe(heroName, 'ngRow.context.hero');

      const rowComp = ngForRow.componentInstance;
@ -514,11 +514,11 @@ describe('demo (with TestBed):', () => {
      expect(comp.children.toArray().length).toBe(4,
        'three different child components and an ElementRef with #content');

-      expect(el.references['nc']).toBe(comp, '#nc reference to component');
+      expect(el.references.nc).toBe(comp, '#nc reference to component');

      // #docregion custom-predicate
      // Filter for DebugElements with a #content reference
-      const contentRefs = el.queryAll( de => de.references['content']);
+      const contentRefs = el.queryAll( de => de.references.content);
      // #enddocregion custom-predicate
      expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
    });
--- a/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
+++ b/aio/content/examples/testing/src/app/model/testing/http-client.spec.ts
@ -72,7 +72,7 @@ describe('HttpClient testing', () => {

    // Make an HTTP GET request with specific header
    httpClient.get<Data>(testUrl, {
-        headers: new HttpHeaders({'Authorization': 'my-auth-token'})
+        headers: new HttpHeaders({Authorization: 'my-auth-token'})
      })
      .subscribe(data =>
        expect(data).toEqual(testData)
--- a/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts
+++ b/aio/content/examples/testing/src/app/shared/canvas.component.spec.ts
@ -7,7 +7,7 @@ describe('CanvasComponent', () => {
  // #enddocregion without-toBlob-macrotask
  // #docregion enable-toBlob-macrotask
  beforeEach(() => {
-    window['__zone_symbol__FakeAsyncTestMacroTask'] = [
+    (window as any).__zone_symbol__FakeAsyncTestMacroTask = [
      {
        source: 'HTMLCanvasElement.toBlob',
        callbackArgs: [{ size: 200 }],
--- a/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts
+++ b/aio/content/examples/testing/src/app/shared/highlight.directive.spec.ts
@ -69,7 +69,7 @@ describe('HighlightDirective', () => {


  it('bare <h2> should not have a customProperty', () => {
-    expect(bareH2.properties['customProperty']).toBeUndefined();
+    expect(bareH2.properties.customProperty).toBeUndefined();
  });
  // #enddocregion selected-tests

--- a/aio/content/examples/testing/src/main-specs.ts
+++ b/aio/content/examples/testing/src/main-specs.ts
@ -23,13 +23,13 @@ bootstrap();

 //

-function bootstrap () {
-  if (window['jasmineRef']) {
+function bootstrap() {
+  if ((window as any).jasmineRef) {
    location.reload();
    return;
  } else {
    window.onload(undefined);
-    window['jasmineRef'] = jasmine.getEnv();
+    (window as any).jasmineRef = jasmine.getEnv();
  }

  // First, initialize the Angular testing environment.
--- a/aio/content/examples/testing/src/testing/global-jasmine.ts
+++ b/aio/content/examples/testing/src/testing/global-jasmine.ts
@ -1,3 +1,3 @@
 import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';

-window['jasmineRequire'] = jasmineRequire;
+(window as any).jasmineRequire = jasmineRequire;
--- a/aio/content/examples/testing/src/testing/jasmine-matchers.ts
+++ b/aio/content/examples/testing/src/testing/jasmine-matchers.ts
@ -5,7 +5,7 @@

 export function addMatchers(): void {
  jasmine.addMatchers({
-    toHaveText: toHaveText
+    toHaveText
  });
 }

--- a/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
@ -43,7 +43,7 @@ describe('Tutorial part 5', () => {
    let navElts = element.all(by.css('app-root nav a'));

    return {
-      navElts: navElts,
+      navElts,

      appDashboardHref: navElts.get(0),
      appDashboard: element(by.css('app-root app-dashboard')),
--- a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
@ -50,7 +50,7 @@ describe('Tutorial part 6', () => {
    let navElts = element.all(by.css('app-root nav a'));

    return {
-      navElts: navElts,
+      navElts,

      appDashboardHref: navElts.get(0),
      appDashboard: element(by.css('app-root app-dashboard')),
--- a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.spec.ts
@ -19,7 +19,7 @@ describe('phoneDetail', () => {
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);

-      $routeParams['phoneId'] = 'xyz';
+      $routeParams.phoneId = 'xyz';

      ctrl = $componentController('phoneDetail');
    }));
--- a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.component.ts
@ -5,7 +5,7 @@ class PhoneDetailController {

  static $inject = ['$routeParams', 'Phone'];
  constructor($routeParams: angular.route.IRouteParamsService, Phone: any) {
-    let phoneId = $routeParams['phoneId'];
+    let phoneId = $routeParams.phoneId;
    this.phone = Phone.get({phoneId}, (phone: any) => {
      this.setImage(phone.images[0]);
    });
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ajs.ts
@ -8,7 +8,7 @@ class PhoneDetailController {

  static $inject = ['$routeParams', 'phone'];
  constructor($routeParams: angular.route.IRouteParamsService, phone: Phone) {
-    let phoneId = $routeParams['phoneId'];
+    let phoneId = $routeParams.phoneId;
    phone.get(phoneId).subscribe(data => {
      this.phone = data;
      this.setImage(data.images[0]);
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.spec.ts
@ -42,7 +42,7 @@ describe('PhoneDetailComponent', () => {
      declarations: [ CheckmarkPipe, PhoneDetailComponent ],
      providers: [
        { provide: Phone, useClass: MockPhone },
-        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }
+        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { phoneId: 1 } }) }
      ]
    })
    .compileComponents();
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.component.ts
@ -22,7 +22,7 @@ export class PhoneDetailComponent {
  mainImageUrl: string;

  constructor(routeParams: RouteParams, phone: Phone) {
-    phone.get(routeParams['phoneId']).subscribe(phone => {
+    phone.get(routeParams.phoneId).subscribe(phone => {
      this.phone = phone;
      this.setImage(phone.images[0]);
    });
--- a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.component.spec.ts
@ -42,7 +42,7 @@ describe('PhoneDetailComponent', () => {
      declarations: [ CheckmarkPipe, PhoneDetailComponent ],
      providers: [
        { provide: Phone, useClass: MockPhone },
-        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { 'phoneId': 1 } }) }
+        { provide: ActivatedRoute, useValue: new ActivatedRouteMock({ params: { phoneId: 1 } }) }
      ]
    })
    .compileComponents();