4 - Standalone Components: Angular Without NgModules

// app.module.ts - The traditional approach
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './products/product-list.component';
import { ProductDetailComponent } from './products/product-detail.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { HighlightDirective } from './directives/highlight.directive';
import { CurrencyPipe } from './pipes/currency.pipe';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    ProductListComponent,
    ProductDetailComponent,
    CartComponent,
    CheckoutComponent,
    HighlightDirective,
    CurrencyPipe
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

// shared.module.ts
@NgModule({
  declarations: [UserAvatarComponent],
  imports: [ProductModule],  // Imports ProductModule
  exports: [UserAvatarComponent]
})
export class SharedModule { }

// product.module.ts
@NgModule({
  declarations: [ProductCardComponent],
  imports: [SharedModule],   // Imports SharedModule → CIRCULAR!
  exports: [ProductCardComponent]
})
export class ProductModule { }
    

// Angular 14-18: explicit standalone flag
@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `<div class="user-card">
    <h3>{{ user().name }}</h3>
    <p>{{ user().email }}</p>
  </div>`,
  styles: [`
    .user-card {
      padding: 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
  `]
})
export class UserCardComponent {
  user = input.required<User>();
}

// Angular 19+: standalone is the default, no need to specify it
@Component({
  selector: 'app-user-card',
  template: `<div class="user-card">
    <h3>{{ user().name }}</h3>
    <p>{{ user().email }}</p>
  </div>`,
  styles: [`
    .user-card {
      padding: 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
  `]
})
export class UserCardComponent {
  user = input.required<User>();
}
    

import { Component, input, output, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-todo-item',
  standalone: true,
  imports: [CommonModule],  // Dependencies managed here
  template: `
    <div class="todo-item" [class.completed]="todo().completed">
      <input type="checkbox"
             [checked]="todo().completed"
             (change)="onToggle()" />
      <span>{{ todo().title }}</span>
      <button (click)="onDelete()">Delete</button>
    </div>
  `
})
export class TodoItemComponent {
  todo = input.required<Todo>();
  toggled = output<number>();
  deleted = output<number>();

  onToggle() {
    this.toggled.emit(this.todo().id);
  }

  onDelete() {
    this.deleted.emit(this.todo().id);
  }
}
    

import { Directive, ElementRef, input, effect } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  appHighlight = input<string>('yellow');

  constructor(private el: ElementRef) {
    effect(() => {
      this.el.nativeElement.style.backgroundColor = this.appHighlight();
    });
  }
}
    

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'timeAgo',
  standalone: true
})
export class TimeAgoPipe implements PipeTransform {
  transform(value: Date): string {
    const seconds = Math.floor((new Date().getTime() - value.getTime()) / 1000);

    if (seconds < 60) return 'just now';
    if (seconds < 3600) return Math.floor(seconds / 60) + ' minutes ago';
    if (seconds < 86400) return Math.floor(seconds / 3600) + ' hours ago';
    return Math.floor(seconds / 86400) + ' days ago';
  }
}
    

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import { AsyncPipe, DatePipe, CurrencyPipe } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

// Import standalone components directly
import { UserCardComponent } from './user-card.component';
import { LoadingSpinnerComponent } from '../shared/loading-spinner.component';
import { HighlightDirective } from '../directives/highlight.directive';
import { TimeAgoPipe } from '../pipes/time-ago.pipe';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [
    // Angular modules (for compatibility)
    ReactiveFormsModule,

    // Standalone pipes
    AsyncPipe,
    DatePipe,
    CurrencyPipe,
    TimeAgoPipe,

    // Standalone components
    UserCardComponent,
    LoadingSpinnerComponent,

    // Standalone directives
    HighlightDirective,

    // Router
    RouterLink,
    RouterOutlet
  ],
  templateUrl: './dashboard.component.html'
})
export class DashboardComponent {
  // The component knows all its dependencies
}
    

// app.routes.ts - Complete routing configuration without modules
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./home/home.component').then(m => m.HomeComponent)
  },
  {
    path: 'products',
    loadComponent: () =>
      import('./products/product-list.component').then(m => m.ProductListComponent)
  },
  {
    path: 'products/:id',
    loadComponent: () =>
      import('./products/product-detail.component').then(m => m.ProductDetailComponent)
  },
  {
    path: 'cart',
    loadComponent: () =>
      import('./cart/cart.component').then(m => m.CartComponent)
  },
  {
    path: '**',
    loadComponent: () =>
      import('./not-found/not-found.component').then(m => m.NotFoundComponent)
  }
];
    

