For Angular Single Page Applications (SPAs), New Relic Browser Monitoring offers complete observability. Using the @newrelic/browser-agent NPM package, which offers a more manageable method than conventional script-based implementations, this article shows how to incorporate New Relic into an Angular application.

Before starting, ensure you have:

• Angular Application (Angular 15+ recommended)
• New Relic Account with Browser Monitoring enabled
• New Relic Credentials:

• Account ID
• License Key (Browser monitoring license key)
• Application ID
• Agent ID
• Trust Key

You can find these credentials in your New Relic account:
Go to Account Settings → API keys → Browser monitoring

Why Use NPM Package Instead of Script Tag?
Advantages:

• TypeScript support with full type safety
• Environment-based configuration management
• Better integration with Angular's build system
• Custom service layer for easier usage
• Framework-specific features (SPA route tracking, HTTP interception)
• Version control through package. json

Installation
Install the New Relic Browser Agent Package
npm install @newrelic/browse

Configuration
Add New Relic Configuration to Environment Files
export const environment = {
  newRelic: {
    enabled: true,
    accountID: 'YOUR_ACCOUNT_ID',
    trustKey: 'YOUR_TRUST_KEY',
    agentID: 'YOUR_AGENT_ID',
    licenseKey: 'YOUR_LICENSE_KEY',
    applicationID: 'YOUR_APPLICATION_ID'
  }
};

Create separate configurations for different environments (development, staging, production) with appropriate credentials.
Implementation

Step 1: Initialize New Relic in main.ts
The New Relic agent should be initialized after Angular bootstraps.
import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
import { provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS } from '@angular/common/http';
import {NewRelicHttpInterceptor} from './app/global/services/newrelic-handler/newrelic-http.interceptor';

// ... other imports and providers

if (environment.production) {
  enableProdMode();
}

// Bootstrap Angular first
bootstrapApplication(AppComponent, {
  providers : [
    // ... your other providers
    provideHttpClient(withInterceptorsFromDi()),

    // NEW RELIC: Register HTTP Interceptor
    {
      provide : HTTP_INTERCEPTORS,
      useClass : NewRelicHttpInterceptor,
      multi : true
    }
  ]
})
    .then(() => {
      if (environment.newRelic?.enabled) {
        setTimeout(() => {
          try {
            // Capture native console functions before agent patches
            const nativeWarn = console.warn.bind(console);
            const nativeError = console.error.bind(console);

            // Initialize New Relic Browser Agent
            new BrowserAgent( {
              init : {
                distributed_tracing : { enabled : true },
                privacy : { cookies_enabled : true },
                ajax : { deny_list : [], enabled : true },
                session_trace : { enabled : true },
                session_replay : {
                  enabled : true,
                  sampling_rate : 10,
                  error_sampling_rate : 100
                },
                jserrors : {
                  enabled : true,
                  harvestConsoleErrors : false  // Don't capture console.error
                } as any,
                logging : {
                  enabled : true,
                  harvestConsoleErrors : false,
                  harvestConsoleWarns : false,
                  harvestConsoleInfo : false
                } as any,
                metrics : { enabled : true },
                page_action : { enabled : true }
              },
              info : {
                beacon : 'bam.nr-data.net',
                errorBeacon : 'bam.nr-data.net',
                licenseKey : environment.newRelic.licenseKey,
                applicationID : environment.newRelic.applicationID,
                sa : 1
              },
              loader_config : {
                accountID : environment.newRelic.accountID,
                trustKey : environment.newRelic.trustKey,
                agentID : environment.newRelic.agentID,
                licenseKey : environment.newRelic.licenseKey,
                applicationID : environment.newRelic.applicationID
              }
            });

            // Restore native console functions to prevent console logs from
            // being sent to New Relic
            console.warn = nativeWarn;
            console.error = nativeError;

            // Optional: Customize New Relic logging behavior
            const nr : any = (window as any).newrelic;
            if (nr?.log) {
              const originalLog = nr.log.bind(nr);
              nr.log = function(message: string, attributes ?: any) {
                const enhancedAttributes = { ... attributes };
                return originalLog(message, enhancedAttributes);
              };
            }
          } catch (error) {
            console.error('New Relic initialization failed:', error);
          }
        }, 100);
      }
    })
    .catch(err => console.log(err));

• Initialize after Angular bootstrap to ensure proper timing
• Capture and restore console functions to prevent console logs from being sent to New Relic
• Wrap initialization in try-catch for error handling

Step 2: Create New Relic Service Wrapper
Create a service to wrap New Relic functionality: src/app/global/services/newrelic-handler/newrelic.service.ts
import { Injectable } from '@angular/core';
@Injectable({providedIn: 'root'})
export class NewRelicService {
  private isInitialized = false;

  constructor() {
    // Check if New Relic is already initialized (from main.ts)
    if ((window as any).newrelic) {
      this.isInitialized = true;
    }
  }

  /**
   * Report custom error to New Relic
   * @param error - Error object
   * @param customAttributes - Additional attributes to track
   */
  noticeError(error: Error, customAttributes?: Record<string, any>): void {
    if (!this.isReady()) return;

    try {
      const attributes = {
        timestamp: new Date().toISOString(),
        errorName: error.name,
        errorMessage: error.message,
        errorStack: (error as any).originalStack || error.stack,
        userAgent: navigator.userAgent,
        url: window.location.href,
        ...customAttributes
      };
      const nr = (window as any).newrelic;

      if (nr.log) {
        Object.entries(attributes).forEach(([key, value]) => {
          if (value !== undefined && value !== null && typeof value !== 'object') {
            try {
              nr.setCustomAttribute(key, value);
            } catch {}
          }
        });
        nr.log(error.message || 'Error occurred', {
          level: 'ERROR',
          ...attributes
        });
      }
    } catch (e) {
      console.error('New Relic error reporting failed:', e);
    }
  }

  /**
   * Track custom user action/event
   * @param name - Name of the action
   * @param attributes - Custom attributes for the action
   */
  addPageAction(name: string, attributes?: Record<string, any>): void {
    if (!this.isReady()) return;

    try {
      (window as any).newrelic.addPageAction(name, {
        ...attributes,
        timestamp: new Date().toISOString(),
        url: window.location.href,
        userAgent: navigator.userAgent
      });
    } catch (e) {
      console.error('New Relic page action failed:', e);
    }
  }

  /**
   * Set custom attribute for the current session
   * @param name - Attribute name
   * @param value - Attribute value
   */
  setCustomAttribute(name: string, value: string | number | boolean): void {
    if (!this.isReady()) return;

    try {
      (window as any).newrelic.setCustomAttribute(name, value);
    } catch (e) {
      console.error('New Relic custom attribute failed:', e);
    }
  }

  /**
   * Set user ID for tracking
   * @param userId - Unique user identifier
   */
  setUserId(userId: string): void {
    this.setCustomAttribute('userId', userId);
    this.setCustomAttribute('enduser.id', userId);
  }

  /**
   * Set user information
   * @param userInfo - User information object
   */
  setUserInfo(userInfo: { userId: string; email?: string; name?: string; role?: string }): void {
    if (userInfo.userId) this.setUserId(userInfo.userId);
    if (userInfo.email) this.setCustomAttribute('userEmail', userInfo.email);
    if (userInfo.name) this.setCustomAttribute('userName', userInfo.name);
    if (userInfo.role) this.setCustomAttribute('userRole', userInfo.role);
  }

  /**
   * Track page view manually (useful for SPA)
   * @param pageName - Name of the page/route
   */
  setPageViewName(pageName: string): void {
    if (!this.isReady()) return;

    try {
      (window as any).newrelic.setPageViewName(pageName);
    } catch (e) {
      console.error('New Relic page view name failed:', e);
    }
  }

  /**
   * Add release version for tracking
   * @param version - Application version
   */
  setApplicationVersion(version: string): void {
    this.setCustomAttribute('applicationVersion', version);
    this.setCustomAttribute('release', version);
  }

  /**
   * Check if New Relic is initialized and ready with full API
   */
  isReady(): boolean {
    const nr = (window as any).newrelic;
    const isReady =
      !!nr &&
      typeof nr.addPageAction === 'function' &&
      typeof nr.noticeError === 'function';

    if (isReady && !this.isInitialized) {
      this.isInitialized = true;
    }
    return isReady;
  }

  /**
   * Track custom metric
   * @param metricName - Name of the metric
   * @param value - Metric value
   * @param unit - Unit of measurement (default: 'ms')
   */
  trackMetric(metricName: string, value: number, unit: string = 'ms'): void {
    this.addPageAction('CustomMetric', { metricName, value, unit });
  }
}

• Provides a clean TypeScript interface to New Relic
• Includes readiness checks before making API calls
• Handles errors gracefully
• Adds useful metadata automatically

Step 3: Create Router Tracking Service
For SPAs, tracking route changes is crucial. So, create: src/app/global/services/newrelic-handler/newrelic-router-tracker.service.ts
import { Injectable } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, Event } from '@angular/router';
import { NewRelicService } from './newrelic.service';
import { filter } from 'rxjs/operators';

@Injectable({  providedIn: 'root'})
export class NewRelicRouterTrackerService {
  private navigationStartTime: number = 0;
  private currentUrl: string = '';
  private previousUrl: string = '';

  constructor(
    private router: Router,
    private newRelicService: NewRelicService
  ) {}

  /**
   * Start tracking Angular router navigation events
   */
  startTracking(): void {
    if (this.newRelicService.isReady()) {
      this.initializeTracking();
    } else {
      // Use polling with exponential backoff to wait for New Relic
      this.waitForNewRelic();
    }
  }

