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;}',