What Is New in Angular 7.0
Angular 7.0 focuses on performance improvements, developer experience, and toolchain alignment. This release is a coordinated major update across the entire platform, including the core framework, Angular CLI, and Angular Material.
| Category | Key Updates |
|---|---|
| Performance & Size | Smaller application bundles, faster execution with new CLI settings and virtual scrolling. |
| CLI & Tooling | New prompts, improved workflows, and better developer guidance. |
| Component Library | Angular Material and CDK include new components and features. |
| Dependency Updates | TypeScript 3.1, RxJS 6.3, and Node 10 support. |
| Documentation | Revamped guides with improved content and examples. |
How did Angular 7 improve application performance?
The framework introduced several optimizations to make apps smaller and faster. The most significant change was the update to the Angular CLI to use BundleBudget warnings by default, which alerts developers when their app's bundle size exceeds predefined thresholds.
For data-heavy lists, the Component Dev Kit (CDK) added a new ScrollingModule featuring virtual scrolling. This dramatically improves performance by only rendering the items currently in view.
Virtual Scrolling Example
<cdk-virtual-scroll-viewport itemSize="50">
<div *cdkVirtualFor="let item of items">
{{item.name}}
</div>
</cdk-virtual-scroll-viewport>What CLI enhancements were introduced?
The CLI gained interactive prompts that guide developers through common operations. When you run commands like ng add or ng new, the CLI now asks questions to help configure the project correctly instead of failing or requiring you to remember all the correct flags.
Another key update was the addition of project files for ng update, allowing library authors to provide update schematics. This makes it easier for users to keep their projects and dependencies in sync with the latest versions.
What new components and features were added to Angular Material?
The Material library received a visual refresh and several new components. The most notable additions were the <mat-tree> for displaying hierarchical data and the <mat-badge> for showing small status indicators or counts.
The CDK's virtual scrolling module, while a performance feature, is also a major addition for UI development. The drag-and-drop module was also updated with improved accessibility support.
Badge Usage
<button mat-icon-button>
<mat-icon>notifications</mat-icon>
<mat-badge overlap="circle" value="8"></mat-badge>
</button>Were there any updates to Angular's core?
Yes, the core framework saw important under-the-hood changes. The compiler was made more strict, catching certain classes of template errors earlier in the development process. This helps prevent bugs from making it to production.
Support for TypeScript 3.1 was a major dependency update that came with improved type checking. Additionally, the framework added support for Node 10, keeping pace with the active LTS schedule.
FAQ
Do I have to use the new Bundle Budgets in the CLI?
No, they are enabled by default but are just warnings. You can adjust the thresholds in your angular.json file under the "budgets" key to match your project's requirements.
Is virtual scrolling part of Angular Material or the core?
It's part of the Component Dev Kit (CDK), which means you can use the virtual scrolling functionality even if you aren't using Angular Material's visual design system.
What happens if I run `ng update` without the interactive prompts?
The prompts are there to help. If you already provide all the necessary flags and options on the command line, the process will run non-interactively just as it did before.
Why did my application bundle size warning appear after updating?
Angular 7.0 set more aggressive default budget thresholds to encourage smaller bundles. You're likely hitting these new defaults, which you can review and modify in your configuration.
Are there any breaking changes in Angular 7.0?
Yes, but they are minimal compared to previous major versions. The most common ones involve type strictness in the compiler and updates to Angular Material's CSS. Running ng update will automatically handle many of these for you.