  /**
   * Wait for New Relic to be ready before initializing tracking
   * Uses polling with exponential backoff
   */
  private waitForNewRelic(attempt: number = 1, maxAttempts: number = 10): void {
    // Start with 100ms, increase with each attempt (100, 200, 400, 800, etc.)
    const delay = Math.min(100 * Math.pow(2, attempt - 1), 3000);

    console.log(`Waiting for New Relic to be ready (attempt ${attempt}/${maxAttempts})...`);

    setTimeout(() => {
      if (this.newRelicService.isReady()) {
        console.log('✓ New Relic is now ready, starting router tracking');
        this.initializeTracking();
      } else if (attempt < maxAttempts) {
        this.waitForNewRelic(attempt + 1, maxAttempts);
      } else {
        console.warn(`New Relic not ready after ${maxAttempts} attempts, router tracking disabled`);
      }
    }, delay);
  }

  /**
   * Initialize the actual tracking once New Relic is ready
   */
  private initializeTracking(): void {
    // Track navigation start
    this.router.events.pipe(
      filter((event: Event): event is NavigationStart => event instanceof NavigationStart)
    ).subscribe((event: NavigationStart) => {
      this.navigationStartTime = performance.now();
      this.previousUrl = this.currentUrl;
      this.currentUrl = event.url;

      this.newRelicService.addPageAction('RouteChangeStart', {
        url: event.url,
        previousUrl: this.previousUrl,
        navigationTrigger: event.navigationTrigger,
        restoredState: event.restoredState ? 'yes' : 'no'
      });
    });

    // Track navigation end (success)
    this.router.events.pipe(
      filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      const duration = performance.now() - this.navigationStartTime;

      this.newRelicService.addPageAction('RouteChangeComplete', {
        url: event.urlAfterRedirects,
        previousUrl: this.previousUrl,
        duration: Math.round(duration),
        status: 'success'
      });

      // Set page view name for better tracking in New Relic
      const pageName = this.extractPageName(event.urlAfterRedirects);
      this.newRelicService.setPageViewName(pageName);

      // Track as successful route change metric
      this.newRelicService.trackMetric('RouteChangeDuration', duration, 'ms');
    });

    // Track navigation errors
    this.router.events.pipe(
      filter((event: Event): event is NavigationError => event instanceof NavigationError)
    ).subscribe((event: NavigationError) => {
      const duration = performance.now() - this.navigationStartTime;

      this.newRelicService.addPageAction('RouteChangeError', {
        url: event.url,
        previousUrl: this.previousUrl,
        duration: Math.round(duration),
        status: 'error',
        errorMessage: event.error?.message || 'Unknown navigation error'
      });

      // Report as error to New Relic
      const error = new Error(`Navigation Error: ${event.error?.message || 'Unknown error'}`);
      this.newRelicService.noticeError(error, {
        errorType: 'NavigationError',
        url: event.url,
        previousUrl: this.previousUrl
      });
    });

    // Track navigation cancel
    this.router.events.pipe(
      filter((event: Event): event is NavigationCancel => event instanceof NavigationCancel)
    ).subscribe((event: NavigationCancel) => {
      const duration = performance.now() - this.navigationStartTime;

      this.newRelicService.addPageAction('RouteChangeCancel', {
        url: event.url,
        previousUrl: this.previousUrl,
        duration: Math.round(duration),
        status: 'cancelled',
        reason: event.reason
      });
    });

    console.log('✓ New Relic Router Tracking started');
  }

  /**
   * Extract a clean page name from URL
   * @param url - Full URL path
   */
  private extractPageName(url: string): string {
    // Remove query parameters and fragments
    let cleanUrl = url.split('?')[0].split('#')[0];

    // Remove leading slash
    if (cleanUrl.startsWith('/')) {
      cleanUrl = cleanUrl.substring(1);
    }

    // If empty, it's the home page
    if (!cleanUrl) {
      return 'Home';
    }

    // Replace slashes with dots and capitalize
    const pageName = cleanUrl
      .split('/')
      .map(part => part.charAt(0).toUpperCase() + part.slice(1))
      .join('.');

    return pageName;
  }

  /**
   * Track specific route manually
   * @param routeName - Name of the route
   * @param metadata - Additional metadata
   */
  trackRouteManually(routeName: string, metadata?: Record<string, any>): void {
    this.newRelicService.addPageAction('ManualRouteTrack', {
      routeName,
      url: window.location.href,
      ...metadata
    });
  }
}

• Handles timing issues with exponential backoff polling
• Tracks all router events (start, end, error, cancel)
• Measures navigation duration
• Extracts clean page names for better dashboard organization

Step 4: Create HTTP Interceptor
Track API calls automatically: src/app/global/services/newrelic-handler/newrelic-http.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { NewRelicService } from './newrelic.service';

@Injectable()
export class NewRelicHttpInterceptor implements HttpInterceptor {
  constructor(private newRelicService: NewRelicService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.newRelicService.isReady()) {
      return next.handle(req);
    }

    const startTime = performance.now();
    const requestDetails = {
      url: req.url,
      method: req.method,
      urlWithParams: req.urlWithParams
    };

    return next.handle(req).pipe(
      tap(
        event => {
          if (event instanceof HttpResponse) {
            const duration = Math.round(performance.now() - startTime);

            this.newRelicService.addPageAction('APICallSuccess', {
              ...requestDetails,
              statusCode: event.status,
              statusText: event.statusText,
              duration,
              responseType: event.type,
              contentType: event.headers.get('content-type') || 'unknown'
            });

            this.newRelicService.trackMetric(`API_${req.method}_Duration`, duration);
          }
        },
        error => {
          if (error instanceof HttpErrorResponse) {
            const duration = Math.round(performance.now() - startTime);

            this.newRelicService.addPageAction('APICallFailure', {
              ...requestDetails,
              statusCode: error.status,
              statusText: error.statusText,
              errorMessage: error.message,
              errorName: error.name,
              duration
            });

            const errorObj = new Error(`API Error`);

            this.newRelicService.noticeError(errorObj, {
              errorType: 'HttpError',
              httpMethod: req.method,
              apiUrl: req.url,
              apiEndpoint: new URL(req.url).pathname,
              statusCode: error.status,
              statusText: error.statusText,
              errorMessage: error.message,
              serverErrorMessage: error.error?.error || error.error?.message || error.error,
              duration,
              pageUrl: window.location.href,
              pagePath: window.location.pathname,
              timestamp: new Date().toISOString()
            });
          }
        }
      )
    );
  }
}

• Automatically tracks all HTTP requests
• Measures API call duration
• Captures success and failure scenarios
• Provides detailed error information

Step 5: Initialize Router Tracking in AppComponent
Start router tracking in your root component: src/app/app.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NewRelicRouterTrackerService } from './global/services/newrelic-handler/newrelic-router-tracker.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private newRelicRouterTracker: NewRelicRouterTrackerService
  ) {}

  ngOnInit() {
    // ... other initialization code

    // Start New Relic router tracking
    this.startNewRelicRouterTracking();
  }

  /**
   * Start New Relic Router Tracking
   */
  private startNewRelicRouterTracking(): void {
    try {
      // Start router tracking for SPA navigation
      this.newRelicRouterTracker.startTracking();
    } catch (error) {
      // Silently fail if New Relic is not available
      console.debug('New Relic router tracking not started:', error);
    }
  }
}

Advanced Features
User Identification
Track user sessions with user information:
import { NewRelicService } from './global/services/newrelic-handler/newrelic.service';

constructor(private newRelicService: NewRelicService) {}

onUserLogin(user: any) {
  this.newRelicService.setUserInfo({
    userId: user.id,
    email: user.email,
    name: user.name,
    role: user.role
  });
}

Custom Events
Track custom business events:
// Track a button click
this.newRelicService.addPageAction('ButtonClick', {
  buttonName: 'SubmitForm',
  formType: 'Contact',
  timestamp: new Date().toISOString()
});

// Track a purchase
this.newRelicService.addPageAction('Purchase', {
  productId: '123',
  amount: 99.99,
  currency: 'USD'
});

Application Version Tracking
Track application versions for release management:
this.newRelicService.setApplicationVersion('1.2.3');

Performance Considerations

• New Relic data is batched and sent asynchronously
• The agent has minimal performance impact
• Use custom attributes sparingly to avoid payload size issues

From being a developer-friendly superset of JavaScript, TypeScript has gradually evolved into a key component of contemporary web development, particularly for extensive Angular apps. TypeScript is now positioned to play an even more crucial role with the growth of AI-driven development. TypeScript's type safety, AI-assisted coding, and intelligent code generation are influencing how developers create dependable, scalable, and maintainable apps in 2025.

The future of TypeScript in AI-driven development is examined in this article. We will discuss best practices for Angular projects, practical implementation tactics, integration with AI technologies, and what senior developers should anticipate when implementing AI-augmented workflows.

Why TypeScript is Central to Modern Development?
JavaScript is flexible, but its flexibility comes with risk. Bugs caused by type mismatches, runtime errors, and unpredictable behaviour are common in large codebases. TypeScript solves these problems by introducing static typing, interfaces, enums, and advanced type inference, making applications easier to scale and maintain.

Key advantages of TypeScript in 2025

• Type safety: Reduce runtime errors through compile-time checks.
• Intelligent tooling: IDEs provide better autocomplete, refactoring tools, and error detection.
• Maintainable code: Interfaces and types enforce consistency across modules.
• Seamless Angular integration: Angular is built with TypeScript, and modern Angular projects heavily rely on TypeScript features.

AI-Driven Development: What It Means
AI-driven development is not science fiction—it is now a practical reality. AI can assist in:

• Code generation: Suggesting boilerplate, component structures, or complete services.
• Bug detection: Finding type mismatches, logical errors, or unused variables.
• Refactoring recommendations: Suggesting cleaner, more efficient code patterns.
• Automated testing: Generating unit and integration tests intelligently.

