diff --git a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/app.ts
index 7df6c11ea79..787f0f5c673 100644
--- a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {CommentsComponent} from './comments.component';
+import {Comments} from './comments';
 
 @Component({
   selector: 'app-root',
@@ -62,6 +62,6 @@ import {CommentsComponent} from './comments.component';
       }
     </div>
   `,
-  imports: [CommentsComponent],
+  imports: [Comments],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/comments.component.ts b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/comments.ts
similarity index 88%
rename from adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/comments.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/comments.ts
index 8c9c186b2a7..b1746b9fc49 100644
--- a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/comments.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/answer/src/app/comments.ts
@@ -10,4 +10,4 @@ import {Component} from '@angular/core';
     </ul>
   `,
 })
-export class CommentsComponent {}
+export class Comments {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/config.json b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/config.json
index 77bc7d58b85..b38b3c4de61 100644
--- a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/config.json
+++ b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/app.ts", "src/app/comments.component.ts"],
+  "openFiles": ["src/app/app.ts", "src/app/comments.ts"],
   "title": "Deferrable views",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/app.ts
index b9beba6443a..3db1c752dcd 100644
--- a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {CommentsComponent} from './comments.component';
+import {Comments} from './comments';
 
 @Component({
   selector: 'app-root',
@@ -10,6 +10,6 @@ import {CommentsComponent} from './comments.component';
       <comments />
     </div>
   `,
-  imports: [CommentsComponent],
+  imports: [Comments],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/comments.component.ts b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/comments.ts
similarity index 88%
rename from adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/comments.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/comments.ts
index 8c9c186b2a7..b1746b9fc49 100644
--- a/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/comments.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/src/app/comments.ts
@@ -10,4 +10,4 @@ import {Component} from '@angular/core';
     </ul>
   `,
 })
-export class CommentsComponent {}
+export class Comments {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/app.ts
index 1f87407f501..6ad5866234c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/app.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/user.ts
similarity index 95%
rename from adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/user.ts
index 9ec7e6cd730..7248be2bc71 100644
--- a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/answer/src/app/user.ts
@@ -19,7 +19,7 @@ import {NgOptimizedImage} from '@angular/common';
   `,
   imports: [NgOptimizedImage],
 })
-export class UserComponent {
+export class User {
   logoUrl = '/assets/logo.svg';
   logoAlt = 'Angular logo';
   username = 'youngTech';
diff --git a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/config.json b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/config.json
index b80a4e9621b..159d4ecd208 100644
--- a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/config.json
+++ b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/user.component.ts"],
+  "openFiles": ["src/app/user.ts"],
   "title": "Optimizing images",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/app.ts
index 1f87407f501..6ad5866234c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/app.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/user.ts
similarity index 94%
rename from adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/user.ts
index 240cde9531f..e04d82805d9 100644
--- a/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/src/app/user.ts
@@ -18,7 +18,7 @@ import {Component} from '@angular/core';
   `,
   imports: [],
 })
-export class UserComponent {
+export class User {
   logoUrl = '/assets/logo.svg';
   logoAlt = 'Angular logo';
   username = 'youngTech';
diff --git a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/home/home.component.ts b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/home/home.ts
similarity index 80%
rename from adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/home/home.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/home/home.ts
index 58543721aef..b86e87c406a 100644
--- a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/home/home.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/home/home.ts
@@ -6,4 +6,4 @@ import {Component} from '@angular/core';
     <div>Home Page</div>
   `,
 })
-export class HomeComponent {}
+export class Home {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/user/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/user/user.ts
similarity index 85%
rename from adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/user/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/user/user.ts
index 4540dca4757..377730b1e26 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/user/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/user/user.ts
@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
     <div>Username: {{ username }}</div>
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/home/home.component.ts b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/home/home.ts
similarity index 80%
rename from adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/home/home.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/home/home.ts
index 58543721aef..b86e87c406a 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/home/home.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/home/home.ts
@@ -6,4 +6,4 @@ import {Component} from '@angular/core';
     <div>Home Page</div>
   `,
 })
