Merge pull request #3071 from IdeaBlade/relative-paths

chore: convert relative templateUrl/styleUrls to have ./
docs(style-guide): prefix with ./ and other improvements

public/docs/_examples/animations/ts/app/hero-list-auto.component.ts

@@ -23,7 +23,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
 
   /* When the element leaves (transition "in => void" occurs),
    * get the element's current computed height and animate

public/docs/_examples/animations/ts/app/hero-list-basic.component.ts

@@ -34,7 +34,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   // #enddocregion
   /**
    * Define two states, "inactive" and "active", and the end

public/docs/_examples/animations/ts/app/hero-list-combined-transitions.component.ts

@@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
    </ul>
  `,
  // #enddocregion template
- styleUrls: ['hero-list.component.css'],
+ styleUrls: ['./hero-list.component.css'],
  /*
   * Define two states, "inactive" and "active", and the end
   * styles that apply whenever the element is in those states.

public/docs/_examples/animations/ts/app/hero-list-enter-leave-states.component.ts

@@ -24,7 +24,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   /* The elements here have two possible states based
    * on the hero state, "active", or "inactive". We animate
    * six transitions: Between the two states in both directions,

public/docs/_examples/animations/ts/app/hero-list-enter-leave.component.ts

@@ -23,7 +23,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   /* The element here always has the state "in" when it
    * is present. We animate two transitions: From void
    * to in and from in to void, to achieve an animated

public/docs/_examples/animations/ts/app/hero-list-groups.component.ts

@@ -22,7 +22,7 @@ import { Heroes } from './hero.service';
       </li>
     </ul>
   `,
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   styles: [`
     li {
       padding: 0 !important;

public/docs/_examples/animations/ts/app/hero-list-inline-styles.component.ts

@@ -26,7 +26,7 @@ import { Heroes } from './hero.service';
    </ul>
  `,
  // #enddocregion template
- styleUrls: ['hero-list.component.css'],
+ styleUrls: ['./hero-list.component.css'],
  /**
   * Define two states, "inactive" and "active", and the end
   * styles that apply whenever the element is in those states.

public/docs/_examples/animations/ts/app/hero-list-multistep.component.ts

@@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
     </ul>
   `,
   // #enddocregion template
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   /* The element here always has the state "in" when it
    * is present. We animate two transitions: From void
    * to in and from in to void, to achieve an animated

public/docs/_examples/animations/ts/app/hero-list-timings.component.ts

@@ -22,7 +22,7 @@ import { Heroes } from './hero.service';
       </li>
     </ul>
   `,
-  styleUrls: ['hero-list.component.css'],
+  styleUrls: ['./hero-list.component.css'],
   /* The element here always has the state "in" when it
    * is present. We animate two transitions: From void
    * to in and from in to void, to achieve an animated

public/docs/_examples/animations/ts/app/hero-list-twoway.component.ts

@@ -27,7 +27,7 @@ import { Heroes } from './hero.service';
    </ul>
  `,
  // #enddocregion template
- styleUrls: ['hero-list.component.css'],
+ styleUrls: ['./hero-list.component.css'],
  /*
   * Define two states, "inactive" and "active", and the end
   * styles that apply whenever the element is in those states.

public/docs/_examples/architecture/ts/app/hero-detail.component.ts

@@ -5,7 +5,7 @@ import { Hero } from './hero';
 @Component({
   moduleId: module.id,
   selector: 'hero-detail',
-  templateUrl: 'hero-detail.component.html'
+  templateUrl: './hero-detail.component.html'
 })
 export class HeroDetailComponent {
   @Input() hero: Hero;

public/docs/_examples/architecture/ts/app/hero-list.component.ts

@@ -7,7 +7,7 @@ import { HeroService }         from './hero.service';
 @Component({
   moduleId: module.id,
   selector:    'hero-list',
-  templateUrl: 'hero-list.component.html',
+  templateUrl: './hero-list.component.html',
   providers:  [ HeroService ]
 })
 // #enddocregion providers

public/docs/_examples/attribute-directives/ts/app/app.component.1.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.1.html'
+  templateUrl: './app.component.1.html'
 })
 // #docregion class
 export class AppComponent {

public/docs/_examples/attribute-directives/ts/app/app.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 // #docregion class
 export class AppComponent {

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts

@@ -6,8 +6,8 @@ import { IMovie } from './movie';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html',
-  styleUrls: [ 'app.component.css' ],
+  templateUrl: './app.component.html',
+  styleUrls: [ './app.component.css' ],
   providers: [ MovieService ]
 })
 export class AppComponent {

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts

@@ -10,10 +10,10 @@ import { MovieService } from './movie.service';
 @Component({
   moduleId: module.id,
   selector: 'movie-list',
-  templateUrl: 'movie-list.component.html',
+  templateUrl: './movie-list.component.html',
 // #enddocregion component
 // #docregion style-url
-  styleUrls: [ 'movie-list.component.css' ],
+  styleUrls: [ './movie-list.component.css' ],
 // #enddocregion style-url
 })
 // #enddocregion component

public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   showHeading = true;

public/docs/_examples/cb-component-communication/ts/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/cb-component-relative-paths/ts/app/some.component.ts

@@ -24,8 +24,8 @@ export class SomeAbsoluteComponent {
   moduleId: module.id,
   // #enddocregion module-id
   selector: 'relative-path',
-  templateUrl: 'some.component.html',
-  styleUrls:  ['some.component.css']
+  templateUrl: './some.component.html',
+  styleUrls:  ['./some.component.css']
 })
 // #enddocregion relative-config
 

public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts

@@ -9,7 +9,7 @@ import { UserService }        from './user.service';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html',
+  templateUrl: './app.component.html',
 // #docregion providers
   providers: [ LoggerService, UserContextService, UserService ]
 // #enddocregion providers

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form-question.component.ts

@@ -7,7 +7,7 @@ import { QuestionBase }     from './question-base';
 @Component({
   moduleId: module.id,
   selector: 'df-question',
-  templateUrl: 'dynamic-form-question.component.html'
+  templateUrl: './dynamic-form-question.component.html'
 })
 export class DynamicFormQuestionComponent {
   @Input() question: QuestionBase<any>;

public/docs/_examples/cb-dynamic-form/ts/app/dynamic-form.component.ts

@@ -8,7 +8,7 @@ import { QuestionControlService }    from './question-control.service';
 @Component({
   moduleId: module.id,
   selector: 'dynamic-form',
-  templateUrl: 'dynamic-form.component.html',
+  templateUrl: './dynamic-form.component.html',
   providers: [ QuestionControlService ]
 })
 export class DynamicFormComponent implements OnInit {

public/docs/_examples/cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts

@@ -10,7 +10,7 @@ import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 @Component({
   moduleId:  module.id,
   selector: 'hero-form-reactive3',
-  templateUrl: 'hero-form-reactive.component.html'
+  templateUrl: './hero-form-reactive.component.html'
 })
 export class HeroFormReactiveComponent implements OnInit {
 

public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template1.component.ts

@@ -9,7 +9,7 @@ import { Hero }      from '../shared/hero';
 @Component({
   moduleId:  module.id,
   selector: 'hero-form-template1',
-  templateUrl: 'hero-form-template1.component.html'
+  templateUrl: './hero-form-template1.component.html'
 })
 // #docregion class
 export class HeroFormTemplate1Component {

public/docs/_examples/cb-form-validation/ts/app/template/hero-form-template2.component.ts

@@ -9,7 +9,7 @@ import { Hero }      from '../shared/hero';
 @Component({
   moduleId:  module.id,
   selector: 'hero-form-template2',
-  templateUrl: 'hero-form-template2.component.html'
+  templateUrl: './hero-form-template2.component.html'
 })
 export class HeroFormTemplate2Component implements AfterViewChecked {
 

public/docs/_examples/cb-i18n/ts/app/app.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   wolves = 0;

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html',
+  templateUrl: './app.component.html',
   styles: [
     // See hero-di-inject-additional.component
     'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6

@@ -4,7 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'app-confirm',
-  templateUrl: 'confirm.component.html'
+  templateUrl: './confirm.component.html'
 })
 export class ConfirmComponent {
   @Input() okMsg = '';

public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6

@@ -5,7 +5,7 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'hero-title',
-  templateUrl: 'hero-title.component.html'
+  templateUrl: './hero-title.component.html'
 })
 // #enddocregion templateUrl
 export class HeroTitleComponent {

public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6

@@ -10,7 +10,7 @@ AppComponent.annotations = [
   new Component({
     moduleId: module.id,
     selector: 'my-app',
-    templateUrl: 'app.component.html',
+    templateUrl: './app.component.html',
     styles: [
       // See hero-di-inject-additional.component
       'hero-host { border: 1px dashed black; display: block; padding: 4px;}',

public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6

@@ -18,7 +18,7 @@ ConfirmComponent.annotations = [
   new Component({
     moduleId: module.id,
     selector: 'app-confirm',
-    templateUrl: 'confirm.component.html',
+    templateUrl: './confirm.component.html',
     inputs: [
       'okMsg',
       'notOkMsg: cancelMsg'

public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6

@@ -18,7 +18,7 @@ HeroTitleComponent.annotations = [
   new Component({
     moduleId: module.id,
     selector: 'hero-title',
-    templateUrl: 'hero-title.component.html'
+    templateUrl: './hero-title.component.html'
   })
 ];
 // #enddocregion templateUrl

public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html',
+  templateUrl: './app.component.html',
   styles: [
     // See hero-di-inject-additional.component
     'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',

public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts

@@ -4,7 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'app-confirm',
-  templateUrl: 'confirm.component.html'
+  templateUrl: './confirm.component.html'
 })
 export class ConfirmComponent {
   @Input() okMsg = '';

public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts

@@ -5,7 +5,7 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'hero-title',
-  templateUrl: 'hero-title.component.html'
+  templateUrl: './hero-title.component.html'
 })
 // #enddocregion templateUrl
 export class HeroTitleComponent {

public/docs/_examples/cli-quickstart/ts/src/app/cli-quickstart.component.ts

@@ -6,8 +6,8 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'cli-quickstart-app',
-  templateUrl: 'cli-quickstart.component.html',
-  styleUrls: ['cli-quickstart.component.css']
+  templateUrl: './cli-quickstart.component.html',
+  styleUrls: ['./cli-quickstart.component.css']
 })
 // #enddocregion metadata
 // #docregion title, class

public/docs/_examples/component-styles/ts/app/quest-summary.component.ts

@@ -7,8 +7,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
   moduleId: module.id,
   selector: 'quest-summary',
   // #docregion urls
-  templateUrl: 'quest-summary.component.html',
-  styleUrls:  ['quest-summary.component.css']
+  templateUrl: './quest-summary.component.html',
+  styleUrls:  ['./quest-summary.component.css']
   // #enddocregion urls
 })
 export class QuestSummaryComponent { }

public/docs/_examples/forms/ts/app/hero-form.component.ts

@@ -8,7 +8,7 @@ import { Hero }    from './hero';
 @Component({
   moduleId: module.id,
   selector: 'hero-form',
-  templateUrl: 'hero-form.component.html'
+  templateUrl: './hero-form.component.html'
 })
 export class HeroFormComponent {
 

public/docs/_examples/homepage-hello-world/ts/app/hello_world.ts

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
   selector: 'hello-world',
 
   // Location of the template for this component
-  templateUrl: 'hello_world.html'
+  templateUrl: './hello_world.html'
 })
 export class HelloWorldComponent {
 

public/docs/_examples/lifecycle-hooks/ts/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/lifecycle-hooks/ts/app/do-check.component.ts

@@ -77,7 +77,7 @@ export class DoCheckComponent implements DoCheck {
 @Component({
   moduleId: module.id,
   selector: 'do-check-parent',
-  templateUrl: 'do-check-parent.component.html',
+  templateUrl: './do-check-parent.component.html',
   styles: ['.parent {background: Lavender}']
 })
 export class DoCheckParentComponent {

public/docs/_examples/lifecycle-hooks/ts/app/on-changes.component.ts

@@ -51,7 +51,7 @@ export class OnChangesComponent implements OnChanges {
 @Component({
   moduleId: module.id,
   selector: 'on-changes-parent',
-  templateUrl: 'on-changes-parent.component.html',
+  templateUrl: './on-changes-parent.component.html',
   styles: ['.parent {background: Lavender;}']
 })
 export class OnChangesParentComponent {

public/docs/_examples/lifecycle-hooks/ts/app/spy.component.ts

@@ -6,7 +6,7 @@ import { LoggerService }  from './logger.service';
 @Component({
   moduleId: module.id,
   selector: 'spy-parent',
-  templateUrl: 'spy.component.html',
+  templateUrl: './spy.component.html',
   styles: [
      '.parent {background: khaki;}',
      '.heroes {background: LightYellow; padding: 0 8px}'

public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts

@@ -7,8 +7,8 @@ import { UserService }    from '../user.service';
 @Component({
   moduleId: module.id,
   selector: 'app-contact',
-  templateUrl: 'contact.component.html',
-  styleUrls: [ 'contact.component.css' ]
+  templateUrl: './contact.component.html',
+  styleUrls: [ './contact.component.css' ]
 })
 export class ContactComponent implements OnInit {
   contact:  Contact;

public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts

@@ -8,8 +8,8 @@ import { UserService }             from '../core/user.service';
 @Component({
   moduleId: module.id,
   selector: 'app-contact',
-  templateUrl: 'contact.component.html',
-  styleUrls: [ 'contact.component.css' ]
+  templateUrl: './contact.component.html',
+  styleUrls: [ './contact.component.css' ]
 })
 export class ContactComponent implements OnInit {
   contact:  Contact;

public/docs/_examples/ngmodule/ts/app/core/title.component.ts

@@ -5,7 +5,7 @@ import { UserService }      from '../core/user.service';
 @Component({
   moduleId: module.id,
   selector: 'app-title',
-  templateUrl: 'title.component.html',
+  templateUrl: './title.component.html',
 })
 export class TitleComponent {
   @Input() subtitle = '';

public/docs/_examples/ngmodule/ts/app/title.component.ts

@@ -9,7 +9,7 @@ import { UserService } from './user.service';
 @Component({
   moduleId: module.id,
   selector: 'app-title',
-  templateUrl: 'title.component.html',
+  templateUrl: './title.component.html',
 })
 export class TitleComponent {
   @Input() subtitle = '';

public/docs/_examples/pipes/ts/app/app.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   birthday = new Date(1988, 3, 15); // April 15, 1988

public/docs/_examples/pipes/ts/app/flying-heroes.component.ts

@@ -7,7 +7,7 @@ import { HEROES }                 from './heroes';
 @Component({
   moduleId: module.id,
   selector: 'flying-heroes',
-  templateUrl: 'flying-heroes.component.html',
+  templateUrl: './flying-heroes.component.html',
   styles: ['#flyers, #all {font-style: italic}']
 })
 // #docregion v1
@@ -52,7 +52,7 @@ export class FlyingHeroesComponent {
 @Component({
   moduleId: module.id,
   selector: 'flying-heroes-impure',
-  templateUrl: 'flying-heroes-impure.component.html',
+  templateUrl: './flying-heroes-impure.component.html',
 // #enddocregion impure-component
   styles: ['.flyers, .all {font-style: italic}'],
 // #docregion impure-component

public/docs/_examples/router/ts/app/compose-message.component.ts

@@ -6,7 +6,7 @@ import { slideInDownAnimation }   from './animations';
 
 @Component({
   moduleId: module.id,
-  templateUrl: 'compose-message.component.html',
+  templateUrl: './compose-message.component.html',
   styles: [ ':host { position: relative; bottom: 10%; }' ],
   animations: [ slideInDownAnimation ]
 })

public/docs/_examples/security/ts/app/bypass-security.component.ts

@@ -6,7 +6,7 @@ import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browse
 @Component({
   selector: 'bypass-security',
   moduleId: module.id,
-  templateUrl: 'bypass-security.component.html',
+  templateUrl: './bypass-security.component.html',
 })
 export class BypassSecurityComponent {
   dangerousUrl: string;

public/docs/_examples/security/ts/app/inner-html-binding.component.ts

@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'inner-html-binding',
-  templateUrl: 'inner-html-binding.component.html',
+  templateUrl: './inner-html-binding.component.html',
 })
 // #docregion class
 export class InnerHtmlBindingComponent {

public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts

@@ -7,7 +7,7 @@ import { HeroService }       from './hero.service.promise';
 @Component({
   selector: 'hero-list-promise',
   moduleId: module.id,
-  templateUrl: 'hero-list.component.html',
+  templateUrl: './hero-list.component.html',
   providers: [ HeroService ],
   styles: ['.error {color:red;}']
 })

public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts

@@ -7,7 +7,7 @@ import { HeroService }       from './hero.service';
 @Component({
   moduleId: module.id,
   selector: 'hero-list',
-  templateUrl: 'hero-list.component.html',
+  templateUrl: './hero-list.component.html',
   providers: [ HeroService ],
   styles: ['.error {color:red;}']
 })

public/docs/_examples/server-communication/ts/app/wiki/wiki-smart.component.ts

@@ -12,7 +12,7 @@ import { WikipediaService } from './wikipedia.service';
 @Component({
   moduleId: module.id,
   selector: 'my-wiki-smart',
-  templateUrl: 'wiki.component.html',
+  templateUrl: './wiki.component.html',
   providers: [ WikipediaService ]
 })
 export class WikiSmartComponent implements OnInit {

public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'structural-directives',
-  templateUrl: 'structural-directives.component.html',
+  templateUrl: './structural-directives.component.html',
   styles: ['button { min-width: 100px; }']
 })
 export class StructuralDirectivesComponent {

public/docs/_examples/style-guide/ts/01-01/app/app.component.ts

@@ -9,7 +9,7 @@ import { HeroService } from './heroes';
   template: `
       <toh-heroes></toh-heroes>
     `,
-  styleUrls: ['app.component.css'],
+  styleUrls: ['./app.component.css'],
   providers: [ HeroService ]
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/03-06/app/app.component.ts

@@ -6,7 +6,7 @@ import { ExceptionService, SpinnerService, ToastService } from './core';
 @Component({
   moduleId: module.id,
   selector: 'sg-app',
-  templateUrl: 'app.component.html',
+  templateUrl: './app.component.html',
   providers: [HeroService, ExceptionService, SpinnerService, ToastService]
 })
 export class AppComponent implements OnInit {

public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.avoid.ts

@@ -3,7 +3,7 @@
 /* avoid */
 
 import { ExceptionService, SpinnerService, ToastService } from '../../core';