// app.routes.ts
export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes').then(m => m.ADMIN_ROUTES)
  }
];

// admin/admin.routes.ts - Standalone routes file
import { Routes } from '@angular/router';

export const ADMIN_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./admin-layout.component').then(m => m.AdminLayoutComponent),
    children: [
      {
        path: 'dashboard',
        loadComponent: () =>
          import('./dashboard/dashboard.component').then(m => m.DashboardComponent)
      },
      {
        path: 'users',
        loadComponent: () =>
          import('./users/users.component').then(m => m.UsersComponent)
      },
      {
        path: 'settings',
        loadComponent: () =>
          import('./settings/settings.component').then(m => m.SettingsComponent)
      }
    ]
  }
];
    

// main.ts - Traditional approach
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    

// main.ts - Standalone approach
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));
    

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
import { provideHttpClient, withInterceptors, withFetch } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

import { routes } from './app.routes';
import { authInterceptor } from './interceptors/auth.interceptor';
import { errorInterceptor } from './interceptors/error.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    // Change detection (or provideExperimentalZonelessChangeDetection())
    provideZoneChangeDetection({ eventCoalescing: true }),

    // Router with view transitions
    provideRouter(routes, withViewTransitions()),

    // HTTP client with functional interceptors
    provideHttpClient(
      withFetch(),
      withInterceptors([authInterceptor, errorInterceptor])
    ),

    // Async animations
    provideAnimationsAsync(),

    // Hydration for SSR
    provideClientHydration(withEventReplay())
  ]
};
    

import { Injectable, signal } from '@angular/core';

@Injectable({
  providedIn: 'root'  // Tree-shakable singleton
})
export class CartService {
  private _items = signal<CartItem[]>([]);
  readonly items = this._items.asReadonly();

  readonly totalItems = computed(() => this._items().length);
  readonly totalPrice = computed(() =>
    this._items().reduce((sum, item) => sum + item.price * item.quantity, 0)
  );

  addItem(product: Product) {
    this._items.update(items => [...items, {
      ...product,
      quantity: 1
    }]);
  }

  removeItem(id: number) {
    this._items.update(items => items.filter(item => item.id !== id));
  }
}
    

// admin/admin.routes.ts
export const ADMIN_ROUTES: Routes = [
  {
    path: '',
    providers: [
      // This service is available ONLY in admin components
      AdminAuthService,
      // Configurable providers also work
      {
        provide: API_BASE_URL,
        useValue: '/api/admin'
      }
    ],
    children: [
      {
        path: 'dashboard',
        loadComponent: () =>
          import('./dashboard.component').then(m => m.DashboardComponent)
      },
      {
        path: 'users',
        loadComponent: () =>
          import('./users.component').then(m => m.UsersComponent)
      }
    ]
  }
];
    

@Component({
  selector: 'app-editor',
  standalone: true,
  providers: [
    // New instance for every editor component
    EditorStateService,
    {
      provide: UNDO_STACK_SIZE,
      useValue: 50
    }
  ],
  template: `...`
})
export class EditorComponent {
  private editorState = inject(EditorStateService);
}
    

# Phase 1: Convert components, directives, and pipes to standalone
ng generate @angular/core:standalone-migration --mode=convert-to-standalone

# What it does:
# - Adds standalone: true to all components/directives/pipes
# - Adds the necessary imports in each component's decorator
# - Keeps existing NgModules for compatibility
    

# Phase 2: Remove NgModules that are no longer needed
ng generate @angular/core:standalone-migration --mode=prune-ng-modules

# What it does:
# - Removes NgModules that contain only standalone declarations
# - Updates imports in files that referenced them
# - Keeps modules that define providers or other configurations
    

# Phase 3: Convert the application bootstrap
ng generate @angular/core:standalone-migration --mode=standalone-bootstrap

# What it does:
# - Converts main.ts to use bootstrapApplication()
# - Creates app.config.ts with providers
# - Removes AppModule if no longer necessary
# - Migrates providers from the module to the configuration
    

// BEFORE: product-card.component.ts (in an NgModule)
@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html'
})
export class ProductCardComponent {
  @Input() product!: Product;
  @Output() addToCart = new EventEmitter<Product>();
}

// product.module.ts
@NgModule({
  declarations: [ProductCardComponent, ProductListComponent],
  imports: [CommonModule, RouterModule],
  exports: [ProductCardComponent]
})
export class ProductModule { }
    