-export class HomeComponent {}
+export class Home {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/user/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/user/user.ts
similarity index 85%
rename from adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/user/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/user/user.ts
index 4540dca4757..377730b1e26 100644
--- a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/user/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/user/user.ts
@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
     <div>Username: {{ username }}</div>
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
index 37b25fe0ff2..61fc58fb0d9 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md
@@ -22,19 +22,19 @@ To define a route, add a route object to the `routes` array in `app.routes.ts` t
 ```ts
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
+import {Home} from './home/home';
 
 export const routes: Routes = [
   {
     path: '',
-    component: HomeComponent,
+    component: Home,
   },
 ];
 ```
 
-The code above is an example of how `HomeComponent` can be added as a route. Now go ahead and implement this along with the `UserComponent` in the playground.
+The code above is an example of how `Home` can be added as a route. Now go ahead and implement this along with the `User` in the playground.
 
-Use `'user'` for the path of `UserComponent`.
+Use `'user'` for the path of `User`.
 
 </docs-step>
 
@@ -47,13 +47,13 @@ In `app.routes.ts`, add the `title` property to the default route (`path: ''`) a
 <docs-code language="ts" highlight="[8]">
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
+import {Home} from './home/home';
 
 export const routes: Routes = [
 {
 path: '',
 title: 'App Home Page',
-component: HomeComponent,
+component: Home,
 },
 ];
 </docs-code>
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/app.routes.ts b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/app.routes.ts
index 53f8b60b995..c443a6de2c3 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/app.routes.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/app.routes.ts
@@ -1,17 +1,17 @@
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
-import {UserComponent} from './user/user.component';
+import {Home} from './home/home';
+import {User} from './user/user';
 
 export const routes: Routes = [
   {
     path: '',
     title: 'App Home Page',
-    component: HomeComponent,
+    component: Home,
   },
   {
     path: 'user',
     title: 'App User Page',
-    component: UserComponent,
+    component: User,
   },
 ];
diff --git a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/home/home.component.ts b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/home/home.ts
similarity index 80%
rename from adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/home/home.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/home/home.ts
index 58543721aef..b86e87c406a 100644
--- a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/src/app/home/home.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/home/home.ts
@@ -6,4 +6,4 @@ import {Component} from '@angular/core';
     <div>Home Page</div>
   `,
 })
-export class HomeComponent {}
+export class Home {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/user/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/user/user.ts
similarity index 85%
rename from adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/user/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/user/user.ts
index 4540dca4757..377730b1e26 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/user/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/answer/src/app/user/user.ts
@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
     <div>Username: {{ username }}</div>
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/config.json b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/config.json
index 431e738a8ba..fe8e6e65460 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/config.json
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/app.routes.ts", "src/app/home/home.component.ts"],
+  "openFiles": ["src/app/app.routes.ts", "src/app/home/home.ts"],
   "title": "Define a route",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/app.routes.ts b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/app.routes.ts
index 704109cab5a..ffdfa77e451 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/app.routes.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/app.routes.ts
@@ -1,5 +1,5 @@
 import {Routes} from '@angular/router';
-import {HomeComponent} from './home/home.component';
-import {UserComponent} from './user/user.component';
+import {Home} from './home/home';
+import {User} from './user/user';
 
 export const routes: Routes = [];
diff --git a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/home/home.component.ts b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/home/home.ts
similarity index 80%
rename from adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/home/home.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/home/home.ts
index 58543721aef..b86e87c406a 100644
--- a/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/home/home.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/home/home.ts
@@ -6,4 +6,4 @@ import {Component} from '@angular/core';
     <div>Home Page</div>
   `,
 })