-import { Http, Response } from '@angular/http';
+import { Http } from '@angular/http';
 import { Injectable } from '@angular/core';
 import { Hero } from './hero.model';
 // #enddocregion example
@@ -20,12 +20,12 @@ export class HeroService {
 
   getHero(id: number) {
     return this.http.get(`api/heroes/${id}`)
-      .map((res: Response) => res.json().data);
+      .map(response => response.json().data as Hero);
   }
 
   getHeroes() {
     return this.http.get(`api/heroes`)
-      .map((res: Response) => res.json().data);
+      .map(response => response.json().data as Hero[]);
   }
 
 }

public/docs/_examples/style-guide/ts/03-06/app/heroes/shared/hero.service.ts

@@ -1,7 +1,7 @@
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { Http }       from '@angular/http';
 
 import { Hero } from './hero.model';
 import { ExceptionService, SpinnerService, ToastService } from '../../core';
@@ -20,12 +20,12 @@ export class HeroService {
 
   getHero(id: number) {
     return this.http.get(`api/heroes/${id}`)
-      .map((res: Response) => res.json().data);
+      .map(response => response.json().data as Hero);
   }
 
   getHeroes() {
     return this.http.get(`api/heroes`)
-      .map((res: Response) => res.json().data);
+      .map(response => response.json().data as Hero[]);
   }
 
 }

