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

PR Close #19248

aio/content/examples/component-styles/src/app/hero-app-main.component.ts

@@ -3,12 +3,12 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'hero-app-main',
+  selector: 'app-hero-main',
   template: `
-    <quest-summary></quest-summary>
-    <hero-details [hero]=hero [class.active]=hero.active>
-      <hero-controls [hero]=hero></hero-controls>
-    </hero-details>
+    <app-quest-summary></app-quest-summary>
+    <app-hero-details [hero]="hero" [class.active]="hero.active">
+      <app-hero-controls [hero]="hero"></app-hero-controls>
+    </app-hero-details>
   `
 })
 export class HeroAppMainComponent {

aio/content/examples/component-styles/src/app/hero-app.component.ts

@@ -3,10 +3,10 @@ import { Hero } from './hero';
 
 // #docregion
 @Component({
-  selector: 'hero-app',
+  selector: 'app-root',
   template: `
     <h1>Tour of Heroes</h1>
-    <hero-app-main [hero]=hero></hero-app-main>`,
+    <app-hero-main [hero]=hero></app-hero-main>`,
   styles: ['h1 { font-weight: normal; }']
 })
 export class HeroAppComponent {

aio/content/examples/component-styles/src/app/hero-controls.component.ts

@@ -3,7 +3,7 @@ import { Hero } from './hero';
 
 // #docregion inlinestyles
 @Component({
-  selector: 'hero-controls',
+  selector: 'app-hero-controls',
   template: `
     <style>
       button {

aio/content/examples/component-styles/src/app/hero-details.component.ts

@@ -3,13 +3,13 @@ import { Hero } from './hero';
 
 // #docregion styleurls
 @Component({
-  selector: 'hero-details',
+  selector: 'app-hero-details',
   template: `
     <h2>{{hero.name}}</h2>
-    <hero-team [hero]=hero></hero-team>
+    <app-hero-team [hero]=hero></app-hero-team>
     <ng-content></ng-content>
   `,
-  styleUrls: ['app/hero-details.component.css']
+  styleUrls: ['./hero-details.component.css']
 })
 export class HeroDetailsComponent {
   // #enddocregion styleurls

aio/content/examples/component-styles/src/app/hero-team.component.css

@@ -1,3 +0,0 @@
-li {
-  list-style-type: square;
-}

aio/content/examples/component-styles/src/app/hero-team.component.ts

@@ -3,9 +3,9 @@ import { Hero } from './hero';
 
 // #docregion stylelink
 @Component({
-  selector: 'hero-team',
+  selector: 'app-hero-team',
   template: `
-    <link rel="stylesheet" href="app/hero-team.component.css">
+    <link rel="stylesheet" href="assets/hero-team.component.css">
     <h3>Team</h3>
     <ul>
       <li *ngFor="let member of hero.team">

aio/content/examples/component-styles/src/app/quest-summary.component.ts

@@ -4,7 +4,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
 
 // #docregion
 @Component({
-  selector: 'quest-summary',
+  selector: 'app-quest-summary',
   // #docregion urls
   templateUrl: './quest-summary.component.html',
   styleUrls:  ['./quest-summary.component.css']