build(aio): change examples to CLI (#19248)

PR Close #19248

aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <label><input type="checkbox" [checked]="showHeroes"   (change)="showHeroes=!showHeroes">Heroes</label>
     <label><input type="checkbox" [checked]="showVillains" (change)="showVillains=!showVillains">Villains</label>
@@ -9,9 +9,9 @@ import { Component } from '@angular/core';
 
     <h1>Hierarchical Dependency Injection</h1>
 
-    <heroes-list   *ngIf="showHeroes"></heroes-list>
-    <villains-list *ngIf="showVillains"></villains-list>
-    <my-cars       *ngIf="showCars"></my-cars>
+    <app-heroes-list   *ngIf="showHeroes"></app-heroes-list>
+    <app-villains-list *ngIf="showVillains"></app-villains-list>
+    <app-cars       *ngIf="showCars"></app-cars>
   `
 })
 export class AppComponent {

aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts

@@ -54,7 +54,7 @@ export class ACarComponent {
 }
 ////////// CarsComponent ////////////
 @Component({
-  selector: 'my-cars',
+  selector: 'app-cars',
   template: `
   <h3>Cars</h3>
   <a-car></a-car>`

aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts

@@ -4,7 +4,7 @@ import { HeroTaxReturn }        from './hero';
 import { HeroTaxReturnService } from './hero-tax-return.service';
 
 @Component({
-  selector: 'hero-tax-return',
+  selector: 'app-hero-tax-return',
   templateUrl: './hero-tax-return.component.html',
   styleUrls: [ './hero-tax-return.component.css' ],
   // #docregion providers

aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts

@@ -6,7 +6,7 @@ import { Hero, HeroTaxReturn } from './hero';
 import { HeroesService }       from './heroes.service';
 
 @Component({
-  selector: 'heroes-list',
+  selector: 'app-heroes-list',
   template: `
     <div>
       <h3>Hero Tax Returns</h3>
@@ -15,11 +15,11 @@ import { HeroesService }       from './heroes.service';
             (click)="showTaxReturn(hero)">{{hero.name}}
         </li>
       </ul>
-      <hero-tax-return
+      <app-hero-tax-return
         *ngFor="let selected of selectedTaxReturns; let i = index"
         [taxReturn]="selected"
         (close)="closeTaxReturn(i)">
-      </hero-tax-return>
+      </app-hero-tax-return>
     </div>
     `,
   styles: [ 'li {cursor: pointer;}' ]

aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts

@@ -6,7 +6,7 @@ import { Villain, VillainsService } from './villains.service';
 
 // #docregion metadata
 @Component({
-  selector: 'villains-list',
+  selector: 'app-villains-list',
   templateUrl: './villains-list.component.html',
   providers: [ VillainsService ]
 })