Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# Clean up unused imports

As of version 19, Angular reports when a component's `imports` array contains symbols that aren't used in its template.

Running this schematic will clean up all unused imports within the project.

Run the schematic using the following command:

```shell
ng generate @angular/core:cleanup-unused-imports
```

#### Before

```angular-ts
import {Component} from '@angular/core';
import {UnusedDirective} from './unused';

@Component({
template: 'Hello',
imports: [UnusedDirective],
})
export class MyComp {}
```

#### After

```angular-ts
import {Component} from '@angular/core';

@Component({
template: 'Hello',
imports: [],
})
export class MyComp {}
```
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# Clean up unused imports
# Limpiar importaciones no utilizadas

As of version 19, Angular reports when a component's `imports` array contains symbols that aren't used in its template.
A partir de la versión 19, Angular reporta cuando el array `imports` de un componente contiene símbolos que no se usan en su plantilla.

Running this schematic will clean up all unused imports within the project.
Ejecutar este schematic limpiará todas las importaciones no utilizadas dentro del proyecto.

Run the schematic using the following command:
Ejecuta el schematic usando el siguiente comando:

```shell
ng generate @angular/core:cleanup-unused-imports
```

#### Before
#### Antes

```angular-ts
import {Component} from '@angular/core';
Expand All @@ -23,7 +23,7 @@ import {UnusedDirective} from './unused';
export class MyComp {}
```

#### After
#### Después

```angular-ts
import {Component} from '@angular/core';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Convert CommonModule usage to standalone imports

This migration helps projects remove imports of the `CommonModule` inside components by adding the minimal set of directive and pipe imports each template requires (for example, `NgIf`, `NgFor`, `AsyncPipe`, etc.).

Run the schematic using the following command:

```shell
ng generate @angular/core:common-to-standalone
```

## Options

| Option | Details |
| :----- | :---------------------------------------------------------------------------------------------------------------------------- |
| `path` | The path (relative to project root) to migrate. Defaults to `./`. Use this to incrementally migrate a subset of your project. |

## Example

Before:

```angular-ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-example',
imports: [CommonModule],
template: `
<div *ngIf="show">
{{ data | async | json }}
</div>
`
})
export class ExampleComponent {
show = true;
data = Promise.resolve({ message: 'Hello' });
}
```

After running the migration (component imports added, CommonModule removed):

```angular-ts
import { Component } from '@angular/core';
import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';

@Component({
selector: 'app-example',
imports: [AsyncPipe, JsonPipe, NgIf],
template: `
<div *ngIf="show">
{{ data | async | json }}
</div>
`
})
export class ExampleComponent {
show = true;
data = Promise.resolve({ message: 'Hello' });
}
```
20 changes: 10 additions & 10 deletions adev-es/src/content/reference/migrations/common-to-standalone.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# Convert CommonModule usage to standalone imports
# Convertir el uso de CommonModule a importaciones standalone

This migration helps projects remove imports of the `CommonModule` inside components by adding the minimal set of directive and pipe imports each template requires (for example, `NgIf`, `NgFor`, `AsyncPipe`, etc.).
Esta migración ayuda a los proyectos a eliminar las importaciones de `CommonModule` dentro de los componentes agregando el conjunto mínimo de importaciones de directivas y pipes que cada plantilla requiere (por ejemplo, `NgIf`, `NgFor`, `AsyncPipe`, etc.).

Run the schematic using the following command:
Ejecuta el schematic usando el siguiente comando:

```shell
ng generate @angular/core:common-to-standalone
```

## Options
## Opciones

| Option | Details |
| :----- | :---------------------------------------------------------------------------------------------------------------------------- |
| `path` | The path (relative to project root) to migrate. Defaults to `./`. Use this to incrementally migrate a subset of your project. |
| Opción | Detalles |
| :----- | :----------------------------------------------------------------------------------------------------------------------------------------- |
| `path` | La ruta (relativa a la raíz del proyecto) a migrar. Por defecto es `./`. Úsala para migrar de forma incremental un subconjunto de tu proyecto. |

## Example
## Ejemplo

Before:
Antes:

```angular-ts
import { Component } from '@angular/core';
Expand All @@ -37,7 +37,7 @@ export class ExampleComponent {
}
```

After running the migration (component imports added, CommonModule removed):
Después de ejecutar la migración (importaciones del componente agregadas, CommonModule eliminado):

```angular-ts
import { Component } from '@angular/core';
Expand Down
11 changes: 11 additions & 0 deletions adev-es/src/content/reference/migrations/control-flow.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Migration to Control Flow syntax

