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
-
+```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
+ ) {}
}
-
+```
#### After
-
+```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 });
}
-
+```
## Migration options
@@ -67,19 +68,19 @@ additional constructor signature to keep it backwards compatible, at the expense
#### Before
-
+```typescript
import { Component } from '@angular/core';
import { MyService } from './service';
@Component()
export class MyComp {
-constructor(private service: MyService) {}
+ constructor(private service: MyService) {}
}
-
+```
#### After
-
+```typescript
import { Component } from '@angular/core';
import { MyService } from './service';
@@ -92,7 +93,7 @@ constructor(...args: unknown[]);
constructor() {}
}
-
+```
### `nonNullableOptional`
@@ -108,30 +109,31 @@ because the code that depends on them likely already accounts for their nullabil
#### Before
-
+```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
+ ) {}
}
-
+```
#### After
-
+```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 });
}
-
+```
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
-
+```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 {}
-
+```
#### After
-
+```typescript
// app.module.ts
@NgModule({
imports: [
@@ -70,6 +70,6 @@ export class AppModule {}
],
})
export class AppModule {}
-
+```
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.