For TypeScript developers, AI is especially powerful because static types make it easier for AI tools to predict correct code and catch potential errors.

TypeScript in AI-Assisted Coding Workflows
AI-driven tools like GitHub Copilot, Codeium, and OpenAI’s code models are increasingly being used in production workflows. Here’s how TypeScript fits naturally:

1. AI-Powered Code Suggestions
TypeScript’s type system allows AI tools to:

• Predict method signatures
• Suggest valid property names
• Automatically handle generics

Example in an Angular service
interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUser(id: number): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

With AI assistance, developers can generate similar services for multiple entities with minimal manual input. Type inference ensures generated code is type-safe.

2. Automated Refactoring
AI tools can suggest refactorings based on type definitions, e.g., replacing any with strongly-typed interfaces, or converting nested callbacks into RxJS streams in Angular projects.

Before AI refactor
function fetchData(url: string): any {
  return fetch(url).then((res) => res.json());
}

After AI refactor (TypeScript-assisted):

interface ApiResponse {
  data: string[];
}

async function fetchData(url: string): Promise<ApiResponse> {
  const response = await fetch(url);
  return response.json() as ApiResponse;
}

This makes code more predictable, type-safe, and ready for AI-assisted test generation.

3. Intelligent Test Generation
AI can generate unit tests for TypeScript classes, especially in Angular applications:
describe('UserService', () => {
  let service: UserService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [UserService],
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('should fetch user by ID', () => {
    const dummyUser: User = { id: 1, name: 'Rohit', email: '[email protected]' };

    service.getUser(1).subscribe((user) => {
      expect(user).toEqual(dummyUser);
    });

    const req = httpMock.expectOne('/api/users/1');
    expect(req.request.method).toBe('GET');
    req.flush(dummyUser);
  });
});

AI tools can now automatically generate similar tests by analyzing TypeScript interfaces and method signatures, reducing manual effort and improving reliability.

Angular and TypeScript: A Perfect Match for AI
Angular’s adoption of TypeScript makes it AI-friendly. Features like strict mode, standalone components, and decorators allow AI-assisted tools to understand the component tree, dependency injection, and service hierarchy.