public/docs/_examples/style-guide/ts/04-08/app/app.module.ts

@@ -4,10 +4,10 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 // #enddocregion example
-import { RouterModule } from '@angular/router';
+import { RouterModule }  from '@angular/router';
 // #docregion example
 
-import { AppComponent }   from './app.component';
+import { AppComponent }    from './app.component';
 import { HeroesComponent } from './heroes/heroes.component';
 
 @NgModule({

public/docs/_examples/style-guide/ts/04-08/app/heroes/heroes.component.ts

@@ -1,21 +1,12 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html'
+  templateUrl: './heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
-  // #enddocregion example
-  // #docregion example
-  constructor() { }
+  constructor() { /* ... */ }
 
-  ngOnInit() { }
+  ngOnInit() { /* ... */ }
 }
-// #enddocregion example
-

public/docs/_examples/style-guide/ts/04-10/app/heroes/heroes.component.ts

@@ -1,23 +1,14 @@
-// #docplaster
 // #docregion
-// #docregion example
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { FilterTextService } from '../shared/filter-text/filter-text.service';
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html'
+  templateUrl: './heroes.component.html'
 })
-export class HeroesComponent implements OnInit {
-  // #enddocregion example
-  // #docregion example
-  filteredHeroes: any[] = [];
-
-  constructor(private filterService: FilterTextService) { }
+export class HeroesComponent {
 
   heroes = [
     { id: 1, name: 'Windstorm' },
@@ -26,13 +17,12 @@ export class HeroesComponent implements OnInit {
     { id: 4, name: 'Tornado' }
   ];
 
+  filteredHeroes = this.heroes;
+
+  constructor(private filterService: FilterTextService) { }
+
   filterChanged(searchText: string) {
     this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes);
   }
-
-  ngOnInit() {
-    this.filteredHeroes = this.heroes;
-  }
 }
-// #enddocregion example
 

public/docs/_examples/style-guide/ts/04-11/app/core/nav/nav.component.ts

@@ -4,8 +4,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'toh-nav',
-  templateUrl: 'nav.component.html',
-  styleUrls: ['nav.component.css'],
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.css'],
 })
 export class NavComponent implements OnInit {
   menuItems = [

public/docs/_examples/style-guide/ts/04-11/app/core/spinner/spinner.component.ts

@@ -8,8 +8,8 @@ import { SpinnerState, SpinnerService } from './spinner.service';
 @Component({
   moduleId: module.id,
   selector: 'toh-spinner',
-  templateUrl: 'spinner.component.html',
-  styleUrls: ['spinner.component.css']
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.css']
 })
 export class SpinnerComponent implements OnDestroy, OnInit {
   visible = false;

public/docs/_examples/style-guide/ts/04-11/app/heroes/heroes.component.ts

@@ -1,21 +1,14 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { Component } from '@angular/core';
 
-import { LoggerService } from '../core/logger.service';
+import { LoggerService }  from '../core/logger.service';
 import { SpinnerService } from '../core/spinner/spinner.service';
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html'
+  templateUrl: './heroes.component.html'
 })
 export class HeroesComponent {
-  // #enddocregion example
-  // #docregion example
   heroes: any[];
 
   constructor(
@@ -38,4 +31,3 @@ export class HeroesComponent {
     }, 2000);
   }
 }
