Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more
The 7.0.0 release of Angular is here! This is a major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. This release contains new features for our tool chain, and has enabled several major partner launches.
How to update to v7
Visit update.angular.io for detailed information and guidance on updating your application, but thanks to the work we did in v6, updating to v7 should be one command for most developers:
ng update @angular/cli @angular/coreEarly adopters of v7 have reported that this update is faster than ever, and many apps take less than 10 minutes to update.
CLI Prompts
The CLI will now prompt users when running common commands like ng new or ng add @angular/material to help you discover built-in features like routing or SCSS support.
CLI Prompts have been added to Schematics, so any package publishing Schematics can take advantage of them by adding an x-prompt key to a Schematics collection.
Application Performance
Continuing our focus on performance, we analyzed common mistakes across the ecosystem. We discovered that many developers were including the reflect-metadata polyfill in production, which is only needed in development.
To fix this, part of the update to v7 will automatically remove this from your polyfills.ts file, and then include it as a build step when building your application in JIT mode, removing this polyfill from production builds by default.
With v7, we are also defaulting new projects to take advantage of Bundle Budgets in our CLI. New applications will warn when the initial bundle is more than 2MB and will error at 5MB. These budgets are easy to change in your angular.json.
These budgets align with warnings that can be shown to users taking advantage of Chrome’s Data Saver features.
Angular Material & the CDK
Material Design received a big update in 2018. Angular Material users updating to v7 should expect minor visual differences reflecting the updates to the Material Design specification.
Newly added to the CDK, you can now take advantage of Virtual Scrolling and Drag and Drop by importing the DragDropModule or the ScrollingModule.
Virtual Scrolling
Virtual Scrolling loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists.
Read more about Virtual Scrolling
Drag and Drop
Drag and drop support is now in the CDK and includes automatic rendering as the user moves items and helper methods for reordering lists (moveItemInArray) and transferring items between lists (transferArrayItem).
Improved Accessibility of Selects
Improve the accessibility of your application by using a native select element inside of a mat-form-field. The native select has some performance, accessibility, and usability advantages, but we’re keeping mat-select which gives full control of the presentation of options.
Learn more about mat-select and mat-form-field
Angular Elements
Angular Elements now supports content projection using web standards for custom elements.
<my-custom-element>This content can be projected!</my-custom-element>Partner Launches
Angular owes a huge amount of its success to the community, and to that end we’ve been working to partner with several community projects that have launched recently.
- Angular Console — A downloadable console for starting and running Angular projects on your local machine
- @angular/fire — AngularFire has a new home on npm, and has its first stable release for Angular
- NativeScript — It’s now possible to have a single project that builds for both web and installed mobile with NativeScript
- StackBlitz — StackBlitz 2.0 has been released and now includes the Angular Language Service, and more features like tabbed editing
Documentation Updates
We’re always working hard to improve our guides and reference materials. The documentation on angular.io now includes reference material for the Angular CLI.
Dependency Updates
We’ve updated our dependencies on major 3rd party projects.
- TypeScript 3.1
- RxJS 6.3
- Node 10 — We’ve added support for Node 10, and we still support 8
What about Ivy?
We’ve been continuing work on a new initiative called Ivy — our next generation rendering pipeline. Ivy is currently under active development and is not part of the v7 release. We are beginning to validate the backwards compatibility with existing applications and will announce an opt-in preview of Ivy as soon as it is ready in the coming months.
Keep an eye on this blog, on Twitter, and on YouTube for the latest information.