AI-Assisted Component Generation
Suppose you need a reusable CardComponent in Angular:
@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <h2>{{title}}</h2>
      <p>{{description}}</p>
    </div>
  `,
  styles: [`
    .card { padding: 1rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
  `]
})
export class CardComponent {
  @Input() title!: string;
  @Input() description!: string;
}

AI tools can auto-generate templates, CSS, and even input validation based on TypeScript interfaces, significantly reducing boilerplate work.

1. Standalone Component Scaffolding
Angular 15+ supports standalone components, which are fully self-contained. AI can now scaffold these components, wiring up imports automatically:
@Component({
  selector: 'app-user-profile',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent {
  @Input() user!: User;
}

AI can detect missing imports, suggest reactive forms, and even generate mock data for testing—all guided by TypeScript interfaces.

2. Dependency Injection and AI
Angular’s DI system is strongly typed. AI can predict which services a component needs and generate constructors accordingly:
constructor(private userService: UserService, private router: Router) {}

The AI model can automatically generate mock providers for unit tests based on type annotations, speeding up test coverage.

Future TypeScript Features That Will Boost AI Development
1. Improved Type Inference
Upcoming versions of TypeScript will allow more intelligent type inference for complex generics and mapped types, enabling AI tools to generate more precise code without explicit type hints.

2. TypeScript and Machine Learning Models
AI tools can now analyze TypeScript AST (Abstract Syntax Tree) to understand data flow, type relationships, and component hierarchy, allowing for:

• Automatic code refactoring
• Type-safe API consumption
• Smarter error detection

3. Enhanced Decorators for AI
Proposals for metadata-rich decorators will allow AI to understand component roles more precisely and even suggest optimizations for performance, lazy loading, or change detection strategies in Angular applications.

Real-World Best Practices for TypeScript in AI Workflows

• Enable strict mode: Always use "strict": true in tsconfig.json to maximize type safety.
• Use interfaces extensively: This allows AI tools to infer expected structures and generate valid code.
• Leverage generics: Generics improve reusability and help AI suggest correct method signatures.
• Modular design: Keep services, components, and utility functions isolated. AI can better generate or modify code in modular structures.
• Document types clearly: JSDoc and comments help AI understand intent beyond type annotations.
• Automate testing: Pair TypeScript type safety with AI-assisted unit and integration tests.
• Refactor regularly: AI can suggest improvements, but senior developers must review for business logic correctness.

Challenges and Considerations

While TypeScript and AI-driven development are powerful, there are challenges:

• Over-reliance on AI: Blindly accepting AI-generated code may introduce subtle bugs.
• Complex generics: AI may misinterpret advanced TypeScript features.
• Type drift: In large monorepos, keeping types consistent is critical.
• Performance implications: AI-generated code may need optimization for runtime performance, especially in Angular applications.

Senior developers must supervise AI-generated code, maintain type integrity, and enforce team coding standards.

The Road Ahead

• By 2025, we can expect:
• AI-assisted TypeScript refactoring to be part of CI/CD pipelines.
• Real-time AI suggestions in IDEs for Angular component design, RxJS stream management, and service injection.
• TypeScript-first AI frameworks that prioritize type safety while generating full-stack applications.
• Automated accessibility compliance by analyzing TypeScript and Angular templates.

TypeScript, AI, and Angular work together to build a productivity multiplier that lets developers concentrate on business logic, architecture, and user experience while intelligently handling repetitive or error-prone activities.

Conclusion
In 2025, TypeScript will be the cornerstone of AI-driven development, particularly for Angular applications. It is no longer merely a superset of JavaScript. It is essential for creating dependable, maintainable, and scalable programs because of its sophisticated interfaces, static typing, and compatibility with AI-powered tools.

Senior engineers should adopt AI procedures while upholding tight typing, automated testing, and modular design best practices. With TypeScript serving as the foundation for AI-assisted coding, the future holds safer code, quicker development cycles, and more intelligent applications.

Users frequently need to swiftly and precisely search vast volumes of documents, PDFs, or text data in contemporary workplace systems. When it comes to unstructured content or semantic inquiries, traditional keyword-based search might be sluggish and inefficient. This is resolved by AI-powered document search, which uses machine learning models to interpret user searches and provide extremely pertinent results.

This post describes how to integrate AI embeddings, a search backend, and a responsive Angular frontend to create a production-ready AI-powered document search system in Angular.

1. Introduction

Searching through large document collections presents challenges:

• Users may not know the exact keywords.
• Documents may be unstructured, e.g., PDFs or Word files.
• Semantic relationships between queries and content are often missed.

AI-powered search addresses these by:

• Converting documents and queries into embeddings (vectors).
• Using similarity search algorithms to find relevant content.
• Supporting natural language queries, summarization, and contextual retrieval.

2. Why AI-Powered Document Search
Traditional keyword search:

• Relies on exact matches
• Often returns irrelevant results
• Struggles with synonyms, abbreviations, and paraphrased queries

AI-powered semantic search:

• Understands intent and context
• Returns highly relevant results
• Enables features like question-answering, summarization, and content recommendations

3. Architecture Overview

A production-ready AI-powered document search system consists of:

• Document Storage: SQL Server, MongoDB, or cloud storage (Azure Blob, S3)
• AI Embedding Service: Converts text into embeddings using OpenAI, HuggingFace, or custom ML models
• Vector Search Engine: Pinecone, Milvus, Weaviate, or Elasticsearch with vector support
• Backend API: ASP.NET Core or Node.js exposing search endpoints
• Angular Frontend: Responsive search interface with results, filters, and document previews

High-Level Flow
Document Ingestion → Embedding Generation → Vector Indexing → User Query → AI Embeddings → Similarity Search → Angular Frontend

4. Technology Stack

• Frontend: Angular 17+, Angular Material for UI components
• Backend: ASP.NET Core 7 Web API
• Database: SQL Server or MongoDB for metadata
• Vector Search: Pinecone, Milvus, or Elasticsearch with vector support
• AI Embeddings: OpenAI API (text-embedding-3-small or -large)
• Deployment: Docker, Kubernetes, Azure, or AWS

5. Document Ingestion and Indexing
Collect documents: PDFs, Word files, HTML, or plain text.

• Extract text: Use libraries like iTextSharp for PDFs or DocX for Word.
• Clean text: Remove unnecessary whitespace, headers, or footers.
• Store metadata: Document ID, title, author, created date, file path.

Example Metadata Table (SQL Server)
CREATE TABLE Documents (
    DocumentId UNIQUEIDENTIFIER PRIMARY KEY,
    Title NVARCHAR(200),
    Author NVARCHAR(100),
    CreatedAt DATETIME,
    FilePath NVARCHAR(500)
);

6. Building an AI Embedding Service
Embeddings are numeric vector representations of text capturing semantic meaning.
Example: ASP.NET Core Embedding Service
public class EmbeddingService : IEmbeddingService
{
    private readonly OpenAIClient _client;

    public EmbeddingService(IConfiguration config)
    {
        _client = new OpenAIClient(new OpenAIClientOptions
        {
            ApiKey = config["OpenAI:ApiKey"]
        });
    }

    public async Task<float[]> GenerateEmbeddingAsync(string text)
    {
        var response = await _client.Embeddings.CreateEmbeddingAsync(
            new EmbeddingsOptions(text)
            {
                Model = "text-embedding-3-small"
            });

        return response.Data[0].Embedding.ToArray();
    }
}

Best Practices

• Batch embeddings for multiple documents to reduce API calls.
• Cache embeddings locally to avoid regenerating frequently.
• Normalize text before generating embeddings.

7. Integrating a Search Backend
Vector search engines allow similarity searches using embeddings.

Using Pinecone (Example)
var queryEmbedding = await _embeddingService.GenerateEmbeddingAsync(userQuery);
var results = await _pineconeClient.QueryAsync(
    indexName: "documents",
    vector: queryEmbedding,
    topK: 10
);

Each document stores DocumentId, Embedding, and optional metadata.
Retrieve the top K results and join with metadata from SQL Server for display.

Alternative: Use Elasticsearch 8+ with dense vector fields for self-hosted solutions.

8. Angular Frontend Implementation
Angular provides a responsive search interface.

Components

• SearchBarComponent: Input box with debounce for AI queries.
• ResultsListComponent: Displays top results with metadata and preview.
• DocumentPreviewComponent: Shows document snippets or full content.

Example Search Service (Angular)
@Injectable({ providedIn: 'root' })
export class DocumentSearchService {
  constructor(private http: HttpClient) {}

  search(query: string): Observable<DocumentResult[]> {
    return this.http.get<DocumentResult[]>(`/api/search?query=${encodeURIComponent(query)}`);
  }
}

Example Component
this.searchService.search(this.query)
  .pipe(debounceTime(300), distinctUntilChanged())
  .subscribe(results => {
    this.results = results;
  });

UI Tips

• Use Angular Material tables or cards to display results.
• Highlight matched keywords or snippets.
• Support filters by document type, date, or author.

9. Enhancing Search Experience

• Autocomplete & Suggestions: Provide query completions using AI.
• Query Expansion: Convert user query into semantically related terms.
• Relevance Feedback: Learn from user clicks to improve ranking.
• Summarization: Show AI-generated summaries for long documents.

10. Security Considerations

• Authenticate API endpoints using JWT or API keys.
• Authorize users for document access based on roles.
• Sanitize uploaded documents to prevent injection or malware.
• Encrypt sensitive data at rest and in transit.

11. Performance and Scalability

• Use batch processing for large document ingestion.
• Cache frequent queries or embeddings.
• Use pagination and lazy loading in Angular for search results.
• Deploy search backend on scalable clusters for high concurrency.

12. Monitoring and Logging
Log queries, search response times, and API errors.
Monitor AI API usage for cost control.
Track top searched queries to optimize indexing.

Example Logging
Log.Information("User {UserId} searched '{Query}' and received {ResultCount} results",
    userId, query, results.Count);

Conclusion
Implementing AI-powered document search in Angular applications enables:

• Fast, semantic search for unstructured and structured documents
• Context-aware AI-powered suggestions and summarizations
• Scalable, production-ready systems with modern frontend and backend architectures

Key Takeaways for Senior Developers:

• Use embeddings to represent documents and queries for semantic search.
• Integrate a vector search engine like Pinecone, Milvus, or Elasticsearch.
• Keep AI embedding and document storage decoupled from the frontend.
• Optimize Angular components for large result sets and real-time updates.
• Monitor, log, and secure both AI APIs and backend search services.

By following these patterns, developers can build highly effective, scalable, and intelligent search solutions suitable for enterprise applications.

A Useful, Detailed Guide for Developers
In contemporary online applications, dashboards are a crucial component. Dashboards are crucial for presenting actionable data in an organized and dynamic manner, whether you are developing an admin panel, analytics system, CRM, or business intelligence tool. Users can see metrics, tables, charts, and widgets that change in real time or in response to user input on a dynamic dashboard. Angular's component-based architecture, data coupling, and robust ecosystem of charting libraries make it a perfect platform for creating such dashboards.

This post takes you step-by-step and practically through the process of creating a dynamic dashboard in Angular. You will discover how to display charts and cards, obtain data from APIs, load widgets dynamically, and organize dashboard components. You will be able to create a dynamic dashboard that is scalable, fully functional, and appropriate for practical use at the end.

What Is a Dynamic Dashboard?
A dynamic dashboard is a screen that displays multiple real-time or frequently updated data widgets such as:

• Metrics cards
• Line charts
• Bar charts
• Tables
• User statistics
• Revenue analytics
• Activity feeds

What makes it dynamic?

• Data loads from APIs
• Widgets update automatically
• User can interact with the dashboard
• Layout can change based on user preference
• Filtered data updates all widgets
• Components are reusable and modular

Setting Up the Angular Project
If you are starting fresh, create a new Angular project:
ng new dynamic-dashboard
cd dynamic-dashboard

Install required libraries (optional but recommended):

Chart library (example: ng2-charts):
npm install chart.js ng2-charts

Dashboard Module Structure
A well-organized folder structure is important for scaling your dashboard.

Suggested structure:
src/app/
  features/
    dashboard/
      components/
        metric-card/
        bar-chart/
        line-chart/
        data-table/
      pages/
        main-dashboard/
      services/
        dashboard.service.ts
      dashboard.module.ts

Organizing widgets under components improves maintainability.

Creating a Dashboard Page
Create the main dashboard page:
ng generate component features/dashboard/pages/main-dashboard
This component will host all widgets.

Example main-dashboard.component.html:
<div class="dashboard-container">

  <app-metric-card
    title="Total Users"
    [value]="stats.totalUsers">
  </app-metric-card>

  <app-metric-card
    title="Monthly Revenue"
    [value]="stats.revenue">
  </app-metric-card>

  <app-line-chart
    [data]="chartData">
  </app-line-chart>

  <app-data-table
    [rows]="tableData">
  </app-data-table>

</div>

Creating a Metric Card Component
Metric cards display single numeric values such as users, revenue, or orders.
ng generate component features/dashboard/components/metric-card
metric-card.component.ts:
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-metric-card',
  templateUrl: './metric-card.component.html',
  styleUrls: ['./metric-card.component.css']
})
export class MetricCardComponent {
  @Input() title!: string;
  @Input() value!: number;
}

metric-card.component.html:
<div class="metric-card">
  <h4>{{ title }}</h4>
  <p>{{ value }}</p>
</div>

Metric cards are reusable across the dashboard.

Creating Chart Widgets
Charts help visualize trends. Using ng2-charts, create a line chart component.
ng generate component features/dashboard/components/line-chart
line-chart.component.ts:

import { Component, Input } from '@angular/core';
import { ChartData } from 'chart.js';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html'
})
export class LineChartComponent {
  @Input() data!: ChartData<'line'>;
}

line-chart.component.html:
<div style="height: 300px;">
  <canvas baseChart
    [data]="data"
    chartType="line">
  </canvas>
</div>

Now your dashboard can display dynamic charts, updated by user interaction or API calls.

Creating the Dashboard Service
The dashboard service is responsible for fetching data from the backend API.
ng generate service features/dashboard/services/dashboard

dashboard.service.ts:
@Injectable({
  providedIn: 'root'
})
export class DashboardService {

  constructor(private http: HttpClient) {}

  getStatistics() {
    return this.http.get('/api/dashboard/stats');
  }

  getChartData() {
    return this.http.get('/api/dashboard/chart');
  }

  getRecentUsers() {
    return this.http.get('/api/dashboard/users');
  }
}

This centralizes API calls.

Connecting API Data to the Dashboard
In main-dashboard.component.ts:
export class MainDashboardComponent implements OnInit {

  stats: any = {};
  chartData: any = {};
  tableData: any[] = [];

  constructor(private dashboardService: DashboardService) {}

  ngOnInit(): void {
    this.loadStatistics();
    this.loadChartData();
    this.loadTableData();
  }

  loadStatistics() {
    this.dashboardService.getStatistics().subscribe(res => {
      this.stats = res;
    });
  }

  loadChartData() {
    this.dashboardService.getChartData().subscribe(res => {
      this.chartData = {
        labels: res.labels,
        datasets: [
          { data: res.values, label: 'Performance' }
        ]
      };
    });
  }

  loadTableData() {
    this.dashboardService.getRecentUsers().subscribe(res => {
      this.tableData = res;
    });
  }
}

This integrates all widgets into a functional dashboard.

Adding a Dynamic Data Table
Create a reusable table component:
ng generate component features/dashboard/components/data-table
data-table.component.ts:

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html'
})
export class DataTableComponent {
  @Input() rows: any[] = [];
}

data-table.component.html:
<table>
  <thead>
    <tr>
      <th *ngFor="let key of rows[0] | keyvalue">{{ key.key }}</th>
    </tr>
  </thead>

  <tbody>
    <tr *ngFor="let row of rows">
      <td *ngFor="let key of row | keyvalue">{{ key.value }}</td>
    </tr>
  </tbody>
</table>

This builds a dynamic, framework-like table.

Adding Filters for Dynamic Updates
A dynamic dashboard often includes filters such as:

1. Date range
2. Category
3. User role
4. Status

Create a filter example:
main-dashboard.component.html:
<select (change)="applyFilter($event.target.value)">
  <option value="monthly">Monthly</option>
  <option value="weekly">Weekly</option>
  <option value="yearly">Yearly</option>
</select>

Apply filter:
applyFilter(range: string) {
  this.dashboardService.getChartData(range).subscribe(res => {
    this.chartData = {
      labels: res.labels,
      datasets: [
        { data: res.values, label: 'Performance' }
      ]
    };
  });
}

Making Dashboard Layout Responsive
Use a grid layout to make the dashboard responsive:

dashboard.component.css:
.dashboard-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

This ensures proper rendering on desktop, tablet, and mobile.

Using Dynamic Component Loading (Advanced)
Sometimes you want the user to choose which widgets to show.
Angular allows dynamic component loading using ViewContainerRef.

Example:
@ViewChild('widgetContainer', { read: ViewContainerRef })
container!: ViewContainerRef;

loadWidget(component: any) {
  this.container.clear();
  this.container.createComponent(component);
}

This makes your dashboard fully customizable.

Role-Based Dashboard (Enterprise Use Case)
Enterprise dashboards display different widgets based on user roles.

Example:
if (user.role === 'Admin') {
  this.widgets = ['users', 'revenue', 'logs'];
}
else {
  this.widgets = ['orders', 'profile'];
}

Use *ngFor to load the correct widgets.

Best Practices for Building Dashboards in Angular

• Create reusable components for widgets.
• Store all API calls in dedicated services.
• Use feature modules (dashboard.module.ts).
• Keep components small and focused.
• Use chart libraries that support responsive design.
• Cache data when possible to improve performance.
• Avoid loading all widgets at once for large dashboards.
• Use lazy loading for dashboard routes in enterprise apps.

Recommended Libraries for Dashboards
Choosing the right libraries improves design and performance.

Chart Libraries

• Chart.js with ng2-charts
• ngx-charts
• ApexCharts
• ECharts for Angular

UI Components

• Angular Material
• PrimeNG
• Nebular
• NG-Zorro

These help build professional-looking dashboards with minimal effort.

Conclusion
Creating reusable components, integrating API data, managing filter interactions, and choosing the right charting and user interface frameworks are all necessary when creating a dynamic dashboard in Angular. Dashboards can be made more manageable as your application grows by breaking them up into modular parts like tables, charts, and metric cards.

In addition to improving user experience, a well-designed dashboard helps companies track metrics, see trends, and make wise choices.

AI elements are becoming more and more important in modern online applications. Recent advancements in GPU acceleration and browser-based machine learning have made it feasible to execute sophisticated machine learning models completely within the browser, eliminating the need for backend inference servers. Angular offers the perfect framework for creating such apps in a clear, scalable, and enterprise-friendly manner when paired with Web Workers and Signals. 

This article describes a workable architecture for creating AI-assisted Angular applications that use WebDNN or ONNX Runtime Web to carry out local inference. The emphasis is on practical needs, such as a seamless user interface, offline functionality, robust adaptability, and support for several machine learning pipelines.

Local ML in Angular
Running ML models in the browser offers several benefits:

• No server-side GPU needed
• No API latency
• User data never leaves the device
• Works offline
• Scales without backend infrastructure

The challenge, however, is performance. Running inference directly in Angular components will block the main thread and cause UI stutter. This is why Web Workers become essential.

Angular handles the UI and state reactivity.
The ML Orchestrator routes requests, queues tasks, and exposes results through Signals.
Workers run ML models away from the main thread to keep the UI responsive.

Implementing the ML Worker
A dedicated worker handles model loading and inference. Below is an example using ONNX Runtime Web.
/// <reference lib="webworker" />
import * as ort from 'onnxruntime-web';
let session: ort.InferenceSession | null = null;
addEventListener('message', async ({ data }) => {

  const { type, payload } = data;
  switch (type) {

    case 'LOAD_MODEL':

      session = await ort.InferenceSession.create(payload.modelUrl, {

        executionProviders: ['webgpu', 'wasm'],

      });

      postMessage({ type: 'MODEL_LOADED' });

      break;

    case 'INFER':

      if (!session) return;

      const input = new ort.Tensor('float32', payload.input, payload.shape);

      const output = await session.run({ input });

      postMessage({ type: 'RESULT', output });

      break;

  }

});

The worker:

• Loads an ONNX model.
• Performs inference using WebGPU or WASM.
• Returns results to the main thread.

Creating the ML Orchestrator Service
This service acts as the central controller for all ML-related operations. It sends requests to the worker and stores ML states using Angular Signals.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class MlOrchestratorService {

  private worker = new Worker(

    new URL('../workers/ml.worker', import.meta.url),

    { type: 'module' }

  );

  modelLoaded = signal(false);
  result = signal<Float32Array | null>(null);
  loading = signal(false);
  constructor() {

    this.worker.onmessage = ({ data }) => {

      switch (data.type) {

        case 'MODEL_LOADED':

          this.modelLoaded.set(true);

          break;



        case 'RESULT':

          this.loading.set(false);

          this.result.set(data.output.output.data);

          break;

      }

    };

  }

  loadModel(modelUrl: string) {

    this.worker.postMessage({ type: 'LOAD_MODEL', payload: { modelUrl } });

  }

  infer(input: Float32Array, shape: number[]) {

    this.loading.set(true);

    this.worker.postMessage({ type: 'INFER', payload: { input, shape } });

  }

}
Because all outputs are exposed as Signals, UI updates happen immediately and without boilerplate.

Integrating with Angular Components
A component can simply inject the service and trigger inference.
@Component({

  selector: 'app-ai-widget',

  templateUrl: './ai-widget.component.html',

})

export class AiWidgetComponent {

  text = signal('');

  constructor(public ml: MlOrchestratorService) {}

  analyze() {

    const vec = this.textToVector(this.text());

    this.ml.infer(vec, [1, vec.length]);

  }

  textToVector(text: string): Float32Array {

    return new Float32Array(

      text.split('').map(c => c.charCodeAt(0) / 255).concat(new Array(128).fill(0))

    );

  }

}

Signals automatically update the UI whenever the orchestrator produces results.

This separation allows each feature module to have its own ML logic or even its own worker if necessary.

Using SharedArrayBuffer for Large Data Transfers
For large inputs such as images or audio buffers, JSON serialization becomes slow. SharedArrayBuffer allows zero-copy transfer between Angular and workers.
const buffer = new SharedArrayBuffer(1024 * 1024);
const arr = new Float32Array(buffer);
worker.postMessage({ type: 'INFER', payload: { buffer } }, [buffer]);

This significantly improves performance for real-time or batch ML tasks.

Multi-Model Pipelines
More complex applications may require running multiple models in sequence, such as:

1. Embedding generation
2. Classification
3. Ranking or summarization

The Orchestrator service can manage these pipelines by routing tasks to different workers and combining results before exposing them to the UI.

Offline Capability
Because models and inference run locally, adding PWA support enables full offline functionality. Models can be cached using the Cache API:
caches.open('ml-model-cache').then(cache => {

  cache.add('/assets/models/model.onnx');

});

This is especially useful for enterprise field applications that operate in unreliable network environments.

Security Considerations
Running ML locally avoids sending sensitive information to a server. This reduces compliance risks in healthcare, finance, legal, and other regulated industries. No external inference API means no data exposure and no dependency on backend GPU resources.

Practical Use Cases

• This architecture fits a wide range of real-world applications:
• AI-assisted text editors and document analysis tools
• Manufacturing dashboards with on-device image detection
• Medical NLP applications where data privacy is critical
• Financial document scoring and extraction
• Offline voice or audio command systems

Conclusion
Angular Signals, Web Workers, and browser-based machine learning runtimes, such as ONNX Runtime Web or WebDNN, may now be used to create enterprise applications that are quick, responsive, and capable of running AI models in the browser. This architecture offers outstanding performance, a clear division of labor, and a strong basis for scalable, production-ready AI capabilities.

The size and complexity of contemporary enterprise applications are increasing. A single monolithic frontend becomes challenging to maintain and implement when teams grow and features change on their own. By dividing huge applications into smaller, independently deployable components that are individually owned by different teams, Micro Frontends (MFEs) provide a scalable solution.

Angular now offers a natural and effective method of implementing Micro Frontends without complicated runtime integrations thanks to Webpack 5 Module Federation. This article provides a step-by-step implementation guide for integrating numerous micro frontends within a single shell application, as well as an explanation of Module Federation's benefits in Angular.

1. Understanding Micro Frontends
A Micro Frontend Architecture divides a large web application into multiple independent applications — or micro apps — that can:

• Be developed and deployed separately
• Use different versions of Angular or other frameworks
• Communicate seamlessly within a unified user experience

Each micro frontend (MFE) handles a specific domain, such as:

• orders
• inventory
• customers

These are then composed dynamically by a Shell (Host) application.

2. What is Module Federation?
Module Federation (introduced in Webpack 5) allows multiple applications to share code and load remote modules dynamically at runtime.

Key Concepts

• Host – The main application that loads other micro frontends.
• Remote – A standalone micro frontend that exposes certain modules/components.
• Shared Libraries – Dependencies (like Angular, RxJS, or common UI libraries) that can be shared between host and remotes to prevent duplication.

3. Setting Up the Environment
PrerequisitesNode.js (>= 18)

• Angular CLI (>= 17)
• Webpack 5 (comes by default with Angular 12+)
• @angular-architects/module-federation plugin

Step 1: Install the Module Federation Plugin
npm install @angular-architects/module-federation --save-dev

4. Creating the Applications
Step 2: Generate the Shell and Micro Frontends
ng new mfe-shell --routing --style=scss
ng new mfe-orders --routing --style=scss
ng new mfe-inventory --routing --style=scss

Each app runs independently at first.

5. Configuring Module Federation
Step 3: Configure the Host (Shell)
Navigate to the shell app and run:
ng add @angular-architects/module-federation --project mfe-shell --type host

This creates a webpack.config.js with placeholders to load remote apps.

Example configuration:
// mfe-shell/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
const mf = require('@angular-architects/module-federation/webpack');

module.exports = {
  output: {
    uniqueName: "mfeShell",
    publicPath: "auto",
  },
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        "mfeOrders": "mfeOrders@http://localhost:4201/remoteEntry.js",
        "mfeInventory": "mfeInventory@http://localhost:4202/remoteEntry.js",
      },
      shared: mf.share({
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true },
      }),
    }),
  ],
};

Step 4: Configure a Remote Application
For the mfe-orders app:
ng add @angular-architects/module-federation --project mfe-orders --type remote --port 4201

Generated webpack.config.js example:
new ModuleFederationPlugin({
  name: "mfeOrders",
  filename: "remoteEntry.js",
  exposes: {
    "./OrdersModule": "./src/app/orders/orders.module.ts",
  },
  shared: mf.share({
    "@angular/core": { singleton: true, strictVersion: true },
    "@angular/common": { singleton: true, strictVersion: true },
    "@angular/router": { singleton: true, strictVersion: true },
  }),
}),

Do the same for mfe-inventory (on port 4202).

6. Consuming Remote Modules in the Shell
In the shell’s routing configuration:
const routes: Routes = [
  {
    path: 'orders',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4201/remoteEntry.js',
        exposedModule: './OrdersModule',
      }).then(m => m.OrdersModule),
  },
  {
    path: 'inventory',
    loadChildren: () =>
      loadRemoteModule({
        type: 'module',
        remoteEntry: 'http://localhost:4202/remoteEntry.js',
        exposedModule: './InventoryModule',
      }).then(m => m.InventoryModule),
  },
];

Now, navigating to /orders or /inventory in the shell dynamically loads the respective remote application.

7. Sharing Common Libraries
To reduce bundle size and maintain consistency:

• Share Angular core libraries (@angular/core, @angular/common)
• Share UI component libraries (like PrimeNG or Material)
• Share custom libraries (like a design system or common services)

You can modify webpack.config.js in each project:
shared: mf.share({
  "@angular/core": { singleton: true, strictVersion: true },
  "@angular/common": { singleton: true, strictVersion: true },
  "@angular/router": { singleton: true, strictVersion: true },
  "shared-lib": { singleton: true, import: "shared-lib" },
}),

8. Running and Testing
Start all apps in separate terminals:
ng serve mfe-orders --port 4201
ng serve mfe-inventory --port 4202
ng serve mfe-shell --port 4200

Open
http://localhost:4200/orders
http://localhost:4200/inventory

You’ll notice the shell dynamically loads content from the micro frontends.

9. Deployment and Versioning
Each MFE can:

• Have its own repository
• Be deployed independently (e.g., on Azure Blob, AWS S3, or CDN)
• Expose its remoteEntry.js file via public URL

The shell always loads the latest version at runtime — no redeployment required for the entire app.
10. Advantages of Using Module Federation in Angular

• True decoupling: Teams can work independently without merge conflicts.
• Independent deployments: Each feature or domain can be deployed separately.
• Version flexibility: Micro frontends can use different Angular versions.
• Performance optimization: Shared dependencies reduce duplication.
• Scalable architecture: Perfect for enterprise-level applications.

11. Real-World Use Cases

• ERP systems with independent modules like Finance, Inventory, and Sales.
• Multi-tenant platforms where different clients require customized frontends.
• Product suites where each product has its own lifecycle but unified branding.

12. Conclusion
Integrating Micro Frontends using Module Federation in Angular provides a robust foundation for building scalable, modular, and future-proof enterprise applications.By combining independent deployability with shared runtime integration, Module Federation eliminates the pain of monolithic frontends and empowers teams to innovate faster without sacrificing consistency or maintainability.

A popular authorization paradigm for applications is called Role-Based Access Control (RBAC), in which users are given access to features or data according to their roles (Admin, Manager, User, etc.). RBAC should be applied neatly and consistently in Angular projects so that:

• UI elements are disabled or hidden when users don't have permission.
• To prevent unauthorized customers from navigating, routes are secured.
• Decisions about authorization are safe and effective.
• As roles and permissions expand, the system is still maintainable.

Using JWT tokens with role claims, lazy loading, secure server-side checks, and contemporary Angular patterns (services, guards, and directives), this article provides a useful, step-by-step method for building RBAC in an Angular application. TypeScript code samples assume Angular 14+ (but the patterns work with Angular 17 as well). The focus is on using secure backend checks in conjunction with a pure frontend implementation approach (important reminder: never rely entirely on frontend checks).

2. Core concepts: roles, permissions, and claims
Before coding, clarify your model.

• Role: a label for a set of capabilities (e.g., Admin, Editor).
• Permission: a fine-grained capability or action (e.g., order.create, order.view, user.manage).
• Claims: information encoded in JWT or user profile (e.g., roles: ["Admin", "Manager"] or permissions: ["order.create"]) that the client can use to authorize UI and route behaviour.

Two approaches:

• Role-based only: simpler, map roles directly to UI/route checks.
• Role + Permission (recommended for large apps): map roles → permissions on the server and use permission checks in the client for fine-grained control.

Prefer keeping authoritative role→permission mapping on the server; send roles or permissions as claims in JWT (small list) or fetch user permissions from a secure API at login.

3. Authentication vs Authorization

• Authentication = who are you (login).
• Authorization = what can you do (RBAC).

Angular handles the frontend part (storing token, exposing roles to components). But every protected API must validate JWT and roles server-side — the frontend is only UX & convenience.

4. Implementation overview
We’ll implement:

• JWT auth service that extracts roles/permissions.
• Route guards (CanActivate, CanLoad) for route protection and lazy modules.
• Structural directive (*hasRole / *hasPermission) to show/hide UI.
• Interceptor to attach token and optionally refresh it.
• Example route config and lazy module protection.
• Notes on server claims shape and security.

5. JWT payload and server contract
Agree on a standard JWT payload. Minimal example:
{
  "sub": "12345",
  "name": "Peter",
  "email": "[email protected]",
  "roles": ["Admin", "Manager"],
  "permissions": ["orders.view", "orders.create"],
  "iat": 1600000000,
  "exp": 1600003600
}

Your backend should:

• Sign JWTs securely (RS256 recommended).
• Keep the token payload small.
• Revoke tokens via short expiry + refresh tokens or server revocation list for highly sensitive apps.
• Map roles → permissions server-side so RBAC policy remains authoritative.

6. AuthService: parse token & expose observables
AuthService manages the token, provides current user roles and permission helpers, and exposes an observable so the rest of the app can react to auth changes.
// auth.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

export interface UserInfo {
  sub: string;
  name?: string;
  email?: string;
  roles: string[];
  permissions?: string[];
  exp?: number;
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private tokenKey = 'app_token';
  private userSubject = new BehaviorSubject<UserInfo | null>(null);
  public user$ = this.userSubject.asObservable();

  constructor() {
    const token = this.getToken();
    if (token) {
      const info = this.parseToken(token);
      if (info) this.userSubject.next(info);
    }
  }

  setToken(token: string) {
    localStorage.setItem(this.tokenKey, token);
    const info = this.parseToken(token);
    this.userSubject.next(info);
  }

  getToken(): string | null {
    return localStorage.getItem(this.tokenKey);
  }

  clear() {
    localStorage.removeItem(this.tokenKey);
    this.userSubject.next(null);
  }

  isAuthenticated(): boolean {
    const info = this.userSubject.value;
    return !!info && !(info.exp && info.exp * 1000 < Date.now());
  }

  hasRole(role: string): boolean {
    const info = this.userSubject.value;
    return !!info && info.roles?.includes(role);
  }

  hasAnyRole(roles: string[]): boolean {
    const info = this.userSubject.value;
    if (!info) return false;
    return roles.some(r => info.roles?.includes(r));
  }

  hasPermission(perm: string): boolean {
    const info = this.userSubject.value;
    return !!info && info.permissions?.includes(perm);
  }

  private parseToken(token: string): UserInfo | null {
    try {
      const payload = token.split('.')[1];
      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
      return {
        sub: decoded.sub,
        name: decoded.name,
        email: decoded.email,
        roles: decoded.roles || [],
        permissions: decoded.permissions || [],
        exp: decoded.exp
      };
    } catch {
      return null;
    }
  }
}

Notes

• Use atob for Base64 decode (works in browsers). In Node or SSR consider safe decoding.
• For security, prefer HttpOnly cookies for tokens in some contexts—localStorage is simpler but vulnerable to XSS.
• Expose user$ for templates and components.

7. HTTP interceptor to attach token & handle 401/refresh
Attach token to outgoing requests and centrally handle 401 responses (refresh flow).
// auth.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError, from } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { AuthService } from './auth.service';
import { TokenRefreshService } from './token-refresh.service'; // optional

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private auth: AuthService, private refresh: TokenRefreshService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.auth.getToken();
    let authReq = req;
    if (token) {
      authReq = req.clone({
        setHeaders: { Authorization: `Bearer ${token}` }
      });
    }
    return next.handle(authReq).pipe(
      catchError((err: HttpErrorResponse) => {
        if (err.status === 401 && token) {
          // Attempt refresh logic
          return from(this.refresh.tryRefresh()).pipe(
            switchMap(newToken => {
              if (newToken) {
                this.auth.setToken(newToken);
                const retryReq = req.clone({
                  setHeaders: { Authorization: `Bearer ${newToken}` }
                });
                return next.handle(retryReq);
              }
              this.auth.clear();
              return throwError(() => err);
            })
          );
        }
        return throwError(() => err);
      })
    );
  }
}

Register interceptor in app.module.ts providers.

Note: token refresh flows can be complex — implement queuing to avoid parallel refresh attempts.

8. Route guards for authorization
Protect routes with CanActivate and CanLoad guards. CanLoad prevents lazy module download.
// roles.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, CanLoad, Route } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' })
export class RolesGuard implements CanActivate, CanLoad {
  constructor(private auth: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    const roles = route.data['roles'] as string[] | undefined;
    if (!roles || roles.length === 0) return true;
    if (this.auth.hasAnyRole(roles)) return true;

    this.router.navigate(['/forbidden']);
    return false;
  }

  canLoad(route: Route): boolean {
    const roles = route.data && route.data['roles'] as string[] | undefined;
    if (!roles || roles.length === 0) return true;
    if (this.auth.hasAnyRole(roles)) return true;
    return false;
  }
}

Route config example
// app-routing.module.ts
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canLoad: [RolesGuard],
    data: { roles: ['Admin'] }
  },
  {
    path: 'orders',
    component: OrdersComponent,
    canActivate: [RolesGuard],
    data: { roles: ['Admin', 'Manager'] }
  }
];

Remember: CanLoad blocks async module loading; CanActivate protects navigation.

9. Structural directives for UI control
Create a directive to conditionally render parts of the UI based on roles or permissions:
// has-role.directive.ts
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { AuthService } from './auth.service';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[hasRole]'
})
export class HasRoleDirective {
  private roles: string[] = [];
  private sub: Subscription;

  constructor(
    private tpl: TemplateRef<any>,
    private vc: ViewContainerRef,
    private auth: AuthService
  ) {
    this.sub = this.auth.user$.subscribe(() => this.updateView());
  }

  @Input() set hasRole(value: string | string[]) {
    this.roles = Array.isArray(value) ? value : [value];
    this.updateView();
  }

  private updateView() {
    this.vc.clear();
    if (!this.roles || this.roles.length === 0) {
      return;
    }
    if (this.auth.hasAnyRole(this.roles)) {
      this.vc.createEmbeddedView(this.tpl);
    }
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Usage in template
<button *hasRole="'Admin'">Delete User</button>
<div *hasRole="['Manager','Admin']">Manager Dashboard</div>

Build a similar hasPermission directive if you use permission claims.

10. Dynamic menu & navigation
Generate menus based on roles to improve UX and avoid showing dead links.

Example menu service
export interface MenuItem { label: string; route?: string; roles?: string[]; children?: MenuItem[]; }

@Injectable({ providedIn: 'root' })
export class MenuService {
  constructor(private auth: AuthService) {}

  getMenu(): MenuItem[] {
    const baseMenu: MenuItem[] = [
      { label: 'Home', route: '/' },
      { label: 'Orders', route: '/orders', roles: ['Manager','Admin'] },
      { label: 'Admin', route: '/admin', roles: ['Admin'] }
    ];
    return baseMenu.filter(item => !item.roles || this.auth.hasAnyRole(item.roles));
  }
}

11. Lazy loading & module-level guards
Always use CanLoad for lazy modules to prevent module download for unauthorized users.

Also, within lazy modules, consider protecting child routes with CanActivateChild.
// in admin-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: AdminHomeComponent,
    canActivateChild: [RolesGuard],
    children: [
      { path: 'users', component: UserListComponent, data: { roles: ['Admin'] } },
    ]
  }
];

12. Token expiry, refresh & session management

• Use short-lived access tokens and refresh tokens for security.
• Implement refresh flow in TokenRefreshService.
• On refresh failure, redirect to login.

Guide

• Refresh tokens should be HttpOnly cookies where possible.
• Keep token expiry checks in AuthService.isAuthenticated() using exp claim.

13. Secure coding reminders

• Never trust frontend for authorization — always validate tokens & roles server-side for APIs.
• Protect sensitive operations server-side even if you hide UI elements in the client.
• Escape & sanitize inputs to avoid XSS which can reveal tokens in localStorage.
• Use Content Security Policy (CSP) and secure headers.
• Consider storing refresh tokens in HttpOnly secure cookies to reduce XSS risks.

14. Testing RBAC behaviour
Add unit and e2e tests for:

• AuthService parsing of tokens and role logic.
• RolesGuard responses for allowed/forbidden routes.
• Directives rendering behavior under different role sets.
• Integration tests: fake login with token claims + route navigation.

15. Example Jasmine unit test for directive
it('should render element only for Admin', () => {
  authService.setToken(mockAdminToken);
  fixture.detectChanges();
  expect(fixture.nativeElement.querySelector('button')).toBeTruthy();

  authService.setToken(mockUserToken);
  fixture.detectChanges();
  expect(fixture.nativeElement.querySelector('button')).toBeNull();
});

16. Advanced topics
Attribute-based RBAC & policy engines

For complex rules (time-based access, multi-claim rules), consider using a policy engine (e.g., OPA) and fetch a decision from backend for critical flows.
Claims mapping & role changes

If roles change often, prefer fetching current permissions from an API during login rather than relying only on JWT. Combine JWT for offline, and a permissions API for dynamic checks.

17. Caching permissions
Cache permissions for short TTL to reduce round trips. Invalidate on logout or role update.

Audit & traceability
Record which role performed critical operations. Include role + user id in logs and, where required, use server-side audit tables.

18. Example: Putting it all together

• User logs in → backend returns JWT with roles claim and sets refresh cookie.
• Angular stores token (or reads from cookie) → AuthService parses token and broadcasts user$.
• Router triggers CanLoad / CanActivate for requested routes; guard checks required roles in route data.
• Components use *hasRole or *hasPermission directives to show/hide buttons.
• HTTP interceptor attaches token to API calls; backend validates role claims and allows/denies operations.
• On sensitive server actions, backend enforces permission checks and records an audit entry.

19. Common pitfalls & how to avoid them

• Relying only on client checks — avoid this; always secure APIs.
• Huge JWT payloads — keep tokens small; use role ids instead of huge lists.
• No refresh strategy — short tokens without refresh cause UX problems; implement a safe refresh flow.
• Inconsistent role naming — define role constants centrally and share via API docs or a shared library.
• Not handling lazy modules — failing to use CanLoad exposes lazy code to unauthorized downloads.

20. Performance & scalability tips

• Keep auth logic light on the client; do heavy policy evaluation on the server.
• Cache permission lookups server-side using Redis or in-memory caches.
• For multi-tenant apps, include tenant claim and validate tenant context in guards and backend.
• Avoid frequent calls to permission API — use local cache with TTL.

21. Summary & best practice checklist

• Use JWT claims (roles / permissions) to drive client UI and route guards.
• Always enforce role/permission checks server-side for APIs.
• Protect lazy modules with CanLoad.
• Provide structural directives for clean templates (*hasRole, *hasPermission).
• Implement token refresh, short access token TTL, and secure refresh storage.
• Centralize role constants and align backend/frontend contracts.
• Test behavior via unit and e2e tests and maintain audit logs for critical operations.

One of the most crucial yet sometimes overlooked—aspects of front-end development is testing. Testing guarantees code quality, bug prevention, and trust in each release of large enterprise Angular apps. With examples, best practices, and practical insights, we will examine all forms of testing in Angular, including Unit, Integration, End-to-End (E2E), and Component-level testing.

1. Why Testing Matters in Angular
Modern Angular applications are built with multiple services, components, and modules.
Without automated tests, even a small change can unintentionally break features elsewhere.

Key reasons to write tests:

• Detect bugs early before production
• Improve refactoring confidence
• Ensure consistent functionality
• Reduce manual QA time

Angular provides an excellent testing ecosystem out of the box with Jasmine, Karma, and Protractor (or Cypress for modern E2E).

2. Types of Testing in Angular

3. Unit Testing in Angular

Unit tests check if individual functions or components behave as expected.
Angular uses Jasmine for writing tests and Karma as the test runner.

Example: Testing a Service
math.service.ts

export class MathService {
  add(a: number, b: number): number {
    return a + b;
  }
}

math.service.spec.ts
import { MathService } from './math.service';

describe('MathService', () => {
  let service: MathService;

  beforeEach(() => {
    service = new MathService();
  });

  it('should add two numbers correctly', () => {
    expect(service.add(2, 3)).toBe(5);
  });
});

Best Practices

• Test each method independently
• Avoid API or database calls
• Use mocks or spies for dependencies

4. Component-Level Testing
Component testing focuses on how the UI behaves — inputs, outputs, events, and template rendering.
Angular’s TestBed provides a test environment for creating and interacting with components.
Example: Testing a Simple Component

hello.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h3>Hello {{ name }}!</h3>`
})
export class HelloComponent {
  @Input() name = '';
}