[Control flow syntax](guide/templates/control-flow) is available from Angular v17. The new syntax is baked into the template, so you don't need to import `CommonModule` anymore.

This schematic migrates all existing code in your application to use new Control Flow Syntax.

Run the schematic using the following command:

```shell
ng generate @angular/core:control-flow
```
8 changes: 4 additions & 4 deletions adev-es/src/content/reference/migrations/control-flow.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Migration to Control Flow syntax
# Migración a la sintaxis de flujo de control

[Control flow syntax](guide/templates/control-flow) is available from Angular v17. The new syntax is baked into the template, so you don't need to import `CommonModule` anymore.
La [sintaxis de flujo de control](guide/templates/control-flow) está disponible desde Angular v17. La nueva sintaxis está integrada en la plantilla, por lo que ya no necesitas importar `CommonModule`.

This schematic migrates all existing code in your application to use new Control Flow Syntax.
Este schematic migra todo el código existente en tu aplicación para usar la nueva sintaxis de flujo de control.

Run the schematic using the following command:
Ejecuta el schematic usando el siguiente comando:

```shell
ng generate @angular/core:control-flow
Expand Down
137 changes: 137 additions & 0 deletions adev-es/src/content/reference/migrations/inject-function.en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
# Migration to the `inject` function

Angular's `inject` function offers more accurate types and better compatibility with standard decorators, compared to constructor-based injection.

This schematic converts constructor-based injection in your classes to use the `inject` function instead.

Run the schematic using the following command:

```shell
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
) {}
}
```

#### 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 });
}
```

## Migration options

The migration includes several options to customize its output.

### `path`

Determines which sub-path in your project should be migrated. Pass in `.` or leave it blank to
migrate the entire directory.

### `migrateAbstractClasses`

Angular doesn't validate that parameters of abstract classes are injectable. This means that the
migration can't reliably migrate them to `inject` without risking breakages which is why they're
disabled by default. Enable this option if you want abstract classes to be migrated, but note
that you may have to **fix some breakages manually**.

### `backwardsCompatibleConstructors`

By default the migration tries to clean up the code as much as it can, which includes deleting
parameters from the constructor, or even the entire constructor if it doesn't include any code.
In some cases this can lead to compilation errors when classes with Angular decorators inherit from
other classes with Angular decorators. If you enable this option, the migration will generate an
additional constructor signature to keep it backwards compatible, at the expense of more code.

#### Before

```typescript
import { Component } from '@angular/core';
import { MyService } from './service';

@Component()
export class MyComp {
constructor(private service: MyService) {}
}
```

#### After

```typescript
import { Component } from '@angular/core';
import { MyService } from './service';

@Component()
export class MyComp {
private service = inject(MyService);

/\*_ Inserted by Angular inject() migration for backwards compatibility _/
constructor(...args: unknown[]);

constructor() {}
}
```

### `nonNullableOptional`

If injection fails for a parameter with the `@Optional` decorator, Angular returns `null` which
means that the real type of any `@Optional` parameter will be `| null`. However, because decorators
cannot influence their types, there is a lot of existing code whose type is incorrect. The type is
fixed in `inject()` which can cause new compilation errors to show up. If you enable this option,
the migration will produce a non-null assertion after the `inject()` call to match the old type,
at the expense of potentially hiding type errors.

**NOTE:** non-null assertions won't be added to parameters that are already typed to be nullable,
because the code that depends on them likely already accounts for their nullability.

#### 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
) {}
}
```

#### 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 })!;

// Does not have `!` at the end, because the type was already nullable.
private tokenTwo = inject(TOKEN_TWO, { optional: true });
}
```
Loading