diff --git a/apps/angular/52-lazy-load-component/src/app/app.component.ts b/apps/angular/52-lazy-load-component/src/app/app.component.ts
index 6d8c03d29..6b7239d89 100644
--- a/apps/angular/52-lazy-load-component/src/app/app.component.ts
+++ b/apps/angular/52-lazy-load-component/src/app/app.component.ts
@@ -1,23 +1,24 @@
-import { Component, signal } from '@angular/core';
+import { Component } from '@angular/core';
+import { PlaceholderComponent } from './placeholder.component';
+import { TopComponent } from './top.component';
 
 @Component({
   selector: 'app-root',
+  imports: [TopComponent, PlaceholderComponent],
+
   template: `
     <div class="h-screen bg-gray-500">
-      @if (topLoaded()) {
+      @defer (on interaction(loadComponent)) {
         <app-top />
-      } @else {
+      } @placeholder {
         <app-placeholder />
         <button
-          class="rounded-sm border border-blue-500 bg-blue-300 p-2"
-          (click)="topLoaded.set(true)">
+          #loadComponent
+          class="rounded-sm border border-blue-500 bg-blue-300 p-2">
           Load Top
         </button>
       }
     </div>
   `,
-  standalone: false,
 })
-export class AppComponent {
-  topLoaded = signal(false);
-}
+export class AppComponent {}
diff --git a/apps/angular/52-lazy-load-component/src/app/app.module.ts b/apps/angular/52-lazy-load-component/src/app/app.module.ts
deleted file mode 100644
index b5d430e67..000000000
--- a/apps/angular/52-lazy-load-component/src/app/app.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-import { PlaceholderComponent } from './placeholder.component';
-import { TopComponent } from './top.component';
-
-@NgModule({
-  declarations: [AppComponent, PlaceholderComponent, TopComponent],
-  imports: [BrowserModule],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
diff --git a/apps/angular/52-lazy-load-component/src/app/placeholder.component.ts b/apps/angular/52-lazy-load-component/src/app/placeholder.component.ts
index cbb2b5fa6..051e39491 100644
--- a/apps/angular/52-lazy-load-component/src/app/placeholder.component.ts
+++ b/apps/angular/52-lazy-load-component/src/app/placeholder.component.ts
@@ -13,6 +13,5 @@ import { Component } from '@angular/core';
       height: 50%;
     }
   `,
-  standalone: false,
 })
 export class PlaceholderComponent {}
diff --git a/apps/angular/52-lazy-load-component/src/app/top.component.ts b/apps/angular/52-lazy-load-component/src/app/top.component.ts
index e1ca9012c..d9104bef3 100644
--- a/apps/angular/52-lazy-load-component/src/app/top.component.ts
+++ b/apps/angular/52-lazy-load-component/src/app/top.component.ts
@@ -13,6 +13,5 @@ import { Component } from '@angular/core';
       height: 50%;
     }
   `,
-  standalone: false,
 })
 export class TopComponent {}
diff --git a/apps/angular/52-lazy-load-component/src/main.ts b/apps/angular/52-lazy-load-component/src/main.ts
index 16de2365d..31c5da482 100644
--- a/apps/angular/52-lazy-load-component/src/main.ts
+++ b/apps/angular/52-lazy-load-component/src/main.ts
@@ -1,6 +1,4 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent).catch((err) => console.error(err));