// AFTER: product-card.component.ts (standalone)
import { Component, input, output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-product-card',
  standalone: true,
  imports: [RouterLink, CurrencyPipe],
  templateUrl: './product-card.component.html'
})
export class ProductCardComponent {
  product = input.required<Product>();
  addToCart = output<Product>();
}

// product.module.ts → DELETED!
// Routes point directly to the components
    

// shared/ui/index.ts - Barrel export
export { ButtonComponent } from './button/button.component';
export { CardComponent } from './card/card.component';
export { ModalComponent } from './modal/modal.component';
export { TabsComponent } from './tabs/tabs.component';
export { TooltipDirective } from './tooltip/tooltip.directive';
export { TimeAgoPipe } from './pipes/time-ago.pipe';
export { TruncatePipe } from './pipes/truncate.pipe';

// Usage in a component:
import {
  ButtonComponent,
  CardComponent,
  TooltipDirective,
  TruncatePipe
} from '../shared/ui';

@Component({
  standalone: true,
  imports: [ButtonComponent, CardComponent, TooltipDirective, TruncatePipe],
  // ...
})
export class MyFeatureComponent { }
    

// shared/common-imports.ts
import { RouterLink } from '@angular/router';
import { DatePipe, CurrencyPipe, AsyncPipe } from '@angular/common';
import { ButtonComponent } from './ui/button/button.component';
import { CardComponent } from './ui/card/card.component';
import { LoadingSpinnerComponent } from './ui/loading-spinner/loading-spinner.component';

export const COMMON_IMPORTS = [
  RouterLink,
  DatePipe,
  CurrencyPipe,
  AsyncPipe,
  ButtonComponent,
  CardComponent,
  LoadingSpinnerComponent
] as const;

// Usage:
@Component({
  standalone: true,
  imports: [...COMMON_IMPORTS, ReactiveFormsModule],
  // ...
})
export class CheckoutComponent { }
    

<!-- The HeavyChart component loads only when it enters the viewport -->
@defer (on viewport) {
  <app-heavy-chart [data]="chartData()" />
} @placeholder {
  <div class="chart-placeholder">Loading chart...</div>
} @loading (minimum 500ms) {
  <app-loading-spinner />
}

<!-- The Comments component loads only on interaction -->
@defer (on interaction) {
  <app-comments [postId]="postId()" />
} @placeholder {
  <button>Show comments</button>
}
    

src/app/
  app.component.ts          # Root component (standalone)
  app.config.ts             # ApplicationConfig with providers
  app.routes.ts             # Main routes

  core/                     # Singleton services and guards
    services/
      auth.service.ts       # providedIn: 'root'
      api.service.ts        # providedIn: 'root'
    interceptors/
      auth.interceptor.ts
    guards/
      auth.guard.ts

  shared/                   # Reusable components, directives, pipes
    ui/
      button/
        button.component.ts     # standalone
      card/
        card.component.ts       # standalone
      modal/
        modal.component.ts      # standalone
      index.ts                  # barrel export
    directives/
      tooltip.directive.ts      # standalone
    pipes/
      time-ago.pipe.ts          # standalone

  features/                 # Application features
    products/
      product-list.component.ts   # standalone
      product-detail.component.ts # standalone
      product-card.component.ts   # standalone (local)
      products.routes.ts          # sub-routes
    admin/
      admin-layout.component.ts
      dashboard.component.ts
      admin.routes.ts
    

// product-card.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ProductCardComponent } from './product-card.component';

describe('ProductCardComponent', () => {
  let fixture: ComponentFixture<ProductCardComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      // With standalone, just import the component!
      imports: [ProductCardComponent]
      // No need for: declarations, module imports, etc.
    }).compileComponents();

    fixture = TestBed.createComponent(ProductCardComponent);
  });

  it('should display the product name', () => {
    // Use ComponentRef to set inputs
    fixture.componentRef.setInput('product', {
      id: 1,
      name: 'Angular T-Shirt',
      price: 29.99
    });
    fixture.detectChanges();

    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.textContent).toContain('Angular T-Shirt');
  });

  it('should emit addToCart when the button is clicked', () => {
    fixture.componentRef.setInput('product', {
      id: 1,
      name: 'Angular T-Shirt',
      price: 29.99
    });
    fixture.detectChanges();

    const spy = jest.spyOn(fixture.componentInstance.addToCart, 'emit');
    const button = fixture.nativeElement.querySelector('button');
    button.click();

    expect(spy).toHaveBeenCalledWith(expect.objectContaining({
      id: 1
    }));
  });
});