// Potrebujete routes, router outlet, navigáciu...
// Plus manuálny state management...
// Plus error handling...
// Celkovo: 80+ riadkov a veľa frustrácie

@Component({
  template: `
    <button (click)="showChart.set(true)">Zobraziť Chart</button>

    @defer (when showChart()) {
      <app-heavy-chart [data]="chartData()" />
    } @loading {
      <app-spinner />
    } @error {
      <div>Nepodarilo sa načítať chart</div>
    }
  `
})
export class DashboardComponent {
  showChart = signal(false);
  chartData = signal([/* data */]);
}

@Component({
  template: `
    <div class="posts">
      @for (post of posts(); track post.id) {
        <app-post [post]="post" />
      }
    </div>

    @defer (on viewport) {
      <app-more-posts (loaded)="handleMorePosts($event)" />
    } @loading {
      <div class="loader">Načítavam...</div>
    } @placeholder {
      <div class="sentinel">Scrolluj pre viac</div>
    }
  `
})
export class PostsComponent {
  posts = signal<Post[]>([]);

  handleMorePosts(newPosts: Post[]) {
    this.posts.update(posts => [...posts, ...newPosts]);
  }
}

// 30 riadkov. 4× menej kódu. 0 memory leakov.

@defer (on viewport; prefetch on idle) {
  <app-user-profile [userId]="userId()" />
} @placeholder (minimum 500ms) {
  <!-- Zabraňuje bliknutiu -->
  <div class="skeleton">
    <div class="skeleton-avatar"></div>
    <div class="skeleton-name"></div>
  </div>
} @loading (minimum 500ms; after 100ms) {
  <!-- Zobrazí len ak trvá dlhšie ako 100ms -->
  <div class="skeleton shimmer">...</div>
}

// Profesionálny UX bez blikania!

@Component({
  template: `
    <!-- Základný obsah (vždy načítaný) -->
    <article class="post">
      <h1>{{ post.title }}</h1>
      <div class="content">{{ post.content }}</div>
    </article>

    <!-- Vylepšenia (lazy loaded) -->
    @defer (on viewport) {
      <app-comments [postId]="post.id" />
    }

    @defer (on interaction) {
      <app-share-buttons [post]="post" />
    }

    @defer (on hover; prefetch on idle) {
      <app-related-posts [postId]="post.id" />
    }
  `
})

// Core content funguje okamžite
// Vylepšenia sa načítavajú progresívne

@Component({
  template: `
    @defer (when isFastConnection()) {
      <app-high-quality-images />
    }

    @defer (when isSlowConnection(); on interaction) {
      <app-low-quality-images />
    } @placeholder {
      <button>Načítať obrázky</button>
    }
  `
})

// Rýchla sieť? Načítaj hneď.
// Pomalá sieť? Počkaj na interakciu.

// ❌ NEBUDE fungovať
@Component({
  standalone: false,  // NgModule komponent
})
export class OldComponent {}

@defer {
  <app-old-component />  // Načíta sa OKAMŽITE! ⚠️
}

// ✅ BUDE fungovať
@Component({
  standalone: true,
})
export class NewComponent {}

@defer {
  <app-new-component />  // Lazy loadne správne ✅
}

// ❌ Problém
@defer {
  <app-chart />
}
<app-chart />  // Aj toto! Teraz sa načíta všetko okamžite! ⚠️

// ✅ Riešenie: Rôzne komponenty
@defer {
  <app-chart-heavy />
}
<app-chart-light />

// ❌ ViewChild referencia zabije lazy loading
@ViewChild(ChartComponent) chart?: ChartComponent;

@defer {
  <app-chart />  // Načíta sa okamžite! ⚠️
}

@defer (on timer(2s)) {
  <app-outer />  <!-- 2s -->

  @defer (on timer(2s)) {
    <app-inner />  <!-- 4s celkovo! -->
  }
}

ng generate @angular/core:standalone

// PRED
async loadChart() {
  const { ChartComponent } = await import('./chart');
  this.vcr.createComponent(ChartComponent);
}

// PO
@defer (on interaction) {
  <app-chart />
}

// 40 riadkov → 3 riadky

Bundle: 2.5 MB
First Contentful Paint: 3.2s
Lighthouse Score: 65

Bundle: 800 KB (-68%)
First Contentful Paint: 1.1s (-66%)
Lighthouse Score: 95 (+30)

Developer: "Chcem lazy loadnúť komponent"
Angular: "Tu máš 4 zložité spôsoby, vyber si"
Developer: *plače*

Developer: "Chcem lazy loadnúť komponent"

@defer {
  <app-component />
}

Developer: "...to je všetko?"
Angular: "To je všetko."
Developer: "Milujem ťa."

if (you.buildAngularApps()) {
  migrate.toStandalone();
  embrace.defer();
  make.usersHappy();
}