-// #enddocregion example

public/docs/_examples/style-guide/ts/04-12/app/core/nav/nav.component.ts

@@ -4,8 +4,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'toh-nav',
-  templateUrl: 'nav.component.html',
-  styleUrls: ['nav.component.css'],
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.css'],
 })
 export class NavComponent implements OnInit {
   menuItems = [

public/docs/_examples/style-guide/ts/04-12/app/heroes/heroes.component.ts

@@ -1,20 +1,13 @@
-// #docplaster
-// #docregion
-// #docregion example
 import { Component } from '@angular/core';
 
 import { LoggerService } from '../core/logger.service';
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html'
+  templateUrl: './heroes.component.html'
 })
 export class HeroesComponent {
-  // #enddocregion example
-  // #docregion example
   heroes: any[];
 
   constructor(private loggerService: LoggerService) { }
@@ -30,4 +23,3 @@ export class HeroesComponent {
     this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
   }
 }
-// #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'sg-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,15 +1,12 @@
 // #docplaster
-// #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'tohHeroButton',
-  templateUrl: 'hero-button.component.html'
+  templateUrl: './hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts

@@ -1,14 +1,10 @@
-// #docplaster
-// #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-hero-button',
-  templateUrl: 'hero-button.component.html'
+  templateUrl: './hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-03/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'sg-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,15 +1,11 @@
-// #docplaster
-// #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: '[tohHeroButton]',
-  templateUrl: 'hero-button.component.html'
+  templateUrl: './hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts

