Angular 15 现已上线:所有新功能、代码实践更改和弃用信息!

时间:2022-11-28 07:17:31

最受欢迎的开源前端框架 Angular 终于推出了另一个版本更新——Angular 15。之前,Angular 14引入了许多新的令人兴奋的实验性功能和排列的代码最佳实践,但看起来这个新版本——在 Angular 版本 15 中,一切都是为了获得稳定性。

最后,一个新的稳定更新,我们所有的技术爱好者和 Angular 社区都在等待。这个新的更新带来了巨大的激动人心的变化。那么,让我们深入了解 Angular 15 的新世界。

Angular 15 引入了哪些新特性?

参考之前的其他更新和 Angular 遗留编译器的删除,Angular 15 更新带来了许多新的改进——稳定性和扩展的支持能力,这无疑有望提升开发人员的体验和性能。

1.稳定的独立组件API

Angular 14 中引入了独立组件 API,用于构建 Angular 应用程序而无需定义. 在 Angular 15 中,独立组件 API 经过全面的性能观察和修正后终于达到了稳定的程度。 NgModules

Angular 开发者社区已经确保有了这种新近实现的稳定性,独立组件可以与HttpClient、Angular Elements 和许多其他组件同步工作。

使用这个独立的 API 在单个组件中引导应用程序。这是如何完成的:

import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';

@Component({
 standalone: true,
 selector: 'photo-gallery',
 imports: [ImageGridComponent],
 template: `
   … <image-grid [images]="imageList"></image-grid>
 `,
})
export class PhotoGalleryComponent {
 // component logic
}

bootstrapApplication(PhotoGalleryComponent);

使用该imports函数,您甚至可以引用独立的指令和管道。

您现在可以将组件、指令和管道标记为“ standalone: true”——现在,无需将它们声明到 NgModule 中,否则 Angular 编译器将抛出错误。此外,您现在可以通过编写import: [module_name].

2. 开发多路由应用的使能

Angular 15 带有一个路由器独立 API 来构建多路由应用程序。以下是声明根路由的方法:

export const appRoutes: Routes = [{
 path: 'lazy',
 loadChildren: () => import('./lazy/lazy.routes')
   .then(routes => routes.lazyRoutes)
}];

在这里,lazyRoutes 通过以下方式声明:

import {Routes} from '@angular/router';

import {LazyComponent} from './lazy.component';

export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];

您可以appRoutes在方法中注册并使用可摇树优化的 APIbootstrapApplication调用它!ProvideRouter

bootstrapApplication(AppComponent, {
 providers: [
   provideRouter(appRoutes)
 ]
});

此外,Angular Bundlers 现在可以在构建时删除未使用的功能,这可以使代码文件大小减少 11%。

3. Directive Composition API介绍

当他们最喜欢的框架提供一流的指令可重用性时,所有开发人员都会喜欢。在 GitHub 社区中,许多Angular 开发人员都在请求这个 API,最终,团队听到了并使之成为可能。

因此,Angular v15 最终注入了来自GitHub 上的功能请求的灵感。它引入了 Directive Composition API,提升了代码的可用性并将其提升到另一个层次。它允许开发人员使用指令提升宿主元素,并在最终代码重用策略的帮助下充分利用 Angular。此外,所有这些都可以在 Angular 编译器的帮助下实现。

注意:您只能将 Directive Composition API 与独立指令一起使用。

@Component({
 selector: 'mat-menu',
 hostDirectives: [HasColor, {
   directive: CdkMenu,
   inputs: ['cdkMenuDisabled: disabled'],
   outputs: ['cdkMenuClosed: closed']
 }]
})
class MatMenu {}

正如您在上面看到的,在MatMenu两个 hostDirectives 的帮助下使 变得有效:HasColorCdkMenu

由于此增强功能,MatMenu可以重新利用这两个指令的所有属性。MatMenu 可以继承与 HasColor 指令关联的输入、输出和逻辑,并且只能继承来自CdkMenu.

对于多重继承概念,它可能会给你一种似曾相识的感觉。Angular 与其他编程语言的不同之处在于名称冲突的解决,它只适用于用户界面原语。

4.稳定的“NgOptimizedImage”图像指令

NgOptimizedImage指令是在以前的版本中引入的,以便轻松采用加载图像性能的最佳实践。最后,经过开发者长时间的观察,这个指令已经达到了稳定的形式。Land's End
对一个应用程序使用此功能进行的最新实验观察到 LCP(最大内容绘画)图像加载提高了 75%。

Angular 15 现已上线:所有新功能、代码实践更改和弃用信息!

