docs: add header to code examples (#32563)

PR Close #32563

aio/content/guide/i18n.md

@@ -193,7 +193,7 @@ text messages with different descriptions (not different meanings), then they ar
 The angular i18n extractor tool generates a file with a translation unit entry for each `i18n`
 attribute in a template. By default, it assigns each translation unit a unique id such as this one:
 
-<code-example path="i18n/doc-files/messages.fr.xlf.html" region="generated-id"></code-example>
+<code-example path="i18n/doc-files/messages.fr.xlf.html" header="messages.fr.xlf.html" region="generated-id"></code-example>
 
 When you change the translatable text, the extractor tool generates a new id for that translation unit.
 You must then update the translation file with the new id.
@@ -206,7 +206,7 @@ The example below defines the custom id `introductionHeader`:
 When you specify a custom id, the extractor tool and compiler generate a translation unit with that
 custom id.
 
-<code-example path="i18n/doc-files/messages.fr.xlf.html" region="custom-id"></code-example>
+<code-example path="i18n/doc-files/messages.fr.xlf.html" header="messages.fr.xlf.html" region="custom-id"></code-example>
 
 The custom id is persistent. The extractor tool does not change it when the translatable text changes.
 Therefore, you do not need to update the translation. This approach makes maintenance easier.
@@ -645,9 +645,9 @@ ready-to-run application package, typically for production.
 
 When you internationalize with the AOT compiler, you must pre-build a separate application
 package for each language and serve the appropriate package based on either server-side language
-detection or url parameters.
+detection or URL parameters.
 
-To instruct the AOT compiler to use your translation configuration, set the three "i18n" build configuration options in your `angular.json` file.
+To instruct the AOT compiler to use your translation configuration, set the three "i18n" build configuration options in your CLI configuration file, `angular.json`.
 
 * `i18nFile`: the path to the translation file.
 * `i18nFormat`: the format of the translation file.
@@ -763,6 +763,7 @@ Then provide the `LOCALE_ID` in the main module:
 
 {@a missing-translation}
 ### Report missing translations
+
 By default, when a translation is missing, the build succeeds but generates a warning such as
 `Missing translation for message "foo"`. You can configure the level of warning that is generated by
 the Angular compiler:
@@ -772,7 +773,7 @@ compilation, the app will fail to load.
 * Warning (default): show a 'Missing translation' warning in the console or shell.
 * Ignore: do nothing.
 
-You specify the warning level in the `configurations` section your Angular CLI build configuration. The example below shows how to set the warning level to error:
+You specify the warning level in the `configurations` section of your Angular CLI configuration file, `angular.json`. The example below shows how to set the warning level to error.
 
 ```
 "configurations": {
@@ -786,7 +787,7 @@ You specify the warning level in the `configurations` section your Angular CLI b
 
 If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding
 the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to
-error:
+error.
 
 <code-example path="i18n/doc-files/main.3.ts" header="src/main.ts">
 </code-example>

aio/content/guide/universal.md

@@ -203,9 +203,9 @@ One solution is to provide the full URL to your application on the server, and w
 value and prepend it to the request URL. If you're using the `ngExpressEngine`, as shown in the example in this guide, half
 the work is already done. We'll assume this is the case, but it's trivial to provide the same functionality.
 
-Start by creating an [HttpInterceptor](api/common/http/HttpInterceptor):
+Start by creating an [HttpInterceptor](api/common/http/HttpInterceptor).
 
-<code-example language="typescript">
+<code-example language="typescript" header="universal-interceptor.ts">
 
 import {Injectable, Inject, Optional} from '@angular/core';
 import {HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders} from '@angular/common/http';
@@ -233,9 +233,9 @@ export class UniversalInterceptor implements HttpInterceptor {
 
 </code-example>
 
-Next, provide the interceptor in the providers for the server `AppModule` (app.server.module.ts):
+Next, provide the interceptor in the providers for the server `AppModule`.
 
-<code-example language="typescript">
+<code-example language="typescript" header="app.server.module.ts">
 
 import {HTTP_INTERCEPTORS} from '@angular/common/http';
 import {UniversalInterceptor} from './universal-interceptor';

aio/content/guide/web-worker.md

@@ -13,16 +13,16 @@ Running this command will:
 - configure your project to use Web Workers, if it isn't already.
 - add `src/app/app.worker.ts` with scaffolded code to receive messages:
 
-  ```typescript
+  <code-example language="typescript" header="src/app/app.worker.ts">
   addEventListener('message', ({ data }) => {
     const response = `worker response to ${data}`;
     postMessage(response);
   });
-  ```
+ </code-example>
 
 - add scaffolded code to `src/app/app.component.ts` to use the worker:
 
-  ```typescript
+  <code-example language="typescript" header="src/app/app.component.ts">
   if (typeof Worker !== 'undefined') {
     // Create a new
     const worker = new Worker('./app.worker', { type: 'module' });
@@ -34,7 +34,7 @@ Running this command will:
     // Web Workers are not supported in this environment.
     // You should add a fallback so that your program still executes correctly.
   }
-  ```
+  </code-example>
 
 After the initial scaffolding, you will need to refactor your code to use the Web Worker by sending messages to and from.