-export class HomeComponent {}
+export class Home {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/user/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/user/user.ts
similarity index 85%
rename from adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/user/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/user/user.ts
index 4540dca4757..377730b1e26 100644
--- a/adev/src/content/tutorials/learn-angular/steps/12-enable-routing/answer/src/app/user/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/13-define-a-route/src/app/user/user.ts
@@ -6,6 +6,6 @@ import {Component} from '@angular/core';
     <div>Username: {{ username }}</div>
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/app.routes.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/app.routes.ts
index 53f8b60b995..c443a6de2c3 100644
--- a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/app.routes.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/app.routes.ts
@@ -1,17 +1,17 @@
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
-import {UserComponent} from './user/user.component';
+import {Home} from './home/home';
+import {User} from './user/user';
 
 export const routes: Routes = [
   {
     path: '',
     title: 'App Home Page',
-    component: HomeComponent,
+    component: Home,
   },
   {
     path: 'user',
     title: 'App User Page',
-    component: UserComponent,
+    component: User,
   },
 ];
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/home/home.component.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/home/home.component.ts
deleted file mode 100644
index 58543721aef..00000000000
--- a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/home/home.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  template: `
-    <div>Home Page</div>
-  `,
-})
-export class HomeComponent {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/home/home.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/home/home.ts
new file mode 100644
index 00000000000..b86e87c406a
--- /dev/null
+++ b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/home/home.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <div>Home Page</div>
+  `,
+})
+export class Home {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/user/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/user/user.component.ts
deleted file mode 100644
index 4540dca4757..00000000000
--- a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/user/user.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-user',
-  template: `
-    <div>Username: {{ username }}</div>
-  `,
-})
-export class UserComponent {
-  username = 'youngTech';
-}
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/user/user.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/user/user.ts
new file mode 100644
index 00000000000..377730b1e26
--- /dev/null
+++ b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/answer/src/app/user/user.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  template: `
+    <div>Username: {{ username }}</div>
+  `,
+})
+export class User {
+  username = 'youngTech';
+}
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/app.routes.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/app.routes.ts
index 53f8b60b995..c443a6de2c3 100644
--- a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/app.routes.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/app.routes.ts
@@ -1,17 +1,17 @@
 import {Routes} from '@angular/router';
 
-import {HomeComponent} from './home/home.component';
-import {UserComponent} from './user/user.component';
+import {Home} from './home/home';
+import {User} from './user/user';
 
 export const routes: Routes = [
   {
     path: '',
     title: 'App Home Page',
-    component: HomeComponent,
+    component: Home,
   },
   {
     path: 'user',
     title: 'App User Page',
-    component: UserComponent,
+    component: User,
   },
 ];
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/home/home.component.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/home/home.component.ts
deleted file mode 100644
index 58543721aef..00000000000
--- a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/home/home.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-home',
-  template: `
-    <div>Home Page</div>
-  `,
-})
-export class HomeComponent {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/home/home.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/home/home.ts
new file mode 100644
index 00000000000..b86e87c406a
--- /dev/null
+++ b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/home/home.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `
+    <div>Home Page</div>
+  `,
+})
+export class Home {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/user/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/user/user.component.ts
deleted file mode 100644
index 4540dca4757..00000000000
--- a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/user/user.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'app-user',
-  template: `
-    <div>Username: {{ username }}</div>
-  `,
-})
-export class UserComponent {
-  username = 'youngTech';
-}
diff --git a/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/user/user.ts b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/user/user.ts
new file mode 100644
index 00000000000..377730b1e26
--- /dev/null
+++ b/adev/src/content/tutorials/learn-angular/steps/14-routerLink/src/app/user/user.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  template: `
+    <div>Username: {{ username }}</div>
+  `,
+})
+export class User {
+  username = 'youngTech';
+}
diff --git a/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md b/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
index dfba1b0fa1d..e58201ad60a 100644
--- a/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/15-forms/README.md
@@ -14,7 +14,7 @@ In this activity, you'll learn how to set up a form using a template-driven appr
 
 <docs-step title="Create an input field">
 
-In `user.component.ts`, update the template by adding a text input with the `id` set to `framework`, type set to `text`.
+In `user.ts`, update the template by adding a text input with the `id` set to `framework`, type set to `text`.
 
 ```angular-html
 <label for="framework">
@@ -29,7 +29,7 @@ In `user.component.ts`, update the template by adding a text input with the `id`
 
 For this form to use Angular features that enable data binding to forms, you'll need to import the `FormsModule`.
 
-Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `UserComponent`.
+Import the `FormsModule` from `@angular/forms` and add it to the `imports` array of the `User`.
 
 <docs-code language="ts" highlight="[2, 7]">
 import {Component} from '@angular/core';
@@ -39,7 +39,7 @@ import {FormsModule} from '@angular/forms';
 ...
 imports: [FormsModule],
 })
-export class UserComponent {}
+export class User {}
 </docs-code>
 
 </docs-step>
