chore: convert relative templateUrl/styleUrls to have ./

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',
+  templateUrl: './app.component.html',
-  styleUrls: [ 'app.component.css' ],
+  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',
+  templateUrl: './some.component.html',
-  styleUrls:  ['some.component.css']
+  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',
+  templateUrl: './cli-quickstart.component.html',
-  styleUrls: ['cli-quickstart.component.css']
+  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',
+  templateUrl: './quest-summary.component.html',
-  styleUrls:  ['quest-summary.component.css']
+  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',
+  templateUrl: './contact.component.html',
-  styleUrls: [ 'contact.component.css' ]
+  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',
+  templateUrl: './contact.component.html',
-  styleUrls: [ 'contact.component.css' ]
+  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/04-08/app/heroes/heroes.component.ts

@@ -8,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
   moduleId: module.id,
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html'
+  templateUrl: './heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
   // #enddocregion example

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

@@ -10,7 +10,7 @@ import { FilterTextService } from '../shared/filter-text/filter-text.service';
   moduleId: module.id,
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html'
+  templateUrl: './heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
   // #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',
+  templateUrl: './nav.component.html',
-  styleUrls: ['nav.component.css'],
+  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',
+  templateUrl: './spinner.component.html',
-  styleUrls: ['spinner.component.css']
+  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

@@ -11,7 +11,7 @@ import { SpinnerService } from '../core/spinner/spinner.service';
   moduleId: module.id,
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html'
+  templateUrl: './heroes.component.html'
 })
 export class HeroesComponent {
   // #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',
+  templateUrl: './nav.component.html',
-  styleUrls: ['nav.component.css'],
+  styleUrls: ['./nav.component.css'],
 })
 export class NavComponent implements OnInit {
   menuItems = [

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

@@ -10,7 +10,7 @@ import { LoggerService } from '../core/logger.service';
   moduleId: module.id,
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html'
+  templateUrl: './heroes.component.html'
 })
 export class HeroesComponent {
   // #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

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
   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

@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
   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

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
   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

@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
   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/heroes/heroes.component.ts

@@ -10,8 +10,8 @@ import { Hero } from './shared';
   moduleId: module.id,
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'heroes.component.html',
+  templateUrl: './heroes.component.html',
-  styleUrls:  ['heroes.component.css']
+  styleUrls:  ['./heroes.component.css']
 })
 export class HeroesComponent implements OnInit {
   heroes: Hero[];

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-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',
+  templateUrl: './banner.component.html',
-  styleUrls:  ['banner.component.css']
+  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',
+  templateUrl: './dashboard-hero.component.html',
-  styleUrls: [ 'dashboard-hero.component.css' ]
+  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',
+  templateUrl: './dashboard.component.html',
-  styleUrls: [ 'dashboard.component.css' ]
+  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',
+  templateUrl: './hero-detail.component.html',
-  styleUrls:  ['hero-detail.component.css' ],
+  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',
+  templateUrl: './hero-list.component.html',
-  styleUrls: [ 'hero-list.component.css' ]
+  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 {

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

@@ -10,10 +10,10 @@ import { HeroService } from './hero.service';
 @Component({
   moduleId: module.id,
   selector: 'my-dashboard',
-  templateUrl: 'dashboard.component.html',
+  templateUrl: './dashboard.component.html',
   // #enddocregion metadata
   // #docregion css
-  styleUrls: [ 'dashboard.component.css' ]
+  styleUrls: [ './dashboard.component.css' ]
   // #enddocregion css
   // #docregion metadata
 })

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

@@ -12,9 +12,9 @@ import { HeroService }  from './hero.service';
 @Component({
   moduleId: module.id,
   selector: 'my-hero-detail',
-  templateUrl: 'hero-detail.component.html',
+  templateUrl: './hero-detail.component.html',
   // #enddocregion metadata, v2
-  styleUrls: [ 'hero-detail.component.css' ]
+  styleUrls: [ './hero-detail.component.css' ]
   // #docregion metadata, v2
 })
 // #enddocregion metadata

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

@@ -13,8 +13,8 @@ import { HeroService } from './hero.service';
   // #docregion renaming
   selector: 'my-heroes',
   // #enddocregion renaming
-  templateUrl: 'heroes.component.html',
+  templateUrl: './heroes.component.html',
-  styleUrls: [ 'heroes.component.css' ]
+  styleUrls: [ './heroes.component.css' ]
   // #docregion renaming
 })
 // #enddocregion metadata

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

