Fix LCP in Angular

// hero.component.ts
import { Component } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-hero',
  standalone: true,
  imports: [NgOptimizedImage],
  template: `
    <!-- Bad: plain img with no preload, no dimensions -->
    <!-- <img src="/images/hero.jpg" alt="Hero image" /> -->

    <!-- Good: NgOptimizedImage with priority generates a preload link -->
    <img
      ngSrc="/images/hero.jpg"
      alt="Product hero image"
      width="1200"
      height="600"
      priority
    />

    <!-- For images from a CDN image loader (e.g. Cloudinary, Imgix) -->
    <img
      ngSrc="hero"
      alt="Product hero image"
      width="1200"
      height="600"
      priority
      [ngSrcset]="'400w, 800w, 1200w'"
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  `,
})
export class HeroComponent {}

// app.config.ts -- register an image loader for CDN support
import { provideImgixLoader } from '@angular/common';

export const appConfig = {
  providers: [
    // Replace with your CDN base URL
    provideImgixLoader('https://your-project.imgix.net/'),
  ],
};

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    // HomeComponent loads eagerly -- it is the LCP route
    loadComponent: () =>
      import('./home/home.component').then(m => m.HomeComponent),
  },
  {
    path: 'products',
    // Products page loads only when navigated to
    loadComponent: () =>
      import('./products/products.component').then(m => m.ProductsComponent),
  },
  {
    path: 'products/:id',
    loadComponent: () =>
      import('./product-detail/product-detail.component').then(
        m => m.ProductDetailComponent
      ),
  },
  {
    path: 'admin',
    // Entire admin section in a lazy-loaded child route config
    loadChildren: () =>
      import('./admin/admin.routes').then(m => m.adminRoutes),
  },
];

// main.ts -- bootstrap with standalone providers
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
  ],
});

<!-- product-page.component.html -->

<!-- Above-fold content: renders immediately -->
<app-hero [product]="product" />
<app-product-details [product]="product" />

<!-- Below-fold: defer until the section enters the viewport -->
@defer (on viewport) {
  <app-reviews-section [productId]="product.id" />
} @loading {
  <!-- Placeholder shown while the chunk downloads -->
  <div class="reviews-skeleton" style="height: 400px;"></div>
} @placeholder {
  <!-- Shown before the defer trigger fires -->
  <div class="reviews-placeholder" style="height: 400px;"></div>
}

@defer (on viewport) {
  <app-related-products [categoryId]="product.categoryId" />
} @placeholder {
  <div class="related-placeholder" style="height: 320px;"></div>
}

<!-- Defer on interaction: load only when user clicks -->
@defer (on interaction) {
  <app-size-guide />
} @placeholder {
  <button class="size-guide-trigger">View size guide</button>
}

// Add SSR to an existing Angular project:
// ng add @angular/ssr

// app.config.server.ts -- server-specific providers
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';

const serverConfig: ApplicationConfig = {
  providers: [provideServerRendering()],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

// product-detail.component.ts -- using TransferState
import { Component, inject, OnInit } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { isPlatformServer } from '@angular/common';
import { PLATFORM_ID } from '@angular/core';

const PRODUCT_KEY = makeStateKey<Product>('product');

@Component({
  selector: 'app-product-detail',
  standalone: true,
  template: `
    <app-hero [product]="product" />
  `,
})
export class ProductDetailComponent implements OnInit {
  private transferState = inject(TransferState);
  private http = inject(HttpClient);
  private platformId = inject(PLATFORM_ID);

  product: Product | null = null;

  async ngOnInit() {
    // On server: fetch and store in TransferState
    if (isPlatformServer(this.platformId)) {
      this.product = await this.http
        .get<Product>('/api/product/1')
        .toPromise() ?? null;
      this.transferState.set(PRODUCT_KEY, this.product);
    } else {
      // On client: rehydrate from TransferState (no extra HTTP request)
      this.product = this.transferState.get(PRODUCT_KEY, null);
      this.transferState.remove(PRODUCT_KEY);
    }
  }
}

// Before: NgModule-based (poor tree-shaking)
// app.module.ts imports everything into one module
@NgModule({
  declarations: [
    AppComponent,
    HeroComponent,
    ProductListComponent,
    AdminDashboardComponent, // pulled into main bundle even on home page
    ChartsComponent,         // same -- adds ~80 kB to main chunk
  ],
  imports: [BrowserModule, RouterModule, SharedModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

// After: standalone component (explicit, tree-shakeable imports)
// hero.component.ts
import { Component } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-hero',
  standalone: true,
  // Only imports actually used in this component's template
  imports: [NgOptimizedImage, RouterLink],
  template: `
    <section class="hero">
      <img ngSrc="/images/hero.jpg" width="1200" height="600" priority alt="Hero" />
      <a routerLink="/products">Shop now</a>
    </section>
  `,
})
export class HeroComponent {}

// Migration command (Angular 15+):
// ng generate @angular/core:standalone
// Automatically converts declarations to standalone and updates imports.