diff --git a/adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/app.ts
index 1f87407f501..6ad5866234c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/app.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/user.ts
similarity index 94%
rename from adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/user.ts
index bfd805d3453..9aec27d9208 100644
--- a/adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/15-forms/answer/src/app/user.ts
@@ -13,7 +13,7 @@ import {FormsModule} from '@angular/forms';
   `,
   imports: [FormsModule],
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
   username = 'youngTech';
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/15-forms/config.json b/adev/src/content/tutorials/learn-angular/steps/15-forms/config.json
index 60b676958c1..93aec312fc5 100644
--- a/adev/src/content/tutorials/learn-angular/steps/15-forms/config.json
+++ b/adev/src/content/tutorials/learn-angular/steps/15-forms/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/user.component.ts"],
+  "openFiles": ["src/app/user.ts"],
   "title": "Forms",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/app.ts
index 1f87407f501..6ad5866234c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/app.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/user.ts
similarity index 91%
rename from adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/user.ts
index 161d91fd052..7ea190233db 100644
--- a/adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/15-forms/src/app/user.ts
@@ -9,7 +9,7 @@ import {Component} from '@angular/core';
   `,
   imports: [],
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
   favoriteFramework = '';
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
index b3e5c61593c..c8ac0f1f84d 100644
--- a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md
@@ -26,7 +26,7 @@ To display the input value in a template, you can use the interpolation syntax `
     </label>
   `,
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
 }
 </docs-code>
@@ -47,7 +47,7 @@ When you need to reference the input field value in the component class, you can
   `,
   ...
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
   ...
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/app.ts
index 1f87407f501..6ad5866234c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/app.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/user.ts
similarity index 95%
rename from adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/user.ts
index b32e5336286..5389607220a 100644
--- a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/answer/src/app/user.ts
@@ -14,7 +14,7 @@ import {FormsModule} from '@angular/forms';
   `,
   imports: [FormsModule],
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
   username = 'youngTech';
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/config.json b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/config.json
index 3e44ff94bd1..08423a22691 100644
--- a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/config.json
+++ b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/user.component.ts"],
+  "openFiles": ["src/app/user.ts"],
   "title": "Getting form control values",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/app.ts
index 1f87407f501..6ad5866234c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/app.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/user.ts
similarity index 94%
rename from adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/user.ts
index a96361dc27e..6fb463f7bb6 100644
--- a/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/16-form-control-values/src/app/user.ts
@@ -14,7 +14,7 @@ import {FormsModule} from '@angular/forms';
   `,
   imports: [FormsModule],
 })
-export class UserComponent {
+export class User {
   favoriteFramework = '';
   username = 'youngTech';
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
index 7ef8efa6843..6415d5e8711 100644
--- a/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md
@@ -12,7 +12,7 @@ It is often helpful to initialize class properties with values provided by the D
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
-class PetCareDashboardComponent {
+class PetCareDashboard {
     petRosterService = inject(PetRosterService);
 }
 </docs-code>
diff --git a/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md b/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
index 0aab257b543..534dfd4a7d7 100644
--- a/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md
@@ -14,7 +14,7 @@ To inject a service or some other injectable resource into your component use th
 
 <docs-code language="ts" highlight="[3]">
 @Component({...})
-class PetCarDashboardComponent {
+class PetCarDashboard {
     constructor(private petCareService: PetCareService) {
         ...
     }
diff --git a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
index eef1a95ca54..8d207f7c75c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md
@@ -10,16 +10,16 @@ In this activity, you'll learn how to compose components.
 
 <hr/>
 
-In this example, there are two components `UserComponent` and `App`.
+In this example, there are two components `User` and `App`.
 
 <docs-workflow>
 
-<docs-step title="Add a reference to `UserComponent`">
-Update the `App` template to include a reference to the `UserComponent` which uses the selector `app-user`. Be sure to add `UserComponent` to the imports array of `App`, this makes it available for use in the `App` template.
+<docs-step title="Add a reference to `User`">
+Update the `App` template to include a reference to the `User` which uses the selector `app-user`. Be sure to add `User` to the imports array of `App`, this makes it available for use in the `App` template.
 
 ```ts
 template: `<app-user />`,
-imports: [UserComponent]
+imports: [User]
 ```
 
 The component now displays the message `Username: youngTech`. You can update the template code to include more markup.
diff --git a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/answer/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/answer/src/app/app.ts
index dfa65d1cf0c..08edb6ed51d 100644
--- a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/answer/src/app/app.ts
@@ -6,7 +6,7 @@ import {Component} from '@angular/core';
     Username: {{ username }}
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }
 
@@ -17,6 +17,6 @@ export class UserComponent {
       <app-user />
     </section>
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/src/app/app.ts
index 1d5da1f7638..f2cd974df2d 100644
--- a/adev/src/content/tutorials/learn-angular/steps/3-composing-components/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/3-composing-components/src/app/app.ts
@@ -6,7 +6,7 @@ import {Component} from '@angular/core';
     Username: {{ username }}
   `,
 })
