docs: use code block headers for filenames

Move filename comments into headers to keep examples focused on code.

adev/src/content/guide/di/defining-dependency-providers.md

@@ -38,8 +38,7 @@ NOTE: The string parameter (e.g., `'api.url'`) is a description purely for debug
 
 An `InjectionToken` that has a `factory` results in `providedIn: 'root'` by default (but can be overridden via the `providedIn` prop).
 
-```ts
-// 📁 /app/config.token.ts
+```ts {header: "/app/config.token.ts"}
 import {InjectionToken} from '@angular/core';
 
 export interface AppConfig {
@@ -75,8 +74,7 @@ export class Header {
 
 InjectionToken with factory functions is ideal when you can't use a class but need to provide dependencies globally:
 
-```ts
-// 📁 /app/logger.token.ts
+```ts {header: "/app/logger.token.ts"}
 import {InjectionToken, inject} from '@angular/core';
 import {APP_CONFIG} from './config.token';
 
@@ -96,8 +94,9 @@ export const LOGGER_FN = new InjectionToken<LoggerFn>('logger.function', {
     };
   },
 });
+```
 
-// 📁 /app/storage.token.ts
+```ts {header: "/app/storage.token.ts"}
 // Providing browser APIs as tokens
 export const LOCAL_STORAGE = new InjectionToken<Storage>('localStorage', {
   // providedIn: 'root' is configured as the default
@@ -108,8 +107,9 @@ export const SESSION_STORAGE = new InjectionToken<Storage>('sessionStorage', {
   providedIn: 'root',
   factory: () => window.sessionStorage,
 });
+```
 
-// 📁 /app/feature-flags.token.ts
+```ts {header: "/app/feature-flags.token.ts"}
 // Complex configuration with runtime logic
 export const FEATURE_FLAGS = new InjectionToken<Map<string, boolean>>('feature.flags', {
   providedIn: 'root',
@@ -300,8 +300,7 @@ The class serves as both the identifier and the implementation, which is why Ang
 
 Angular provides a built-in [`InjectionToken`](api/core/InjectionToken) class that creates a unique object reference for injectable values or when you want to provide multiple implementations of the same interface.
 
-```ts
-// 📁 /app/tokens.ts
+```ts {header: "/app/tokens.ts"}
 import {InjectionToken} from '@angular/core';
 import {DataService} from './data-service.interface';
 
@@ -624,8 +623,7 @@ Use application-level providers in `bootstrapApplication` when:
 - **The service has no component-specific configuration** - General-purpose utilities that work the same everywhere
 - **You're providing global configuration** - API endpoints, feature flags, or environment settings
 
-```ts
-// main.ts
+```ts {header: "main.ts"}
 bootstrapApplication(App, {
   providers: [
     {provide: API_BASE_URL, useValue: 'https://api.example.com'},
@@ -709,8 +707,7 @@ Use route-level providers for:
 - **Lazy-loaded module dependencies** - Services that should only load with specific features
 - **Route-specific configuration** - Settings that vary by application area
 
-```ts
-// routes.ts
+```ts {header: "routes.ts"}
 export const routes: Routes = [
   {
     path: 'admin',
@@ -743,8 +740,7 @@ When creating Angular libraries, you often need to provide flexible configuratio
 
 Instead of requiring users to manually configure complex providers, library authors can export functions that return provider configurations:
 
-```ts
-// 📁 /libs/analytics/src/providers.ts
+```ts {header: "/libs/analytics/src/providers.ts"}
 import {InjectionToken, Provider, inject} from '@angular/core';
 
 // Configuration interface
@@ -770,9 +766,10 @@ export class AnalyticsService {
 export function provideAnalytics(config: AnalyticsConfig): Provider[] {
   return [{provide: ANALYTICS_CONFIG, useValue: config}, AnalyticsService];
 }
+```
 
+```ts {header: "main.ts"}
 // Usage in consumer app
-// main.ts
 bootstrapApplication(App, {
   providers: [
     provideAnalytics({
@@ -787,8 +784,7 @@ bootstrapApplication(App, {
 
 For more complex scenarios, you can combine multiple configuration approaches:
 
-```ts
-// 📁 /libs/http-client/src/provider.ts
+```ts {header: "/libs/http-client/src/provider.ts"}
 import {Provider, InjectionToken, inject} from '@angular/core';
 
 // Feature flags for optional functionality

adev/src/content/guide/routing/route-guards.md

@@ -142,8 +142,7 @@ export const featureToggleGuard: CanMatchFn = (
 
 It can also allow you to use different components for the same path.
 
-```ts
-// 📄 routes.ts
+```ts {header: "routes.ts"}
 const routes: Routes = [
   {
     path: 'dashboard',

adev/src/content/guide/ssr.md

@@ -28,8 +28,7 @@ NOTE: By default, Angular prerenders your entire application and generates a ser
 
 You can create a server route config by declaring an array of [`ServerRoute`](api/ssr/ServerRoute 'API reference') objects. This configuration typically lives in a file named `app.routes.server.ts`.
 
-```typescript
-// app.routes.server.ts
+```typescript {header: "app.routes.server.ts"}
 import {RenderMode, ServerRoute} from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
@@ -54,11 +53,10 @@ export const serverRoutes: ServerRoute[] = [
 
 You can add this config to your application with [`provideServerRendering`](api/ssr/provideServerRendering 'API reference') using the [`withRoutes`](api/ssr/withRoutes 'API reference') function:
 
-```typescript
+```typescript {header: "app.config.server.ts"}
 import {provideServerRendering, withRoutes} from '@angular/ssr';
 import {serverRoutes} from './app.routes.server';
 
-// app.config.server.ts
 const serverConfig: ApplicationConfig = {
   providers: [
     provideServerRendering(withRoutes(serverRoutes)),
@@ -137,8 +135,7 @@ NOTE: When using Angular service worker, the first request is server-rendered, b
 
 You can set custom headers and status codes for individual server routes using the `headers` and `status` properties in the `ServerRoute` configuration.
 
-```typescript
-// app.routes.server.ts
+```typescript {header: "app.routes.server.ts"}
 import {RenderMode, ServerRoute} from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
@@ -178,8 +175,7 @@ The body of [`getPrerenderParams`](api/ssr/ServerRoutePrerenderWithParams#getPre
 
 You can also use this function with catch-all routes (e.g., `/**`), where the parameter name will be `"**"` and the return value will be the segments of the path, such as `foo/bar`. These can be combined with other parameters (e.g., `/post/:id/**`) to handle more complex route configuration.
 
-```ts
-// app.routes.server.ts
+```ts {header: "app.routes.server.ts"}
 import {RenderMode, ServerRoute} from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
@@ -220,8 +216,7 @@ The available fallback strategies are:
 - **Client:** Falls back to client-side rendering.
 - **None:** No fallback. Angular will not handle requests for paths that are not prerendered.
 
-```ts
-// app.routes.server.ts
+```ts {header: "app.routes.server.ts"}
 import {RenderMode, PrerenderFallback, ServerRoute} from '@angular/ssr';
 
 export const serverRoutes: ServerRoute[] = [
@@ -309,8 +304,7 @@ export class ServerAnalyticsService implements AnalyticsService {
 
 Register the browser implementation in your main application configuration:
 
-```ts
-// app.config.ts
+```ts {header: "app.config.ts"}
 export const appConfig: ApplicationConfig = {
   providers: [{provide: AnalyticsService, useClass: BrowserAnalyticsService}],
 };
@@ -318,8 +312,7 @@ export const appConfig: ApplicationConfig = {
 
 Override with the server implementation in your server configuration:
 
-```ts
-// app.config.server.ts
+```ts {header: "app.config.server.ts"}
 const serverConfig: ApplicationConfig = {
   providers: [{provide: AnalyticsService, useClass: ServerAnalyticsService}],
 };
@@ -614,8 +607,7 @@ NOTE: If your application uses different HTTP origins to make API calls on the s
 
 The `@angular/ssr/node` extends `@angular/ssr` specifically for Node.js environments. It provides APIs that make it easier to implement server-side rendering within your Node.js application. For a complete list of functions and usage examples, refer to the [`@angular/ssr/node` API reference](api/ssr/node/AngularNodeAppEngine) API reference.
 
-```ts
-// server.ts
+```ts {header: "server.ts"}
 import {
   AngularNodeAppEngine,
   createNodeRequestHandler,
@@ -649,8 +641,7 @@ export const reqHandler = createNodeRequestHandler(app);
 
 The `@angular/ssr` provides essential APIs for server-side rendering your Angular application on platforms other than Node.js. It leverages the standard [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects from the Web API, enabling you to integrate Angular SSR into various server environments. For detailed information and examples, refer to the [`@angular/ssr` API reference](api/ssr/AngularAppEngine).
 
-```ts
-// server.ts
+```ts {header: "server.ts"}
 import {AngularAppEngine, createRequestHandler} from '@angular/ssr';
 
 const angularApp = new AngularAppEngine();

adev/src/content/guide/templates/defer.md

@@ -386,14 +386,12 @@ To render the main content of `@defer` blocks on the server (both SSR and SSG),
 
 If you're using `@defer` but not seeing a separate lazy chunk in your build output, check how you're importing the deferred component. Importing through a barrel file (`index.ts`) is a common culprit — bundlers see the barrel as a single module and keep all its exports together, so your component ends up in the main bundle regardless of `@defer`.
 
-```typescript
-// index.ts
+```typescript {header: "index.ts"}
 export {HeavyComponent} from './heavy.component';
 export {OtherComponent} from './other.component';
 ```
 
-```typescript
-// parent.component.ts
+```typescript {header: "parent.component.ts"}
 import {HeavyComponent} from './index'; // pulls in OtherComponent too
 
 @Component({

adev/src/content/guide/templates/pipes.md

@@ -177,8 +177,7 @@ The TypeScript class should additionally implement the `PipeTransform` interface
 
 Here is an example of a custom pipe that transforms strings to kebab case:
 
-```angular-ts
-// kebab-case.pipe.ts
+```angular-ts {header: "kebab-case.pipe.ts"}
 import {Pipe, PipeTransform} from '@angular/core';
 
 @Pipe({

adev/src/content/introduction/essentials/components.md

@@ -15,8 +15,7 @@ Every component has a few main parts:
 
 Here is a simplified example of a `UserProfile` component.
 
-```angular-ts
-// user-profile.ts
+```angular-ts {header: "user-profile.ts"}
 @Component({
   selector: 'user-profile',
   template: `
@@ -31,8 +30,7 @@ export class UserProfile {
 
 The `@Component` decorator also optionally accepts a `styles` property for any CSS you want to apply to your template:
 
-```angular-ts
-// user-profile.ts
+```angular-ts {header: "user-profile.ts"}
 @Component({
   selector: 'user-profile',
   template: `
@@ -54,8 +52,7 @@ export class UserProfile {
 
 You can define a component's HTML and CSS in separate files using `templateUrl` and `styleUrl`:
 
-```angular-ts
-// user-profile.ts
+```angular-ts {header: "user-profile.ts"}
 @Component({
   selector: 'user-profile',
   templateUrl: 'user-profile.html',
@@ -66,14 +63,12 @@ export class UserProfile {
 }
 ```
 
-```angular-html
-<!-- user-profile.html -->
+```angular-html {header: "user-profile.html"}
 <h1>User profile</h1>
 <p>This is the user profile page</p>
 ```
 
-```css
-/* user-profile.css */
+```css {header: "user-profile.css"}
 h1 {
   font-size: 3em;
 }
@@ -102,8 +97,7 @@ To import and use a component, you need to:
 
 Here's an example of a `UserProfile` component importing a `ProfilePhoto` component:
 
-```angular-ts
-// user-profile.ts
+```angular-ts {header: "user-profile.ts"}
 import {ProfilePhoto} from 'profile-photo.ts';
 
 @Component({

adev/src/content/reference/configs/workspace-config.md

@@ -407,8 +407,7 @@ To add paths, use the `stylePreprocessorOptions` option:
 
 Files in that directory, such as `src/style-paths/_variables.scss`, can be imported from anywhere in your project without the need for a relative path:
 
-```scss
-// src/app/app.scss
+```scss {header: "src/app/app.scss"}
 // A relative path works
 @import '../style-paths/variables';
 

adev/src/content/reference/migrations/route-lazy-loading.md

@@ -31,8 +31,7 @@ The migration will check all the components in the routes, check if they are sta
 
 #### Before
 
-```typescript
-// app.module.ts
+```typescript {header: "app.module.ts"}
 import {Home} from './home';
 
 @NgModule({
@@ -51,8 +50,7 @@ export class AppModule {}
 
 #### After
 
-```typescript
-// app.module.ts
+```typescript {header: "app.module.ts"}
 @NgModule({
   imports: [
     RouterModule.forRoot([

adev/src/content/reference/migrations/standalone.md

@@ -67,8 +67,7 @@ HELPFUL: The schematic ignores NgModules which bootstrap a component during this
 
 **Before:**
 
-```typescript
-// shared.module.ts
+```typescript {header: "shared.module.ts"}
 @NgModule({
   imports: [CommonModule],
   declarations: [Greeter],
@@ -77,8 +76,7 @@ HELPFUL: The schematic ignores NgModules which bootstrap a component during this
 export class SharedModule {}
 ```
 
-```angular-ts
-// greeter.ts
+```angular-ts {header: "greeter.ts"}
 @Component({
   selector: 'greeter',
   template: '<div *ngIf="showGreeting">Hello</div>',
@@ -91,8 +89,7 @@ export class Greeter {
 
 **After:**
 
-```typescript
-// shared.module.ts
+```typescript {header: "shared.module.ts"}
 @NgModule({
   imports: [CommonModule, Greeter],
   exports: [Greeter],
@@ -100,8 +97,7 @@ export class Greeter {
 export class SharedModule {}
 ```
 
-```angular-ts
-// greeter.ts
+```angular-ts {header: "greeter.ts"}
 @Component({
   selector: 'greeter',
   template: '<div *ngIf="showGreeting">Hello</div>',
@@ -130,8 +126,7 @@ The migration considers a module safe to remove if that module:
 
 **Before:**
 
-```typescript
-// importer.module.ts
+```typescript {header: "importer.module.ts"}
 @NgModule({
   imports: [FooComponent, BarPipe],
   exports: [FooComponent, BarPipe],
@@ -141,8 +136,7 @@ export class ImporterModule {}
 
 **After:**
 
-```typescript
-// importer.module.ts
+```typescript {header: "importer.module.ts"}
 // Does not exist!
 ```
 
@@ -152,8 +146,7 @@ This step converts any usages of `bootstrapModule` to the new, standalone-based
 
 **Before:**
 
-```typescript
-// ./app/app.module.ts
+```typescript {header: "./app/app.module.ts"}
 import {NgModule} from '@angular/core';
 import {App} from './app';
 
@@ -164,8 +157,7 @@ import {App} from './app';
 export class AppModule {}
 ```
 
-```typescript
-// ./app/app.ts
+```typescript {header: "./app/app.ts"}
 @Component({
   selector: 'app',
   template: 'hello',
@@ -174,8 +166,7 @@ export class AppModule {}
 export class App {}
 ```
 
-```typescript
-// ./main.ts
+```typescript {header: "./main.ts"}
 import {platformBrowser} from '@angular/platform-browser';
 import {AppModule} from './app/app.module';
 
@@ -186,13 +177,11 @@ platformBrowser()
 
 **After:**
 
-```typescript
-// ./app/app.module.ts
+```typescript {header: "./app/app.module.ts"}
 // Does not exist!
 ```
 
-```typescript
-// ./app/app.ts
+```typescript {header: "./app/app.ts"}
 @Component({
   selector: 'app',
   template: 'hello',
@@ -200,8 +189,7 @@ platformBrowser()
 export class App {}
 ```
 
-```typescript
-// ./main.ts
+```typescript {header: "./main.ts"}
 import {bootstrapApplication} from '@angular/platform-browser';
 import {App} from './app';