Angular 复兴：利用 WebStorm 探索新功能

Angular 17 已经推出，标志着框架的又一次重大飞跃。此版本引入了一系列新功能和增强功能，有望简化开发体验。如需详尽的更新列表，请参阅 Angular 博客的全面概述。本文重点关注正在重塑 Angular 应用开发方式的语法和 API 变化：独立组件、信号和新的控制流。

WebStorm 团队付出了巨大努力，在已经发布的 WebStorm 2023.3 中为 Angular 17 提供了关键支持。此版本还附带一系列有助于改进现代 Angular API 体验的实用检查和快速修复，本文也将涉及。

独立组件

独立组件背后的主要思想是其自我包含性质，因此它们不应该在某些 NgModule 中声明。独立方式减少了样板代码并使组件更可重用。从 Angular v17 开始，此方式为默认推荐。

根据此建议，WebStorm 2023.3 中的新 Angular 项目向导包含一个使用独立方式引导应用程序的默认选项：

Angular17 项目向导

在这种情况下，生成的应用程序将不包含任何 NgModule，ng generate 命令默认将生成独立组件，在组件的元数据中有效设置 standalone: true：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-button',
  standalone: true, // <---- that's how standalone components are declared
  imports: [CommonModule],
  templateUrl: './button.component.html',
  styleUrl: './button.component.css'
})
export class ButtonComponent {
}

独立组件的 imports 属性用于列出其依赖项。通常建议避免导入整个模块，因为这会抵消摇树 (tree-shaking) 的好处。相反，最好精细导入当前组件中使用的组件、指令和管道。WebStorm 凭借其自动导入机制提供帮助：