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

Angular-Configurations :👈

👉:Angular Router Outlet