@@ -1,14 +1,10 @@
-// #docplaster
-// #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-hero-button',
-  templateUrl: 'hero-button.component.html'
+  templateUrl: './hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-04/app/app.module.ts

@@ -1,9 +1,10 @@
-import { NgModule } from '@angular/core';
+import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+import { RouterModule }  from '@angular/router';
 
-import { AppComponent } from './app.component';
+import { AppComponent }    from './app.component';
 import { HeroesComponent } from './heroes';
+import { HeroService }     from './heroes/shared';
 
 @NgModule({
   imports: [
@@ -14,6 +15,7 @@ import { HeroesComponent } from './heroes';
     AppComponent,
     HeroesComponent
   ],
-  exports: [ AppComponent ]
+  exports: [ AppComponent ],
+  providers: [ HeroService ]
 })
 export class AppModule {}

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts

@@ -1,7 +1,8 @@
-// #docregion
 import { Component, OnInit } from '@angular/core';
+import { Observable }        from 'rxjs/Observable';
+
+import { Hero, HeroService } from './shared';
 
-import { Hero } from './shared/hero.model';
 // #docregion example
 /* avoid */
 
@@ -11,7 +12,7 @@ import { Hero } from './shared/hero.model';
     <div>
       <h2>My Heroes</h2>
       <ul class="heroes">