-export class UserComponent {
+export class User {
   username = 'youngTech';
 }
 
diff --git a/adev/src/content/tutorials/learn-angular/steps/8-input/README.md b/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
index 5d6707dc9d9..5d115d07702 100644
--- a/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/8-input/README.md
@@ -12,8 +12,8 @@ In this activity, you'll learn how to use the `@Input` decorator to send informa
 
 To create an `Input` property, add the `@Input` decorator to a property of a component class:
 
-<docs-code header="user.component.ts" language="ts">
-class UserComponent {
+<docs-code header="user.ts" language="ts">
+class User {
   @Input() occupation = '';
 }
 </docs-code>
@@ -28,9 +28,9 @@ When you are ready to pass in a value through an `Input`, values can be set in t
 class App {}
 </docs-code>
 
-Make sure you bind the property `occupation` in your `UserComponent`.
+Make sure you bind the property `occupation` in your `User`.
 
-<docs-code header="user.component.ts" language="angular-ts">
+<docs-code header="user.ts" language="angular-ts">
 @Component({
   ...
   template: `<p>The user's occupation is {{occupation}}</p>`
@@ -40,7 +40,7 @@ Make sure you bind the property `occupation` in your `UserComponent`.
 <docs-workflow>
 
 <docs-step title="Define an `@Input` property">
-Update the code in `user.component.ts` to define an `Input` property on the `UserComponent` called `name`. For now, set the initial value to `empty string`. Be sure to update the template to interpolate the `name` property at the end of the sentence.
+Update the code in `user.ts` to define an `Input` property on the `User` called `name`. For now, set the initial value to `empty string`. Be sure to update the template to interpolate the `name` property at the end of the sentence.
 </docs-step>
 
 <docs-step title="Pass a value to the `@Input` property">
diff --git a/adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/app.ts
index bbab3ac709d..1045ab35edc 100644
--- a/adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/app.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user name="Simran" />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/user.ts
similarity index 85%
rename from adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/user.ts
index 25e0cb63049..14f7530f210 100644
--- a/adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/8-input/answer/src/app/user.ts
@@ -6,6 +6,6 @@ import {Component, Input} from '@angular/core';
     <p>The user's name is {{ name }}</p>
   `,
 })
-export class UserComponent {
+export class User {
   @Input() name = '';
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/8-input/config.json b/adev/src/content/tutorials/learn-angular/steps/8-input/config.json
index 590e513ee83..cf23ded83a1 100644
--- a/adev/src/content/tutorials/learn-angular/steps/8-input/config.json
+++ b/adev/src/content/tutorials/learn-angular/steps/8-input/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/user.component.ts", "src/app/app.ts"],
+  "openFiles": ["src/app/user.ts", "src/app/app.ts"],
   "title": "Communicating with @Input",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/8-input/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/8-input/src/app/app.ts
index 1f87407f501..6ad5866234c 100644
--- a/adev/src/content/tutorials/learn-angular/steps/8-input/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/8-input/src/app/app.ts
@@ -1,11 +1,11 @@
 import {Component} from '@angular/core';
-import {UserComponent} from './user.component';
+import {User} from './user';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-user />
   `,
-  imports: [UserComponent],
+  imports: [User],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/8-input/src/app/user.component.ts b/adev/src/content/tutorials/learn-angular/steps/8-input/src/app/user.ts
similarity index 82%
rename from adev/src/content/tutorials/learn-angular/steps/8-input/src/app/user.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/8-input/src/app/user.ts
index 23a907db538..eda4049b9f1 100644
--- a/adev/src/content/tutorials/learn-angular/steps/8-input/src/app/user.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/8-input/src/app/user.ts
@@ -6,4 +6,4 @@ import {Component, Input} from '@angular/core';
     <p>The user's name is</p>
   `,
 })
-export class UserComponent {}
+export class User {}
diff --git a/adev/src/content/tutorials/learn-angular/steps/9-output/README.md b/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
index 710ba467eb4..2a4fc48d560 100644
--- a/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
+++ b/adev/src/content/tutorials/learn-angular/steps/9-output/README.md
@@ -12,17 +12,17 @@ In this activity, you'll learn how to use the `@Output` decorator and `EventEmit
 
 To create the communication path from child to parent components, use the `@Output` decorator on a class property and assign it a value of type `EventEmitter`:
 
-<docs-code header="child.component.ts" language="ts">
+<docs-code header="child.ts" language="ts">
 @Component({...})
-class ChildComponent {
+class Child {
     @Output() incrementCountEvent = new EventEmitter<number>();
 }
 </docs-code>
 
 Now the component can generate events that can be listened to by the parent component. Trigger events by calling the `emit` method:
 
-<docs-code header="child.component.ts" language="ts">
-class ChildComponent {
+<docs-code header="child.ts" language="ts">
+class Child {
     ...
 
     onClick() {
@@ -40,13 +40,13 @@ Alright, your turn to give this a try. Complete the code by following these task
 <docs-workflow>
 
 <docs-step title="Add an `@Output` property">
-Update `child.component.ts` by adding an output property called `addItemEvent`, be sure to set the EventEmitter type to be `string`.
+Update `child.ts` by adding an output property called `addItemEvent`, be sure to set the EventEmitter type to be `string`.
 </docs-step>
 
 <docs-step title="Complete `addItem` method">
-In `child.component.ts` update the `addItem` method; use the following code as the logic:
+In `child.ts` update the `addItem` method; use the following code as the logic:
 
-<docs-code header="child.component.ts" highlight="[2]" language="ts">
+<docs-code header="child.ts" highlight="[2]" language="ts">
 addItem() {
   this.addItemEvent.emit('🐢');
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/app.ts
index e17c8481be6..3ffad6e2148 100644
--- a/adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ChildComponent} from './child.component';
+import {Child} from './child';
 
 @Component({
   selector: 'app-root',
@@ -7,7 +7,7 @@ import {ChildComponent} from './child.component';
     <app-child (addItemEvent)="addItem($event)" />
     <p>🐢 all the way down {{ items.length }}</p>
   `,
-  imports: [ChildComponent],
+  imports: [Child],
 })
 export class App {
   items = new Array();
diff --git a/adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/child.component.ts b/adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/child.ts
similarity index 91%
rename from adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/child.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/child.ts
index 5a3d1657ef5..199b4b82a54 100644
--- a/adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/child.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/9-output/answer/src/app/child.ts
@@ -7,7 +7,7 @@ import {Component, Output, EventEmitter} from '@angular/core';
     <button class="btn" (click)="addItem()">Add Item</button>
   `,
 })
-export class ChildComponent {
+export class Child {
   @Output() addItemEvent = new EventEmitter<string>();
 
   addItem() {
diff --git a/adev/src/content/tutorials/learn-angular/steps/9-output/config.json b/adev/src/content/tutorials/learn-angular/steps/9-output/config.json
index d4f2475b2ce..1b62d5443fc 100644
--- a/adev/src/content/tutorials/learn-angular/steps/9-output/config.json
+++ b/adev/src/content/tutorials/learn-angular/steps/9-output/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/child.component.ts", "src/app/app.ts"],
+  "openFiles": ["src/app/child.ts", "src/app/app.ts"],
   "title": "Communicating with @Output",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/learn-angular/steps/9-output/src/app/app.ts b/adev/src/content/tutorials/learn-angular/steps/9-output/src/app/app.ts
index 7d3e08971fd..37fb6612218 100644
--- a/adev/src/content/tutorials/learn-angular/steps/9-output/src/app/app.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/9-output/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ChildComponent} from './child.component';
+import {Child} from './child';
 
 @Component({
   selector: 'app-root',
@@ -7,7 +7,7 @@ import {ChildComponent} from './child.component';
     <app-child />
     <p>🐢 all the way down {{ items.length }}</p>
   `,
-  imports: [ChildComponent],
+  imports: [Child],
 })
 export class App {
   items = new Array();
diff --git a/adev/src/content/tutorials/learn-angular/steps/9-output/src/app/child.component.ts b/adev/src/content/tutorials/learn-angular/steps/9-output/src/app/child.ts
similarity index 88%
rename from adev/src/content/tutorials/learn-angular/steps/9-output/src/app/child.component.ts
rename to adev/src/content/tutorials/learn-angular/steps/9-output/src/app/child.ts
index e282c70cb7e..be08950ff47 100644
--- a/adev/src/content/tutorials/learn-angular/steps/9-output/src/app/child.component.ts
+++ b/adev/src/content/tutorials/learn-angular/steps/9-output/src/app/child.ts
@@ -7,6 +7,6 @@ import {Component, Output, EventEmitter} from '@angular/core';
     <button class="btn" (click)="addItem()">Add Item</button>
   `,
 })
-export class ChildComponent {
+export class Child {
   addItem() {}
 }