diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/app.ts b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/app.ts
index 785f127a2a7..aa67bfde28d 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ArticleCommentsComponent} from './article-comments.component';
+import {ArticleComments} from './article-comments';
 
 @Component({
   selector: 'app-root',
@@ -22,6 +22,6 @@ import {ArticleCommentsComponent} from './article-comments.component';
 
     </div>
   `,
-  imports: [ArticleCommentsComponent],
+  imports: [ArticleComments],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/article-comments.component.ts b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/article-comments.ts
similarity index 92%
rename from adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/article-comments.component.ts
rename to adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/article-comments.ts
index a92992cb753..8d84a38a547 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/article-comments.component.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/answer/src/app/article-comments.ts
@@ -25,4 +25,4 @@ import {Component} from '@angular/core';
   `,
   ],
 })
-export class ArticleCommentsComponent {}
+export class ArticleComments {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/config.json b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/config.json
index f32083f4d06..c8c1fe1085c 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/config.json
+++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/app.ts", "src/app/article-comments.component.ts"],
+  "openFiles": ["src/app/app.ts", "src/app/article-comments.ts"],
   "title": "What are deferrable views",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/app.ts b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/app.ts
index c04f7c52f3d..1d01152fbf4 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/app.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ArticleCommentsComponent} from './article-comments.component';
+import {ArticleComments} from './article-comments';
 
 @Component({
   selector: 'app-root',
@@ -20,6 +20,6 @@ import {ArticleCommentsComponent} from './article-comments.component';
 
     </div>
   `,
-  imports: [ArticleCommentsComponent],
+  imports: [ArticleComments],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/article-comments.component.ts b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/article-comments.ts
similarity index 92%
rename from adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/article-comments.component.ts
rename to adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/article-comments.ts
index a92992cb753..8d84a38a547 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/article-comments.component.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/src/app/article-comments.ts
@@ -25,4 +25,4 @@ import {Component} from '@angular/core';
   `,
   ],
 })
-export class ArticleCommentsComponent {}
+export class ArticleComments {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/app.ts b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/app.ts
index 29ad74c44cc..010d534fbf6 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ArticleCommentsComponent} from './article-comments.component';
+import {ArticleComments} from './article-comments';
 
 @Component({
   selector: 'app-root',
@@ -28,6 +28,6 @@ import {ArticleCommentsComponent} from './article-comments.component';
 
     </div>
   `,
-  imports: [ArticleCommentsComponent],
+  imports: [ArticleComments],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/article-comments.component.ts b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/article-comments.ts
similarity index 92%
rename from adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/article-comments.component.ts
rename to adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/article-comments.ts
index a92992cb753..8d84a38a547 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/article-comments.component.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/answer/src/app/article-comments.ts
@@ -25,4 +25,4 @@ import {Component} from '@angular/core';
   `,
   ],
 })
-export class ArticleCommentsComponent {}
+export class ArticleComments {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/config.json b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/config.json
index 27b9001055f..69eb5ada408 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/config.json
+++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/app.ts", "src/app/article-comments.component.ts"],
+  "openFiles": ["src/app/app.ts", "src/app/article-comments.ts"],
   "title": "@loading, @error and @placeholder blocks",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/app.ts b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/app.ts
index 785f127a2a7..aa67bfde28d 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/app.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ArticleCommentsComponent} from './article-comments.component';
+import {ArticleComments} from './article-comments';
 
 @Component({
   selector: 'app-root',
@@ -22,6 +22,6 @@ import {ArticleCommentsComponent} from './article-comments.component';
 
     </div>
   `,
-  imports: [ArticleCommentsComponent],
+  imports: [ArticleComments],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/article-comments.component.ts b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/article-comments.ts
similarity index 92%
rename from adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/article-comments.component.ts
rename to adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/article-comments.ts
index a92992cb753..8d84a38a547 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/article-comments.component.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/src/app/article-comments.ts
@@ -25,4 +25,4 @@ import {Component} from '@angular/core';
   `,
   ],
 })