@@ -13,7 +13,7 @@ import { Component }          from '@angular/core';
     </nav>
     <router-outlet></router-outlet>
   `,
-  styleUrls: ['app.component.css']
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'Tour of Heroes';

public/docs/_examples/toh-6/ts/app/dashboard.component.ts

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

public/docs/_examples/toh-6/ts/app/hero-detail.component.ts

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

public/docs/_examples/toh-6/ts/app/hero-search.component.ts

@@ -11,8 +11,8 @@ import { Hero } from './hero';
 @Component({
   moduleId: module.id,
   selector: 'hero-search',
-  templateUrl: 'hero-search.component.html',
+  templateUrl: './hero-search.component.html',
-  styleUrls: [ 'hero-search.component.css' ],
+  styleUrls: [ './hero-search.component.css' ],
   providers: [HeroSearchService]
 })
 export class HeroSearchComponent implements OnInit {

public/docs/_examples/toh-6/ts/app/heroes.component.ts

@@ -8,8 +8,8 @@ import { HeroService }         from './hero.service';
 @Component({
   moduleId: module.id,
   selector: 'my-heroes',
-  templateUrl: 'heroes.component.html',
+  templateUrl: './heroes.component.html',
-  styleUrls: [ 'heroes.component.css' ]
+  styleUrls: [ './heroes.component.css' ]
 })
 export class HeroesComponent implements OnInit {
   heroes: Hero[];

public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts

@@ -14,7 +14,7 @@ import { Phone, PhoneData } from '../core/phone/phone.service';
 @Component({
   moduleId: module.id,
   selector: 'phone-detail',
-  templateUrl: 'phone-detail.template.html',
+  templateUrl: './phone-detail.template.html',
   // #enddocregion initialclass
   // #docregion initialclass
 })

public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.ts

@@ -8,7 +8,7 @@ import { Phone, PhoneData } from '../core/phone/phone.service';
 @Component({
   moduleId: module.id,
   selector: 'phone-detail',
-  templateUrl: 'phone-detail.template.html'
+  templateUrl: './phone-detail.template.html'
 })
 export class PhoneDetailComponent {
   phone: PhoneData;

public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.ts

@@ -7,7 +7,7 @@ import { Phone, PhoneData } from '../core/phone/phone.service';
 @Component({
   moduleId: module.id,
   selector: 'phone-list',
-  templateUrl: 'phone-list.template.html',
+  templateUrl: './phone-list.template.html',
 })
 // #enddocregion top
 export class PhoneListComponent {

public/docs/_examples/user-input/ts/app/app.component.ts

@@ -4,6 +4,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/ts/latest/cookbook/component-relative-paths.jade

@@ -64,7 +64,8 @@ include ../_util-fns
   relative to the component class file simply by setting the `moduleId` property of the `@Component` metadata like this
 +makeExample('cb-component-relative-paths/ts/app/some.component.ts','module-id')(format='.')
 :marked
-  We strip the `app/` base path from the `templateUrl` and `styleUrls`. The result looks like this:
+  We strip the `app/` base path from the `templateUrl` and `styleUrls` and replace it with `./`. 
+  The result looks like this:
 +makeExample('cb-component-relative-paths/ts/app/some.component.ts','relative-config')(format='.')
 
 .alert.is-helpful

public/docs/ts/latest/cookbook/ts-to-js.jade

@@ -249,7 +249,7 @@ a#class-metadata
   `)(format='.')
 
 :marked
-  Note that the _TypeScript_ and both _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_.
+  Note that both the _TypeScript_ and _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_.
   All three metadata configurations specify the `moduleId` property 
   so that Angular can calculate the proper module address.