diff --git a/adev/src/content/reference/roadmap.md b/adev/src/content/reference/roadmap.md index 03c25443e5a..cd455348496 100644 --- a/adev/src/content/reference/roadmap.md +++ b/adev/src/content/reference/roadmap.md @@ -19,22 +19,25 @@ Start developing with the latest Angular features from our roadmap. This list re ### Available to experiment with -* [Explore Angular Signals](guide/signals) -* [Event replay with SSR](https://angular.dev/api/platform-browser/withEventReplay) +* [Incremental hydration](/guide/experimental/incremental-hydration) * [Zoneless change detection](https://angular.dev/guide/experimental/zoneless) * [Hydration support for i18n blocks](https://angular.dev/api/platform-browser/withI18nSupport) +* Resource API +* Effect API +* Linked Signal API +* [Route-level render mode](https://next.angular.dev/guide/hybrid-rendering) ### Production ready -* [Hydration](guide/hydration) +* [Explore Angular Signals](guide/signals) +* [Event replay with SSR](https://angular.dev/api/platform-browser/withEventReplay) * [Deferrable views](https://angular.dev/guide/defer) * [Built-in control flow](https://angular.dev/guide/templates/control-flow) -* [Migrate your Angular Material to MDC](https://material.angular.io/guide/mdc-migration) -* [Angular Material 3](https://material.angular.io/guide/theming) -* [Migrate to Standalone APIs](reference/migrations/standalone) -* [Improve image performance with NgOptimizedImage](guide/image-optimization) -* [Try out Inject](/tutorials/learn-angular/20-inject-based-di) -* [New CDK directives](https://material.angular.io/cdk/categories) +* [Local variable declaration](https://angular.dev/guide/templates/variables) +* [Signal inputs](https://angular.dev/guide/signals/inputs) +* [Model inputs](https://angular.dev/guide/signals/model) +* [Signal queries](https://angular.dev/guide/signals/queries) +* [Function-based outputs](https://angular.dev/guide/components/output-fn) ## Improving the Angular developer experience @@ -44,15 +47,23 @@ Start developing with the latest Angular features from our roadmap. This list re This project rethinks the Angular reactivity model by introducing Signals as a reactivity primitive. The initial planning resulted in hundreds of discussions, conversations with developers, feedback sessions, user experience studies, and a series of RFCs, which received over 1,000 comments. - As part of the v17 release, we graduated the Angular Signals library from developer preview. In v18 you can now use signal-based queries, inputs, and model inputs in developer preview. Next we'll continue addressing community feedback before graduating these APIs to stable and integrate signals deeper in Angular's change detection mechanism. + As part of the v17 release, we graduated the Angular Signals library from developer preview. In v19 we moved signal-based queries, inputs, and model inputs to stable. Next, we'll need to finalize effects before we complete this project. In v18 we shipped experimental zoneless support in Angular. It enables developers to use the framework without including zone.js in their bundle, which improves performance, debugging experience, and interoperability. As part of the initial release we also introduced zoneless support to the Angular CDK and Angular Material. - As the next step, we'll continue iterating on the API to improve developer experience. + In v19 we introduced zoneless support in server-side rendering, addressed some edge cases, and created a schematic to scaffold zoneless projects. We transitioned Google Fonts to zoneless which improved performance, developer experience, and allowed us to identify gaps that we need to address before moving this feature to developer preview. Stay tuned for more updates in the next months. - - Local template variables is one of the most upvoted features in the Angular issue tracker. In Q2 2024 we started initial design and prototyping. Expect updates later in 2024. + + We're working towards improving the integration of fundamental Angular packages, such as forms, HTTP, and router, with Signals. As part of this project, we'll seek opportunities to introduce convenient signal-based APIs or wrappers to improve the holistic developer experience. + + + With the evolution of Signals in Angular, we are working on a better tooling for debugging them. High on the priority list is a UI for inspecting and debugging signals. + + + We're working towards faster edit/refresh cycle by enabling hot module replacement. + + In Angular v19 we shipped initial support for CSS and template HMR. We'll continue collecting feedback to make sure we're addressing developers' needs before we mark this project as complete. @@ -71,30 +82,29 @@ Start developing with the latest Angular features from our roadmap. This list re - In v12, we revisited the Angular end-to-end testing experience by replacing Protractor with modern alternatives such as Cypress, Nightwatch, and Webdriver.io. Next, we'd like to tackle `ng test` to modernize Angular's unit testing experience. In Q2 2023, we introduced experimental [Jest](https://jestjs.io/) support and [announced](https://blog.angular.dev/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca) the transition from Karma to the [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/). + In v12, we revisited the Angular end-to-end testing experience by replacing Protractor with modern alternatives such as Cypress, Nightwatch, Puppeteer, Playwright, and Webdriver.io. Next, we'd like to tackle `ng test` to modernize Angular's unit testing experience. - Later this year we'll continue making progress towards introducing Web Test Runner as the replacement of Karma. + We're currently evaluating Web Test Runner, Vitest, and Jest as candidates for a new test runner for Angular projects while preserving Jasmine as assertion library to not break existing tests. - - As part of this initiative, the language service automatically imports components and pipes in standalone and NgModule-based apps. Additionally, to enable smaller app bundles, we'll work on allowing the language service to propose the automatic removal of unused imports. + + We're excited about the set of features that Nitro offers such as more deployment options, improved compatibility of server-side rendering with different runtimes and file-based routing. In 2025 we'll evaluate how it fits in the Angular server-side rendering model. + + We'll share updates as we make progress in this investigation. ## Fast by default - - In v17 we graduated hydration from developer preview and we've been consistently observing 40-50% improvements in LCP. Since then we started prototyping partial hydration and shared a demo on stage at ng-conf. Expect an experimental support in 2024. - - - In v18 we introduced an event replay functionality when using server-side rendering or prerendering. For this feature we depend on the event dispatch primitive (previously known as jsaction) that is running on Google.com. - - Over the next couple of months we'll be collecting feedback from the community for this feature and work towards graduating it to stable. + + In v17 we graduated hydration from developer preview and we've been consistently observing 40-50% improvements in LCP. Since then we started prototyping incremental hydration and shared a demo on stage at ng-conf. + + In v19 we shipped the incremental hydration in developer preview mode, powered by `@defer` blocks. Give it a try and share your feedback with us! We're working towards enabling a more ergonomic route configuration on the server. We want to make it trivial to declare which routes should be server-side rendered, prerendered or client-side rendered. - As of right now, we're in early design and prototyping phase. Expect updates later in 2024. + In Angular v19 we shipped developer preview of route-level render mode which allows you to granularly configure which routes you want Angular to prerender, server-side render or client-side render. @@ -103,14 +113,13 @@ Start developing with the latest Angular features from our roadmap. This list re This section represents explorations and prototyping of potential future projects. A reasonable outcome is to decide that our current solutions are the best options. Other projects may result in RFCs, graduating to in-progress projects, or being deprioritized as the web continues to innovate along with our framework. - - With the evolution of Signals in Angular, we'll be also working on a better tooling for debugging them. High on the priority list is a UI for inspecting and debugging Signal-based components. + + We plan to analyze existing feedback about Angular forms and design a solution which addresses developers' requirements and uses Signals for management of reactive state. - - Angular CLI currently supports HMR via `ng serve --hmr`. Under the hood, this mostly rerenders the Angular application from scratch, which is better than a full page reload, but can definitely be improved. Most importantly, our strategy here should be to optimize the turnaround time for any given change scaled with the frequency of that kind of change. In the future, our team will explore a number of opportunities for improving HMR, including: + + To reduce boilerplate and improve the ergonomics of standalone components we are now designing a solution that will make selectors optional. To use a component or directive you'll be able to import it and directly use it in a component's template. -- Fast track CSS-only changes and apply them to any existing components on the page. -- Fast track Angular template-only changes and apply them to any existing components on the page. + We're still in early stages of planning selectorless. We'll share a request for comments when we have an early design and we're ready for next steps. Over the past few releases we've been working on making Angular's server-side rendering story more robust. On our priority list is to explore streamed server-side rendering for zoneless application. @@ -118,19 +127,36 @@ This section represents explorations and prototyping of potential future project Based on our developer surveys' results we saw there are opportunities for improving the ergonomics of the component authoring format. The first step of the process will be to gather requirements and understand the problem space in advanced to an RFC. We'll share updates as we make progress. High priority in the future work will be backward compatibility and interoperability. - - As part of this project, we'd like to implement mixed orientation support for the Angular CDK drag and drop. This is one of the repository's most highly requested features. + + Based on feedback over the years and the recent updates in Angular's runtime, we'll evaluate TestBed to identify opportunities to improve developer experience and reduce boilerplate when developing unit tests. - - We're excited about the set of features that Nitro offers such as portability, minimal design, and file-based routing. Later this year we'll evaluate how it fits in the Angular server-side rendering model. + + Angular has been lacking the tools and the flexibility to add interactivity to a multi-page app or embed an Angular component inside of an existing app built with a different framework. - We'll share updates as we make progress in this investigation. + As part of this project, we'll explore the requirement space of cross framework interop and our build tooling offering to make this use case possible. ## Completed projects + + As part of this project, we implemented mixed orientation support for the Angular CDK drag and drop. This is one of the repository's most highly requested features. + + + In v18 we introduced an event replay functionality when using server-side rendering or prerendering. For this feature we depend on the event dispatch primitive (previously known as jsaction) that is running on Google.com. + + In Angular v19 we graduated event replay to stable and enabled it by default for all new projects. + + + To make it easier for developers to use modern Angular APIs, we enabled integration between the Angular language service and schematics which allows you to refactor your app with a single click. + + + As part of this initiative, the language service automatically imports components and pipes in standalone and NgModule-based apps. Additionally, we've added a template diagnostic to highlight unused imports in standalone components, which should help make application bundles smaller. + + + We've released the support for local template variables in Angular, see [`@let` docs](https://angular.dev/api/core/@let) for additional information. + To provide better customization of our Angular Material components and enable Material 3 capabilities, we'll be collaborating with Google's Material Design team on defining token-based theming APIs.