以前,这NgOptimizedImage也提供了许多特性和功能,但是 Angular v15 更新在图像指令中添加了更多新的令人兴奋的特性,如下所示:

  1. 自动srcset生成:它自动生成 srcset,确保在请求时上传适当大小的图像——从而减少图像下载时间。
  1. 填充模式 [实验]:它消除了声明图像尺寸并将图像填充到其父容器的需要。当您不知道图像尺寸或者您需要迁移 CSS 背景图像以使用图像指令时,此模式非常有效。

但问题是,“如何使用这个独立的 NgOptimizedImage 指令?”

它可以直接用于您的 Angular 组件或NgModule.

import { NgOptimizedImage } from '@angular/common';

// Include it into the necessary NgModule
@NgModule({
 imports: [NgOptimizedImage],
})
class AppModule {}

// ... or a standalone Component
@Component({
 standalone: true
 imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

在组件中使用此 Angular 图像指令时,您需要做的就是将图像src属性替换为ngSrc,同时确保指定优先级属性以优化 LCP 图像的速度。

5. 现在你可以减少 Guards 中的样板代码

让我们通过一个定义守卫、验证细节的例子更好地理解这个概念——无论用户是否登录:

@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
 constructor(private loginService: LoginService) {}

 canActivate() {
   return this.loginService.isLoggedIn();
 }
}

const route = {
 path: 'somePath',
 canActivate: [MyGuardWithDependency]
};

这里,在这个程序中,LoginService包含了主要逻辑,其中守卫——只调用了一个触发器,它是  isLoggedIn (). 尽管有如此清晰的结构,但这段代码有很多样板,必须减少。

多亏了 Functional Router Guards,这段代码可以用必要的样板重构为下面给出的代码。

const route = {
 path: 'admin',
 canActivate: [() => inject(LoginService).isLoggedIn()]
};

Functional Guards 最好的一点是它们是可堆肥的。在它的帮助下,您可以构建类似因子的函数,接受给定的配置并返回解决问题的守卫或函数。

6. 更清晰、更好的堆栈跟踪

随着 Angular v15 的更新,调试 Angular 应用程序已经得到简化,并通过堆栈跟踪变得更加清晰和直接。Angular 开发人员团队确保实现一个标准来跟踪更多的开发代码,而不是显示它调用的库。这一成就使得错误消息可以使用一些改进。

在使用以前的 Angular 版本之前,当发现代码时,开发人员通常会收到一行错误消息,导致他们需要一个漫长的过程来解决该错误。

以下是先前错误指示的片段:

ERROR Error: Uncaught (in promise): Error
Error
   at app.component.ts:18:11
   at Generator.next (<anonymous>)
   at asyncGeneratorStep (asyncToGenerator.js:3:1)
   at _next (asyncToGenerator.js:25:1)
   at _ZoneDelegate.invoke (zone.js:372:26)
   at Object.onInvoke (core.mjs:26378:33)
   at _ZoneDelegate.invoke (zone.js:371:52)
   at Zone.run (zone.js:134:43)
   at zone.js:1275:36
   at _ZoneDelegate.invokeTask (zone.js:406:31)
   at resolvePromise (zone.js:1211:31)
   at zone.js:1118:17
   at zone.js:1134:33

理解这些错误片段的困难在于:

  1. 错误消息输入来自第三方依赖项(Angular 框架、zone.js 和 RxJS)
  2. 没有关于哪个用户交互遇到此错误的信息。

经过与 Angular 和 Chrome DevTool 团队的长期合作,社区能够集成这些第三方依赖项(在 node_modules、zone.js 等的帮助下);因此,可以实现链接堆栈跟踪。

堆栈跟踪的改进如下所述:

ERROR Error: Uncaught (in promise): Error
Error
   at app.component.ts:18:11
   at fetch (async) 
   at (anonymous) (app.component.ts:4)
   at request (app.component.ts:4)
   at (anonymous) (app.component.ts:17)
   at submit (app.component.ts:15)
   at AppComponent_click_3_listener (app.component.html:4)

现在,这些错误消息提供了从哪里遇到错误的信息,因此开发人员可以直接转到该代码部分并立即修复它。

7. 稳定的基于 MDC 的组件

由于考虑到 Angular 材料的稳定性,Angular 开发团队努力基于 Web 应用程序的 Angular Material Design Components 重构其组件。此外,这些组件得到了增强,以提供更好的可访问性和对 Angular Material Design 规范的遵守。

在这里,大部分重构工作已经在 DOM 和 CSS 部分完成。随着新的响应式更新,旧的 Angular 应用程序中的一些样式需要调整,特别是在 CSS 覆盖迁移组件的内部元素的情况下。

在最新的 Angular v15 中,许多组件的旧实现已被弃用。因此,要恢复它们,开发人员仍然可以选择“遗留”导入。

例如,您可以mat-button通过导入其遗留按钮模块来检索旧实现。

import {MatLegacyButtonModule} from '@angular/material/legacy-button';

8.CDK 列表框

CDK 代表组件开发工具包,它提供不同的行为原语,帮助构建 UI 组件。在 Angular v15 中,它获得了一个名为 CDK Listbox 的新原语,使开发人员能够根据需要自定义由 WAI-ARIA Listbox 模式绘制的 Listbox 交互。

Angular 15 现已上线:所有新功能、代码实践更改和弃用信息!

在这里,行为交互包括键盘交互、bidi 布局支持和焦点管理。无论您使用其中的哪一个,每个指令都带有关联的 ARIA 角色和各自的宿主元素。

9. 扩展的 esbuild 支持

在 Angular 14 更新中,启用了实验性支持 esbuild——一个更快的 javascript 捆绑器,可以通过简化管道来快速完成构建。

Angular 15 为ng build --watchSass、SVG 模板和文件替换提供了新的实验性支持。升级 angular.json构建器的命令是:

"builder": "@angular-devkit/build-angular:browser-esbuild"

10. Angular 15 功能的其他增强

下面列出了 Angular 15 中的新增强功能和启用功能,它们可能看起来很小但影响很大。

  • Router Now Auto-Unwarps Default Exports for Lazy Loading:它通过添加更多支持来减少更多样板文件,从而简化了路由器功能。在这里,对于延迟加载,路由器将查找默认导出,如果成功,它会直接将其延迟文件导入到代码中。
  • 自动导入语言支持服务——快速修复:现在,通过充分利用语言服务,更自信地编写 Angular 代码。您可以使用此功能自动导入模板中的组件及其修复,这些组件未在独立组件或 NgModule 中使用。
  • 改进的 Angular 组件:Angular 组件的 v15 涵盖了一系列可访问性增强功能,包括有效对比度、扩展的触摸目标大小和改进的 ARIA 语义。此外,Angular 组件可以使用它们的 API 来定制它们的密度,以获得更好的主题定制体验。

这都是关于 Angular v15 中启用的新修正和成就,但问题是,“你将如何解锁这些 Angular 15 功能?”

如何升级到 Angular 15?

在升级到 Angular v15 之前,您必须了解支持扩展、取消和弃用——重大更改,以审查和重构您现有的 Angular 构建。

  • Angular v15 扩展了对 node.js 14.20.x、16.13.x 和 18.10.x 版本的支持,并终止了对 14.[15-19].x 和 16[10-12].x 等版本的支持。
  • Angular 15 现在仅支持 TypeScript 4.8 或更早版本。
  • 在应用程序项目目录中,运行命令:ng update @angular/core@15 @angular/cli@15使您的应用程序得到 Angular v15 支持的强化。
  • @keyframes 名称格式已更改为“ ”@keyframes host-my-cmp_foo { ... }
    • 为了符合这一重大变化:
      • 将组件的封装视图更改为 None 或 ShadowDom。
      • 在全局样式表中定义此规则
      • 在您自己的代码中定义此规则。
  • 向类添加显式构造函数可能会触发错误。
  • 在 tsconfig.json 文件中,enableIvy调用已被删除,因为在此更新中,Ivy 只是一个渲染引擎。
  • canParse方法已被删除,因此现在必须在解析方法中使用analyze和参数。hint
  • RouterOutlet只会在变更检测完成后实例化组件。
  • DATE_PIPE_DEFAULT_TIMEZONE功能已被删除,所以从现在开始,您需要使用它的替代品DATE_PIPE_DEFAULT_OPTIONS来定义时区。
  • routerLinkWithHref指令已被删除,因此从现在开始,您需要使用该RouterLink指令来处理具有href属性的元素。

好吧,还有其他方法和指令已被删除并使用新的简化语法结构进行了更新。因此,最好使用Angular v14 到 v15 的迁移指南,以确保更顺利的应用程序迁移。

使用以下命令将 Angular 14 更新到 Angular 15:

ng update @angular/cli @angular/core

在 CLI 中编写下面提到的命令来更新你的全局 Angular:

npm i -g @angular/cli

结束语

在 2020 年推出 Ivy 的决定是最好的决定,因为它带来了很多改进——NgModules 就是其中之一。这种改进有助于简化学习曲线。

Angular 团队正致力于对服务器端渲染管道进行更多改进,下一步是提高代码可重用性,以提高 Angular 的效率。

所以,让我们升级到 Angular v15 并等待新的令人兴奋的更新来认识它