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

PR Close #19248

aio/content/examples/architecture/src/app/app.component.ts

@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 // #enddocregion import
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
-    <hero-list></hero-list>
-    <sales-tax></sales-tax>
+    <app-hero-list></app-hero-list>
+    <app-sales-tax></app-sales-tax>
   `
 })
 // #docregion export

aio/content/examples/architecture/src/app/hero-detail.component.ts

@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'hero-detail',
+  selector: 'app-hero-detail',
   templateUrl: './hero-detail.component.html'
 })
 export class HeroDetailComponent {

aio/content/examples/architecture/src/app/hero-list.component.1.html

@@ -1,9 +1,9 @@
 <!--#docregion binding  -->
 <li>{{hero.name}}</li>
-<hero-detail [hero]="selectedHero"></hero-detail>
+<app-hero-detail [hero]="selectedHero"></app-hero-detail>
 <li (click)="selectHero(hero)"></li>
 <!--#enddocregion binding -->
 
 <!--#docregion structural  -->
 <li *ngFor="let hero of heroes"></li>
-<hero-detail *ngIf="selectedHero"></hero-detail>
+<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

aio/content/examples/architecture/src/app/hero-list.component.html

@@ -8,4 +8,4 @@
   </li>
 </ul>
 
-<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
+<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

aio/content/examples/architecture/src/app/hero-list.component.ts

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

aio/content/examples/architecture/src/app/sales-tax.component.ts

@@ -4,7 +4,7 @@ import { SalesTaxService } from './sales-tax.service';
 import { TaxRateService }  from './tax-rate.service';
 
 @Component({
-  selector:    'sales-tax',
+  selector:    'app-sales-tax',
   template: `
     <h2>Sales Tax Calculator</h2>
     Amount: <input #amountBox (change)="0">