hello.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HelloComponent } from './hello.component';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HelloComponent]
    });
    fixture = TestBed.createComponent(HelloComponent);
    component = fixture.componentInstance;
  });

  it('should display the input name', () => {
    component.name = 'Rajesh';
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('h3').textContent).toContain('Rajesh');
  });
});

Best Practices
Use fixture.detectChanges() to apply bindings
Query DOM using fixture.nativeElement

Keep test scenarios small and focused

5. Integration Testing
Integration tests ensure multiple parts of your app work together correctly — for example, a component using a service or API.
Example: Component + Service Integration

user.service.ts
@Injectable({ providedIn: 'root' })
export class UserService {
  getUser() {
    return of({ name: 'Rajesh', role: 'Admin' });
  }
}

profile.component.ts
@Component({
  selector: 'app-profile',
  template: `<p>{{ user?.name }} - {{ user?.role }}</p>`
})
export class ProfileComponent implements OnInit {
  user: any;
  constructor(private userService: UserService) {}
  ngOnInit() {
    this.userService.getUser().subscribe(u => this.user = u);
  }
}

profile.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ProfileComponent } from './profile.component';
import { UserService } from './user.service';
import { of } from 'rxjs';

describe('ProfileComponent (Integration)', () => {
  let fixture: ComponentFixture<ProfileComponent>;
  let mockService = { getUser: () => of({ name: 'Rajesh', role: 'Admin' }) };

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ProfileComponent],
      providers: [{ provide: UserService, useValue: mockService }]
    });
    fixture = TestBed.createComponent(ProfileComponent);
  });

  it('should display user details from service', () => {
    fixture.detectChanges();
    const element = fixture.nativeElement;
    expect(element.textContent).toContain('Rajesh');
  });
});

