*
Previous Angular-Configurations Angular Router Outlet Next

In Angular 17+ : Modular Configuration

Modular Configuration with app.config.ts & app.config.server.ts

The modular configuration files app.config.ts and app.config.server.ts were introduced in Angular 17 as part of the framework’s push toward standalone components and server-side rendering (SSR)., platform-specific bootstrapping, and cleaner application setup.

🧠 Why Angular 17 Made This Shift

Angular 17 introduced:

  • bootstrapApplication() as the preferred way to start apps (replacing NgModule-based bootstrapping).
  • ApplicationConfig interface to centralize providers.
  • SSR improvements with provideServerRendering().

These changes encouraged developers to split configuration logic into:

  • app.config.ts → for browser/client-side setup.
  • app.config.server.ts → for server-side rendering (SSR) setup.

This modular approach became even more prominent in Angular 18 and 20.

🧩 app.config.ts — Client-Side Configuration

This file defines the application configuration for the browser platform. It’s used when bootstrapping the app with bootstrapApplication() in main.ts.

🔧 Purpose

  • Registers providers like routing, animations, HTTP client, etc.
  • Keeps configuration modular and reusable.
  • Avoids cluttering main.ts.

📦 Example

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withInMemoryScrolling } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { appRoutes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    provideHttpClient(),
    provideRouter(
      appRoutes,
      withInMemoryScrolling({ scrollPositionRestoration: 'enabled' })
    )
  ]
};

🧠 Usage in main.ts

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

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

🌐 app.config.server.ts — Server-Side Configuration (SSR)

This file is used when bootstrapping the app for server-side rendering (e.g., Angular Universal). It allows you to override or extend the client config with SSR-specific providers.

🔧 Purpose

  • Add SSR-specific providers like provideServerRendering().
  • Customize routing or HTTP behavior for server context.
  • Keep SSR logic separate from browser logic.

📦 Example

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

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

🧠 Usage in main.server.ts

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

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

🧪 Benefits of This Pattern

Feature app.config.ts app.config.server.ts
Target Platform Browser Server (SSR)
Bootstrapping Method main.ts main.server.ts
Providers Included Animations, Router, HTTP All from app.config.ts + SSR
Modularity High High
Reusability Across environments With overrides for SSR

🧠 Pro Tip

Given your modular teaching style and focus on runtime mechanics, you can extend this pattern by creating:

  • app.config.testing.ts for test environments.
  • app.config.multi-tenant.ts with dynamic providers based on tenant metadata.
  • Companion modules that inject config via APP_INITIALIZER for external JSON configs.
Back to Index
Previous Angular-Configurations Angular Router Outlet Next
*
*