最受欢迎的开源前端框架 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 的帮助下使 变得有效：HasColor和CdkMenu。
由于此增强功能，MatMenu可以重新利用这两个指令的所有属性。MatMenu 可以继承与 HasColor 指令关联的输入、输出和逻辑，并且只能继承来自CdkMenu.
对于多重继承概念，它可能会给你一种似曾相识的感觉。Angular 与其他编程语言的不同之处在于名称冲突的解决，它只适用于用户界面原语。
4.稳定的“NgOptimizedImage”图像指令
该NgOptimizedImage指令是在以前的版本中引入的，以便轻松采用加载图像性能的最佳实践。最后，经过开发者长时间的观察，这个指令已经达到了稳定的形式。Land's End
对一个应用程序使用此功能进行的最新实验观察到 LCP（最大内容绘画）图像加载提高了 75%。
以前，这NgOptimizedImage也提供了许多特性和功能，但是 Angular v15 更新在图像指令中添加了更多新的令人兴奋的特性，如下所示：
- 自动
srcset生成：它自动生成 srcset，确保在请求时上传适当大小的图像——从而减少图像下载时间。
- 填充模式 [实验]：它消除了声明图像尺寸并将图像填充到其父容器的需要。当您不知道图像尺寸或者您需要迁移 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
理解这些错误片段的困难在于：
- 错误消息输入来自第三方依赖项（Angular 框架、zone.js 和 RxJS）
- 没有关于哪个用户交互遇到此错误的信息。
经过与 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 交互。
在这里，行为交互包括键盘交互、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 并等待新的令人兴奋的更新来认识它。