Best Practices

• Mock dependencies (like services or APIs)
• Focus on communication between layers
• Keep external systems out of the test

6. End-to-End (E2E) Testing
E2E tests simulate real user actions on your application — from login to logout — ensuring that the whole flow works.

Modern Angular apps now prefer Cypress or Playwright over Protractor.

Example: Cypress Test
cypress/e2e/login.cy.ts

describe('Login Page', () => {
  it('should login successfully with valid credentials', () => {
    cy.visit('/login');
    cy.get('input[name="email"]').type('[email protected]');
    cy.get('input[name="password"]').type('12345');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

Best Practices
Use realistic test data
Separate test environment from production
Avoid flakiness by waiting for API calls using cy.intercept()

7. Choosing the Right Testing Strategy

In most projects:

• 70% of tests are Unit

• 20% Integration

• 10% E2E

This gives a good balance between speed and confidence.

8. Testing Tools Summary

9. Continuous Testing in CI/CD

Integrate your Angular tests into your CI/CD pipeline (Jenkins, GitHub Actions, or Azure DevOps).

Example command in package.json:
"scripts": {"test": "ng test --watch=false --browsers=ChromeHeadless","e2e": "cypress run"}

This ensures that every commit runs all tests automatically.

10. Conclusion
Testing in Angular is not just a best practice it’s a developer’s safety net. Whether you’re building small reusable components or large enterprise apps, combining Unit, Integration, Component, and E2E tests ensures:

• Better reliability
• Fewer regressions
• Confident deployments

Start small, automate everything, and make testing a habit, not an afterthought.

Angular is a robust front-end framework that offers multiple methods for passing data, including ID parameters, and navigating between components. Effective routing management requires knowing how to collect parameters and reroute users, whether you're developing a sophisticated enterprise application or a single-page application (SPA).

1. Using the RouterLink Directive for Easy Navigation
The simplest method for navigating between Angular components is to use the RouterLink directive. It aids in creating URLs with dynamic parameters and is directly utilized in templates.

<a [routerLink]="['/employee', employee.id]">View Details</a>

the employee.id is appended to the /employee route, creating a dynamic URL like /employee/123. This is a convenient way to navigate when the route parameters are known within the template.

2. Programmatic Navigation with the Router
For more complex scenarios, such as navigation that depends on some business logic or conditional operations, Angular’s Router service can be used for programmatic navigation.
import { Router } from '@angular/router';
constructor(private router: Router) {}
viewEmployeeDetails(employeeId: number) {
  this.router.navigate(['/employee', employeeId]);
}

navigate() method takes an array where the first element is the route path, and the subsequent elements are the route parameters.

3. Retrieving Parameters Using ActivatedRoute
Once you’ve navigated to a route that includes parameters, you'll often need to retrieve those parameters in the component. Angular provides the ActivatedRoute service for this purpose.

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
  const employeeId = this.route.snapshot.paramMap.get('id');
  console.log('Employee ID:', employeeId);
}

snapshot.paramMap.get('id') retrieves the id parameter from the route. This is a synchronous method, meaning it grabs the parameter value only at the moment of the component's creation.

4. Using Observables for Dynamic Parameter Retrieval
While snapshot is useful for simple use cases, Angular applications often require handling route changes dynamically without destroying and recreating components. This is where paramMap as an Observable comes into play.
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    const employeeId = params.get('id');
    console.log('Employee ID:', employeeId);
  });
}

