Hey there,
Version 14.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉
TL;DR 🙌
✅ Simplifying Angular with Standalone Components
✅ Typed Angular Forms
✅ Streamlined best practices
✅ Extended developer diagnostics
✅ Built-in improvements
✅ Angular material component updates
✅ Angular CLI enhancements
✅ Docs Updated | Docs updating | Docs will be updated
How to update to version 14
Visit update.angular.io for detailed information and guidance. To have the best update experience,
Update to 14
ng update @angular/cli @angular/core
In order to update your global angular,
npm i -g @angular/cli
What’s in this release?
✅ Simplifying Angular with Standalone Components 👌
- Angular standalone components aim to streamline the authoring of Angular applications by reducing the need for NgModules.
- 👉 In v14, standalone components are in developer preview.
- 👉 They are not stable API yet and will be potentially changed. But available to exploration and development.
- As per the official announcement an example of usage can be found over here. 👈
- 👉 In component decorator you are able to make directives and pipes standalone by standalone: true flag which allows you to add imports directly in your @Component() without an @NgModule()
- Explore stackblitz demo 👈 for more
- We can create standalone component using CLI as follows
ng generate component <name> --standalone
✅Typed Angular Forms
- 👉 This feature was under the radar for a while now. The issue can be found here
- 👉 Typed forms ensure that the values inside of form controls, groups, and arrays are type safe across the entire API surface.
- 👉 This enables safer forms, especially for deeply nested complex cases.
- Official gist is available here
- Motivation behind typed angular forms can be found 👉 here
✅ Streamlined best practices
- ✅ 👉 Streamlined page title accessibility
- It is a best practice to ensure that your app’s page titles uniquely communicate the page’s contents.
- v13.2 streamlines this with the new Route.title property in the Angular Router.
- Adding a title now requires no additional imports and is strongly typed
- gist can be found here
- In these examples,
- 👉 navigating to ‘/about’ will set the document title to ‘My App — About Me’
- 👉 while navigating to ‘/home’ will set the document title to ‘My App — Home’.
✅ Extended developer diagnostics
- New extended diagnostics provide an extendable framework that gives you more insight into your templates and how you might be able to improve them.
- Diagnostics give compile-time warnings with precise, actionable suggestions for your templates, catching bugs before run-time.
👉 Catch the invalid “Banana in a box” error on your two-way data bindings 👉 here
👉 Catch nullish coalescing on non-nullable values 👉 here
👉 Tree-shakeable error messages
✅ More built-in improvements
- Bind to protected component members - you can now bind to protected component members directly from your templates,
- Optional injectors in Embedded Views
- NgModel OnPush - NgModel changes are reflected in the UI for OnPush components.
✅ Angular CLI enhancements
- Now every flag uses --lower-skewer-case format
- Removed deprecated camel case arguments support and added support for combined aliases usage
- 👉 ng completion
- v14 introduces real-time type-ahead autocompletion for command such as ng serve!
- 👉 ng analytics
- The CLI’s analytics command allows you to control analytics settings and print analytics information
- 👉 ng cache
- ng cache provides a way to control and print cache information from the command line.
✅ Angular DevTools is available offline and in Firefox
- The Angular DevTools debugging extension now supports offline use
- For Firefox users, find the extension in the Add-ons for Mozilla.
✅ Experimental ESM Application Build
- Finally, v14 introduces an experimental esbuild-based build system for ng build, which compiles pure ESM output.
For more let us hear it from the creators
Credits : Official Announcement 😄
Changelog : Repository
Top comments (0)