-export class ArticleCommentsComponent {}
+export class ArticleComments {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/app.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/app.ts
index 31326c2d05d..fbd6bdfd354 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ArticleCommentsComponent} from './article-comments.component';
+import {ArticleComments} from './article-comments';
 
 @Component({
   selector: 'app-root',
@@ -30,6 +30,6 @@ import {ArticleCommentsComponent} from './article-comments.component';
 
     </div>
   `,
-  imports: [ArticleCommentsComponent],
+  imports: [ArticleComments],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/article-comments.component.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/article-comments.component.ts
deleted file mode 100644
index a92992cb753..00000000000
--- a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/article-comments.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'article-comments',
-  template: `
-    <h2>Comments</h2>
-    <p class="comment">
-      Building for the web is fantastic!
-    </p>
-    <p class="comment">
-      The new template syntax is great
-    </p>
-    <p class="comment">
-      I agree with the other comments!
-    </p>
-  `,
-  styles: [
-    `
-    .comment {
-      padding: 15px;
-      margin-left: 30px;
-      background-color: paleturquoise;
-      border-radius: 20px;
-    }
-  `,
-  ],
-})
-export class ArticleCommentsComponent {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/article-comments.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/article-comments.ts
new file mode 100644
index 00000000000..8d84a38a547
--- /dev/null
+++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/answer/src/app/article-comments.ts
@@ -0,0 +1,28 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'article-comments',
+  template: `
+    <h2>Comments</h2>
+    <p class="comment">
+      Building for the web is fantastic!
+    </p>
+    <p class="comment">
+      The new template syntax is great
+    </p>
+    <p class="comment">
+      I agree with the other comments!
+    </p>
+  `,
+  styles: [
+    `
+    .comment {
+      padding: 15px;
+      margin-left: 30px;
+      background-color: paleturquoise;
+      border-radius: 20px;
+    }
+  `,
+  ],
+})
+export class ArticleComments {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/config.json b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/config.json
index 34fabf5fe9f..ee6cc05cdac 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/config.json
+++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/config.json
@@ -1,5 +1,5 @@
 {
-  "openFiles": ["src/app/app.ts", "src/app/article-comments.component.ts"],
+  "openFiles": ["src/app/app.ts", "src/app/article-comments.ts"],
   "title": "Defer triggers",
   "type": "editor"
 }
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/app.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/app.ts
index 29ad74c44cc..010d534fbf6 100644
--- a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/app.ts
+++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/app.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ArticleCommentsComponent} from './article-comments.component';
+import {ArticleComments} from './article-comments';
 
 @Component({
   selector: 'app-root',
@@ -28,6 +28,6 @@ import {ArticleCommentsComponent} from './article-comments.component';
 
     </div>
   `,
-  imports: [ArticleCommentsComponent],
+  imports: [ArticleComments],
 })
 export class App {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/article-comments.component.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/article-comments.component.ts
deleted file mode 100644
index a92992cb753..00000000000
--- a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/article-comments.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'article-comments',
-  template: `
-    <h2>Comments</h2>
-    <p class="comment">
-      Building for the web is fantastic!
-    </p>
-    <p class="comment">
-      The new template syntax is great
-    </p>
-    <p class="comment">
-      I agree with the other comments!
-    </p>
-  `,
-  styles: [
-    `
-    .comment {
-      padding: 15px;
-      margin-left: 30px;
-      background-color: paleturquoise;
-      border-radius: 20px;
-    }
-  `,
-  ],
-})
-export class ArticleCommentsComponent {}
diff --git a/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/article-comments.ts b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/article-comments.ts
new file mode 100644
index 00000000000..8d84a38a547
--- /dev/null
+++ b/adev/src/content/tutorials/deferrable-views/steps/3-defer-triggers/src/app/article-comments.ts
@@ -0,0 +1,28 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'article-comments',
+  template: `
+    <h2>Comments</h2>
+    <p class="comment">
+      Building for the web is fantastic!
+    </p>
+    <p class="comment">
+      The new template syntax is great
+    </p>
+    <p class="comment">
+      I agree with the other comments!
+    </p>
+  `,
+  styles: [
+    `
+    .comment {
+      padding: 15px;
+      margin-left: 30px;
+      background-color: paleturquoise;
+      border-radius: 20px;
+    }
+  `,
+  ],
+})
+export class ArticleComments {}