From ba28305b04e27cdc326bdcfdafbbbb76522fea8f Mon Sep 17 00:00:00 2001
From: Shuaib Hasan Akib <akibh805@gmail.com>
Date: Tue, 11 Nov 2025 21:52:49 +0600
Subject: [PATCH] docs: replace <docs-code> block with standard fenced code
 block for typescript example

Replaced the <docs-code> wrapper with a Markdown fenced code block to improve
copy/paste usability, syntax highlighting consistency, and alignment with current
documentation formatting standards.

Inspired by angular#65043

(cherry picked from commit caaa5ec8e69e9d3d550985eb71aea213361195cf)
---
 .../reference/migrations/inject-function.md   | 52 ++++++++++---------
 .../migrations/route-lazy-loading.md          | 28 +++++-----
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/adev/src/content/reference/migrations/inject-function.md b/adev/src/content/reference/migrations/inject-function.md
index 9f7b7e6810e..1de9ee4ae55 100644
--- a/adev/src/content/reference/migrations/inject-function.md
+++ b/adev/src/content/reference/migrations/inject-function.md
@@ -14,32 +14,33 @@ ng generate @angular/core:inject
 
 #### Before
 
-<docs-code language="typescript">
+```typescript
 import { Component, Inject, Optional } from '@angular/core';
 import { MyService } from './service';
 import { DI_TOKEN } from './token';
 
 @Component()
 export class MyComp {
-constructor(
-private service: MyService,
-@Inject(DI_TOKEN) @Optional() readonly token: string) {}
+  constructor(
+    private service: MyService,
+    @Inject(DI_TOKEN) @Optional() readonly token: string
+  ) {}
 }
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
+```typescript
 import { Component, inject } from '@angular/core';
 import { MyService } from './service';
 import { DI_TOKEN } from './token';
 
 @Component()
 export class MyComp {
-private service = inject(MyService);
-readonly token = inject(DI_TOKEN, { optional: true });
+  private service = inject(MyService);
+  readonly token = inject(DI_TOKEN, { optional: true });
 }
-</docs-code>
+```
 
 ## Migration options
 
@@ -67,19 +68,19 @@ additional constructor signature to keep it backwards compatible, at the expense
 
 #### Before
 
-<docs-code language="typescript">
+```typescript
 import { Component } from '@angular/core';
 import { MyService } from './service';
 
 @Component()
 export class MyComp {
-constructor(private service: MyService) {}
+  constructor(private service: MyService) {}
 }
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
+```typescript
 import { Component } from '@angular/core';
 import { MyService } from './service';
 
@@ -92,7 +93,7 @@ constructor(...args: unknown[]);
 
 constructor() {}
 }
-</docs-code>
+```
 
 ### `nonNullableOptional`
 
@@ -108,30 +109,31 @@ because the code that depends on them likely already accounts for their nullabil
 
 #### Before
 
-<docs-code language="typescript">
+```typescript
 import { Component, Inject, Optional } from '@angular/core';
 import { TOKEN_ONE, TOKEN_TWO } from './token';
 
 @Component()
 export class MyComp {
-constructor(
-@Inject(TOKEN_ONE) @Optional() private tokenOne: number,
-@Inject(TOKEN_TWO) @Optional() private tokenTwo: string | null) {}
+  constructor(
+    @Inject(TOKEN_ONE) @Optional() private tokenOne: number,
+    @Inject(TOKEN_TWO) @Optional() private tokenTwo: string | null
+  ) {}
 }
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
+```typescript
 import { Component, inject } from '@angular/core';
 import { TOKEN_ONE, TOKEN_TWO } from './token';
 
 @Component()
 export class MyComp {
-// Note the `!` at the end.
-private tokenOne = inject(TOKEN_ONE, { optional: true })!;
+  // Note the `!` at the end.
+  private tokenOne = inject(TOKEN_ONE, { optional: true })!;
 
-// Does not have `!` at the end, because the type was already nullable.
-private tokenTwo = inject(TOKEN_TWO, { optional: true });
+  // Does not have `!` at the end, because the type was already nullable.
+  private tokenTwo = inject(TOKEN_TWO, { optional: true });
 }
-</docs-code>
+```
diff --git a/adev/src/content/reference/migrations/route-lazy-loading.md b/adev/src/content/reference/migrations/route-lazy-loading.md
index cc2642eae28..92ea364a3af 100644
--- a/adev/src/content/reference/migrations/route-lazy-loading.md
+++ b/adev/src/content/reference/migrations/route-lazy-loading.md
@@ -36,27 +36,27 @@ The migration will check all the components in the routes, check if they are sta
 
 #### Before
 
-<docs-code language="typescript">
+```typescript
 // app.module.ts
-import { HomeComponent } from './home/home.component';
+import {HomeComponent} from './home/home.component';
 
 @NgModule({
-imports: [
-RouterModule.forRoot([
-{
-path: 'home',
-// HomeComponent is standalone and eagerly loaded
-component: HomeComponent,
-},
-]),
-],
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: 'home',
+        // HomeComponent is standalone and eagerly loaded
+        component: HomeComponent,
+      },
+    ]),
+  ],
 })
 export class AppModule {}
-</docs-code>
+```
 
 #### After
 
-<docs-code language="typescript">
+```typescript
 // app.module.ts
 @NgModule({
   imports: [
@@ -70,6 +70,6 @@ export class AppModule {}
   ],
 })
 export class AppModule {}
-</docs-code>
+```
 
 This migration will also collect information about all the components declared in NgModules and output the list of routes that use them (including corresponding location of the file). Consider making those components standalone and run this migration again. You can use an existing migration ([see](reference/migrations/standalone)) to convert those components to standalone.