-        <li *ngFor="let hero of heroes">
+        <li *ngFor="let hero of heroes | async" (click)="selectedHero=hero">
           <span class="badge">{{hero.id}}</span> {{hero.name}}
         </li>
       </ul>
@@ -51,9 +52,13 @@ import { Hero } from './shared/hero.model';
   `]
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
   selectedHero: Hero;
 
-  ngOnInit() {}
+ constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.heroService.getHeroes();
+  }
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.html

@@ -2,7 +2,7 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="let hero of heroes">
+    <li *ngFor="let hero of heroes | async" (click)="selectedHero=hero">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>

public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts

@@ -1,22 +1,23 @@
-// #docplaster
-// #docregion
 import { Component, OnInit } from '@angular/core';
+import { Observable }        from 'rxjs/Observable';
 
-import { Hero } from './shared';
+import { Hero, HeroService } from './shared';
 
 // #docregion example
 @Component({
-  // #enddocregion example
   moduleId: module.id,
-  // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html',
-  styleUrls:  ['heroes.component.css']
+  templateUrl: './heroes.component.html',
+  styleUrls:  ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
   selectedHero: Hero;
 
-  ngOnInit() { }
+ constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroes = this.heroService.getHeroes();
+  }
 }
 // #enddocregion example

public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/hero.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Http }       from '@angular/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+import { Hero }       from './hero.model';
+
+@Injectable()
+export class HeroService {
+
+  constructor(private http: Http) {}
+
+  getHeroes(): Observable<Hero[]> {
+    return this.http.get('api/heroes')
+                    .map(resp => resp.json().data as Hero[]);
+  }
+}

public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/index.ts

@@ -1 +1,2 @@
 export * from './hero.model';
+export * from './hero.service';

public/docs/_examples/style-guide/ts/05-13/app/app.component.html

@@ -1,3 +1,6 @@
 <!-- #docregion -->
 <toh-hero-button label="OK" (change)="doSomething()">
 </toh-hero-button>
+
+<!-- `heroHighlight` is both the directive name and the data-bound aliased property name -->
+<h3 heroHighlight="skyblue">The Great Bombasto</h3>

public/docs/_examples/style-guide/ts/05-13/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'sg-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/05-13/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
-import { HeroButtonComponent } from './heroes';
+import { HeroButtonComponent, HeroHighlightDirective } from './heroes';
 
 @NgModule({
   imports: [
@@ -10,7 +10,7 @@ import { HeroButtonComponent } from './heroes';
   ],
   declarations: [
     AppComponent,
-    HeroButtonComponent
+    HeroButtonComponent, HeroHighlightDirective
   ],
   exports: [ AppComponent ]
 })

public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts

@@ -1,13 +1,13 @@
-// #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 // #docregion example
-/* avoid */
+/* avoid pointless aliasing */
 
 @Component({
   selector: 'toh-hero-button',
   template: `<button>{{label}}</button>`
 })
 export class HeroButtonComponent {
+  // Pointless aliases
   @Output('changeEvent') change = new EventEmitter<any>();
   @Input('labelAttribute') label: string;
 }

public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts

@@ -7,6 +7,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   template: `<button>{{label}}</button>`
 })
 export class HeroButtonComponent {
+  // No aliases
   @Output() change = new EventEmitter<any>();
   @Input() label: string;
 }

public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-highlight.directive.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
+
+@Directive({ selector: '[heroHighlight]' })
+export class HeroHighlightDirective implements OnChanges {
+
+  // Aliased because `color` is a better property name than `heroHighlight`
+  @Input('heroHighlight') color: string;
+
+  constructor(private el: ElementRef) {}
+
+  ngOnChanges() {
+    this.el.nativeElement.style.backgroundColor = this.color || 'yellow';
+  }
+}

public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/index.ts

@@ -1 +1,2 @@
 export * from './hero-button';
+export * from './hero-highlight.directive';

public/docs/_examples/style-guide/ts/05-16/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'sg-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/06-01/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'sg-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/style-guide/ts/07-01/app/app.component.ts

@@ -5,7 +5,7 @@ import { Hero, HeroService } from './heroes';
 @Component({
   moduleId: module.id,
   selector: 'sg-app',
-  templateUrl: 'app.component.html',
+  templateUrl: './app.component.html',
   providers: [HeroService]
 })
 export class AppComponent implements OnInit {

public/docs/_examples/style-guide/ts/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/template-syntax/ts/app/app.component.ts

@@ -19,7 +19,7 @@ export enum Color {Red, Green, Blue};
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent implements AfterViewInit, OnInit {
 

public/docs/_examples/testing/ts/app/app.component.ts

@@ -3,6 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'app.component.html'
+  templateUrl: './app.component.html'
 })
 export class AppComponent { }

public/docs/_examples/testing/ts/app/bag/bag.ts

@@ -251,7 +251,7 @@ export class TestViewProvidersComponent {
 @Component({
   moduleId: module.id,
   selector: 'external-template-comp',
-  templateUrl: 'bag-external-template.html'
+  templateUrl: './bag-external-template.html'
 })
 export class ExternalTemplateComponent implements OnInit {
   serviceValue: string;
@@ -275,7 +275,7 @@ export class InnerCompWithExternalTemplateComponent { }
 @Component({
   moduleId: module.id,
   selector: 'bad-template-comp',
-  templateUrl: 'non-existant.html'
+  templateUrl: './non-existant.html'
 })
 export class BadTemplateUrlComponent { }
 

public/docs/_examples/testing/ts/app/banner.component.ts

@@ -4,8 +4,8 @@ import { Component } from '@angular/core';
 @Component({
   moduleId: module.id,
   selector: 'app-banner',
-  templateUrl: 'banner.component.html',
-  styleUrls:  ['banner.component.css']
+  templateUrl: './banner.component.html',
+  styleUrls:  ['./banner.component.css']
 })
 export class BannerComponent {
   title = 'Test Tour of Heroes';

public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.ts

@@ -7,8 +7,8 @@ import { Hero } from '../model';
 @Component({
   moduleId: module.id,
   selector:    'dashboard-hero',
-  templateUrl: 'dashboard-hero.component.html',
-  styleUrls: [ 'dashboard-hero.component.css' ]
+  templateUrl: './dashboard-hero.component.html',
+  styleUrls: [ './dashboard-hero.component.css' ]
 })
 export class DashboardHeroComponent {
   @Input() hero: Hero;

public/docs/_examples/testing/ts/app/dashboard/dashboard.component.ts

@@ -7,8 +7,8 @@ import { Hero, HeroService } from '../model';
 @Component({
   moduleId: module.id,
   selector: 'app-dashboard',
-  templateUrl: 'dashboard.component.html',
-  styleUrls: [ 'dashboard.component.css' ]
+  templateUrl: './dashboard.component.html',
+  styleUrls: [ './dashboard.component.css' ]
 })
 export class DashboardComponent implements OnInit {
 

public/docs/_examples/testing/ts/app/hero/hero-detail.component.ts

@@ -11,8 +11,8 @@ import { HeroDetailService } from './hero-detail.service';
 @Component({
   moduleId: module.id,
   selector:    'app-hero-detail',
-  templateUrl: 'hero-detail.component.html',
-  styleUrls:  ['hero-detail.component.css' ],
+  templateUrl: './hero-detail.component.html',
+  styleUrls:  ['./hero-detail.component.css' ],
   providers:  [ HeroDetailService ]
 })
 export class HeroDetailComponent implements OnInit {

public/docs/_examples/testing/ts/app/hero/hero-list.component.ts

@@ -6,8 +6,8 @@ import { Hero, HeroService } from '../model';
 @Component({
   moduleId: module.id,
   selector: 'app-heroes',
-  templateUrl: 'hero-list.component.html',
-  styleUrls: [ 'hero-list.component.css' ]
+  templateUrl: './hero-list.component.html',
+  styleUrls: [ './hero-list.component.css' ]
 })
 export class HeroListComponent implements OnInit {
   heroes: Promise<Hero[]>;

public/docs/_examples/toh-5/ts/app/app.component.ts

@@ -15,7 +15,7 @@ import { Component } from '@angular/core';
   `,
   // #enddocregion template
   // #docregion styleUrls
-  styleUrls: ['app.component.css'],
+  styleUrls: ['./app.component.css'],
   // #enddocregion styleUrls
 })
 export class AppComponent {