paramMap.subscribe() ensures that every time the id parameter changes, the new value is logged or processed accordingly. This is ideal for components that need to respond to route changes dynamically.

5. Combining Query Parameters with Navigation
Sometimes, you may want to navigate to a route and include additional information via query parameters. Angular’s Router service allows combining both route parameters and query parameters.

this.router.navigate(['/employee', employeeId], { queryParams: { ref: 'dashboard' } });

navigation directs to /employee/123?ref=dashboard, where 123 is the route parameter, and ref=dashboard is a query parameter.
If you want to retrieve the query parameters in the component

this.route.queryParams.subscribe(params => {
  const ref = params['ref'];
  console.log('Referred from:', ref);
});

6. Redirection after Form Submission
Another common use case is redirecting the user after a form submission or some action completion.
onSubmit() {
  // Assuming form submission is successful
  this.router.navigate(['/employee', newEmployeeId]);
}

7. Handling Complex Redirections with Guards
Angular also supports complex redirection scenarios using route guards. Guards can intercept navigation and redirect users based on certain conditions.
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}
  canActivate(): boolean {
    if (isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

if the is logged in () function returns false, the user is redirected to the /login route, preventing unauthorized access.

Conclusion
Navigating between routes and handling parameters in Angular is a fundamental aspect of building dynamic and user-friendly applications. Whether you use the simple RouterLink, programmatic navigation, or complex redirection logic, Angular provides the tools to handle a wide range of routing scenarios efficiently. Happy Coding!

The use of "pipes" is one of Angular's most potent tools for formatting and changing data inside templates. Developers can apply transformations like formatting dates, changing text cases, or even filtering data in an efficient and reusable way by using pipes, which offer a declarative mechanism to handle data before it is shown to the user. Writing clean, manageable, and modular code for Angular applications requires an understanding of pipes. The main distinctions between pipes and functions will be discussed in this post, along with how to use built-in pipes and make your own custom pipes to increase Angular's functionality. You will have a firm grasp on how to integrate pipes into your Angular projects to improve user experience and expedite data presentation by the end of this tutorial.

What is an Angular Pipe?
In Angular, a pipe is a way to transform data before it is displayed in the user interface. Pipes can be used in templates to modify or format data without having to alter the original data. Pipes are an Angular concept, not a TypeScript (TS) feature. They are a core part of Angular’s template syntax and are used to transform data in the view (template) layer of Angular applications.

Key Points about Pipes in Angular
Angular-Specific: Pipes are a built-in feature of the Angular framework designed to be used in Angular templates. They are not a native feature of JavaScript or TypeScript.
Purpose: Their primary function is to transform data in the template before it is displayed to the user. This transformation can include formatting dates, numbers, currencies, filtering arrays, or performing more complex data transformations.

Declarative Transformation: Pipes enable declarative transformation of data within the template, meaning that the logic for transforming data is cleanly abstracted away from the component’s TypeScript code.

You may be wondering why we should use Pipes when we can use functions.

Types of Pipes

There are two types of Pipes.
Pure Pipe (Default): A pure pipe will only re-run when its input value changes.
    @Pipe({
      name: 'pureExample',
      pure: true // This is the default value, so you can omit this
    })
    export class PureExamplePipe implements PipeTransform {
      transform(value: any): any {
        console.log('Pure pipe executed');
        return value;
      }
    }

Impure Pipe: An impure pipe will re-run whenever Angular detects a change in the component’s state, even if the input value hasn’t changed.
@Pipe({
  name: 'impureExample',
  pure: false // Set to false to make it impure
})
export class ImpureExamplePipe implements PipeTransform {
  transform(value: any): any {
    console.log('Impure pipe executed');
    return value;
  }
}

In Angular, you can use in-built pipes or create your own.

In-built pipes
Angular provides some basic pipes that can be used.

It comes from the '@angular/common' package.

Some popular ones that can be helpful are:
CurrencyPipe, DatePipe, DecimalPipe, LowerCasePipe, UpperCasePipe and TitleCasePipe

How to use an in-built pipe?
In your ts file, define your variable. In our example, we will use the variable title.
title = 'app works!';

In your html, you can use the pipe as follows:
<h1> {{title | uppercase}} </h1>

The result is how the string title is displayed:

Chaining in-built pipes
Create your variable in the ts file.
amount = 123456.123456

In your html file, you can do the following.
<p>{{ amount | currency:'USD' | slice:0:10 }}</p>

The result is as per below:

Note. The currency ‘USD’ is added in front because of the currency pipe, and only 10 characters are displayed because of the slide pipe.

Custom pipes
    Run the command below to create a pipe file:
    ng generate pipe <<pipe-name>>.

For example: ng generate pipe my-custom-pipe. Once executed, the two files below will be created.

Open the file ‘my-custom-pipe.pipe.ts. You will see the following boilerplate code provided:
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myCustomPipe'
})
export class MyCustomPipePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return null;
  }
}

