What’s New in Angular 17

November 09 2023

What's New in Angular 17

Last month marked the 13th anniversary of Angular’s red shield. AngularJS was the starting point for the new go-to powerhouse for creating rich web experiences, Angular 17! Here at MESCIUS, we have put together some of the most forward-thinking and impactful features developers need to know. Here are some of our top picks:

Standalone APIs
Interactive learning
Build Pipeline
Flow Control
New @for Syntax
Deferrable Views
Hydration
Debug Tools
What’s Next
Angular & MESCIUS

Standalone APIs from the Start

After a year and a half of refinement, standalone components, directives, and pipes are now available in all new applications. This, with updated documentation, provides you with more flexibility and consistent development practices.

Interactive Learning Journey

The interactive learning journey hosted on the Angular.dev platform accompanies the new brand. With a new structure, improved content, and an immersive learning experience powered by WebContainers, developers can now learn Angular and the Angular CLI at their own pace directly in the browser.

Vite and esbuild: Graduating from Developer Preview

The Angular CLI's build pipeline sees fundamental changes with the graduation of the esbuild plus Vite-powered build experience. Enabled by default for all new applications, this enhancement promises faster build times and improved overall performance.

Official esbuild Documentation

Built-in Control Flow for Enhanced Developer Experience

Angular 17 introduces a built-in control flow, a game-changer for the developer experience. With a new block template syntax, developers can now enjoy a more intuitive syntax closer to JavaScript, better type checking, and significant performance improvements.

Official Built-in control flow Documentation

Built-in For Loop: Up to 90% Faster Runtime

Say goodbye to performance bottlenecks with the built-in for loop. Angular 17's new syntax, @for, simplifies the developer experience and boasts up to a 90% faster runtime, as demonstrated in community benchmarks.

Official @for Documentation

Deferrable Views: Declarative and Powerful Deferred Loading

Deferrable views in Angular 17 usher in a new era of lazy loading. With a single line of declarative code, developers can achieve powerful deferred loading, enhancing performance and developer experience.

Official Deferrable Views Documentation

Revamped Hybrid Rendering Experience

Angular 17 brings server-side rendering (SSR) and static-site generation (SSG) closer to developers with a prompt in ng new. Hydration, now out of developer preview, ensures a smoother rendering experience.

Official Hydration Documentation

Dependency Injection Debugging in DevTools

Angular DevTools now offers enhanced debugging capabilities for dependency injection, allowing developers to inspect the injector tree, resolve paths, and preview providers directly within the development environment.

Official Debug Documentation

Next Steps in Reactivity, Testing, and Material Design

Angular 17 lays the groundwork for the future with signals-based reactive systems, ongoing experimentation with testing tools like Jest and Web Test Runner, and a sneak peek at Material 3 support with design tokens.

Angular 17 and MESCIUS JavaScript Products: A Perfect Match

In conjunction with Angular 17, remember the powerful MESCIUS JavaScript products suite. Products like Wijmo, SpreadJS, ActiveReportsJS, and DataViewsJS seamlessly integrate with Angular, providing developers with the tools and features to enhance their web applications.

As you explore the exciting features of Angular 17, consider the benefits of incorporating the MESCIUS JavaScript products into your projects. From rich data visualization to interactive reporting, MESCIUS products complement Angular's capabilities, elevating your development experience.

Please explore our blogs for more updates, tutorials, and guides on Angular and MESCIUS products!

Check out the Official Angular documentation!