Angular 19.0: New features coming
ℹ️ Draft: The development of Angular 19.0 is just started, this is a work-in-progress collection of notes.
- What's coming?
- Major new features
- Minor new features
- Important Breaking changes
- How to update to Angular@next?
Release date: This release should be ready between the end of 2024 and the beginning of 2025. We will follow the weekly changes.
Here is a list of what can be useful in the daily activity of a developer.
Compiler improvement and bug fixes are not included.
If you want to test the new features you need the next version of Angular. For an existing project you can upgrade using ng update @angular/cli @angular/core --next
What's coming?
Version 18.2 has just been released. This is the recommended version for production.
Latest version: 19.0.0-next.2 (2024-08-14)
Node version: no change (yet), ^18.19.1 || ^20.11.1
Typescript version: added support for 5.6 and removed support for 5.4, >=5.5 <5.7
Yarn version: no change (yet), >=1.22.4 <2
Changes:
Major new features
Standalone will be the standard.
standalone: true will be the default for components, directives and pipes.
A component without 'standalone' is a standalone component.
@Component({
imports: [FormsModule],
selector: 'example',
template: './example-component.html',
})
export class ExampleComponent {…}
If you are using NgModules you have to add standalone: false to your components.
The update tool should do this for you.
Minor new features
Diagnostic for unused standalone imports
Angular introduced a new diagnostic that will warn if there are unused standalone imports in the code.
It's recommended to remove the useless imports, to remove the warning:
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"unusedStandaloneImports": "suppress"
}
}
}
RouterOutletData
There is a new InjectionToken ROUTER_OUTLET_DATA that allows to pass data from a parent component to the outlet components (link).
// To set the data from the template of the component with `router-outlet`:
<router-outlet [routerOutletData]="{name: 'Angular'}" />
// To read the data in the routed component:
data = inject(ROUTER_OUTLET_DATA) as Signal<{name: string}>;
TypeScript 5.6
The support for TypeScript 5.6 has been added. You can use TypeScript >= 5.4 until < 5.7
Material: interaction with disabled components
https://github.com/angular/components/pull/29574#issue-2463200398
In previous versions, by default, it was not possible to interact with disabled components and some workarounds were required.
Here an example of workaround for previous versions: https://marmo.dev/angular-material-tooltip
Here an example using Angular 19
<mat-form-field [appearance]="appearance">
<mat-label>Label</mat-label>
<input
matNativeControl
disabled
disabledInteractive
value="Value"
matTooltip="I can trigger a tooltip!">
</mat-form-field>
In MatInput has been added disabledInteractive that defines whether disabled inputs should be interactive.
Important Breaking changes
- The Router.errorHandler property has been removed. Adding an error handler should be configured in either withNavigationErrorHandler with provideRouter or the errorHandler property in the extra options of RouterModule.forRoot
How to update to Angular@next?
In this post I explain how to update your local version to Angular@next
https://marmo.dev/angular-update
Sources
Blog: The future is standalone