After the default class, you can create the function for your new pipe. In our case, we will create a pipe that will replace spaces in a hyphen. It is important to add the decorator ‘@Pipe’ before the class so that Angular knows what follows will be a pipe. Also, pass the name of the pipe as a parameter in the ‘@Pipe’ decorator. Also, when creating the class, implement ‘PipeTransform’. The resulting class will be as follows: 

@Pipe({name: 'removeWhiteSpace'})
export class RemoveWhiteSpacePipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\s+/g, '-');
  }
}

The resulting class will be as follows (the full code):
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myCustomPipe'
})
export class MyCustomPipePipe implements PipeTransform {


  transform(value: any, args?: any): any {
    return null;
  }
}


@Pipe({name: 'removeWhiteSpace'})
export class RemoveWhiteSpacePipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\s+/g, '-');
  }
}

In the ts file of your component, create the variable that will hold the value that will be transformed
textWithSpaces = 'This is a text with a lot of spaces that will be transformed';

In the html file of your component, do the following:
<p>{{ textWithSpaces | removeWhiteSpace }}</p>

    The result is the following:

Conclusion
Angular pipes are a powerful and efficient way to transform and format data in your application’s templates. By using built-in pipes, you can easily manipulate data types such as strings, dates, and numbers without having to write repetitive logic in your components. Custom pipes offer even more flexibility, allowing you to create reusable, maintainable, and modular transformation logic tailored to your specific needs.

Understanding the distinction between pipes and functions is key to leveraging their full potential. While functions provide a direct way to execute code, pipes offer a declarative approach to handle transformations directly within templates, improving readability and performance.

Building dynamic and user-friendly applications greatly benefits from the ease with which data can be manipulated in the view layer, whether you're using Angular's built-in pipes or making your own. Gaining proficiency with Angular Pipes will help you write code that is clear, succinct, and compliant with best practices, which will eventually result in applications that are easier to maintain and scale.

Now that you know how to utilize and design pipes, you can add strong data transformations to your Angular applications, which will improve the efficiency and enjoyment of your development process.