Angular 10的新功能

最新推荐文章于 2021-10-29 09:45:24 发布

weixin_26735933

最新推荐文章于 2021-10-29 09:45:24 发布

阅读量2.3k

点赞数

文章标签： python

原文链接：https://medium.com/volosoft/what-is-new-in-angular-10-ee4ba39a187e

版权

The new version, v10, of Angular has been published only hours ago and announced by this blog post. Although it may not appear as impactful as v9 (with Ivy and all), this release displays Angular team’s commitment to keep Angular up-to-date and relevant.

Angular的新版本v10仅在几小时前发布，并已在此博客文章中宣布。尽管它看起来不像v9(对Ivy和all一样)具有影响力，但此版本显示了Angular团队致力于使Angular保持最新和相关性的承诺。

We found this very exciting and the timing was just right, because we are about to release ABP v3.0! So, we jumped into the details of what changed and how to migrate. Here is what we found.

我们发现这非常令人兴奋，并且时机恰到好处，因为我们即将发布ABP v3.0！因此，我们进入了有关更改内容以及如何迁移的详细信息。这是我们发现的。

主要变化 (Major Changes)

TypeScript v3.9支持[重大更改] (TypeScript v3.9 Support [breaking change])

Angular 9 was released with TypeScript 3.7 support. Soon TypeScript 3.8 was released and Angular v9.1 supported it. Not long after, another TypeScript version, 3.9, is released and Angular responds with v10, keeping up, not only with TypeScript, but also with TSLib and TSLint.

Angular 9是在TypeScript 3.7支持下发布的。不久，TypeScript 3.8发行了，Angular v9.1支持了它。不久之后，另一个TypeScript版本3.9被发布，Angular响应v10，不仅跟上TypeScript，还跟着TSLib和TSLint。

That is great news. Angular stays up-to-date. First of all, TypeScript 3.9 has performance improvements, which means faster Angular builds, especially in larger projects. Second, all latest TypeScript fixes and features are available to Angular developers. Last, but not the least, Angular developers will be using a more elaborate TypeScript configuration.

那是个好消息。 Angular保持最新状态。首先，TypeScript 3.9改进了性能，这意味着更快的Angular构建，尤其是在大型项目中。其次，Angular开发人员可以使用所有最新的TypeScript修复程序和功能。最后但并非最不重要的一点是，Angular开发人员将使用更复杂的TypeScript配置。

Earlier versions of TypeScript are no longer supported, so you have to install v3.9 in your project. I believe a major reason behind this is the next feature I will describe.

不再支持早期版本的TypeScript，因此您必须在项目中安装v3.9。我相信背后的主要原因是我将要描述的下一个功能。

“解决方案样式” `tsconfig.json`文件 (“Solution Style” `tsconfig.json` Files)

“Solution Style” tsconfig.json file support was introduced by TypeScript v3.9 to overcome issues with cases where a tsconfig.json existed just to reference other tsconfig.json files, known as a "solution". Angular 10 makes use of that concept and improves IDE support and, consequently, developer experience.

TypeScript v3.9引入了 “解决方案样式” tsconfig.json文件支持，以tsconfig.json存在tsconfig.json仅用于引用其他tsconfig.json文件(称为“解决方案”)的情况的问题。 Angular 10利用了这一概念并改善了对IDE的支持 ，从而改善了开发人员的体验。

A new file called tsconfig.base.json is introduced and what was inside the root tsconfig.json before is carried to this new file. You can find further details about the "solution" configuration here, but basically the new tsconfig.json at root level, before and after adding a library to the project, looks like below.

引入了一个名为tsconfig.base.json的新文件，之前在根tsconfig.json被带到了该新文件中。您可以在此处找到有关“解决方案”配置的更多详细信息，但基本上是在将库添加到项目之前和之后的根级别的新tsconfig.json ，如下所示。

BEFORE:

之前：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./e2e/tsconfig.json"
    }
  ]
}

AFTER:

后：

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./e2e/tsconfig.json"
    },
    {
      "path": "./projects/core/tsconfig.lib.json"
    },
    {
      "path": "./projects/core/tsconfig.spec.json"
    }
  ]
}

If you upgrade to Angular 10 using ng update , the CLI will migrate your workspace to this structure. Earlier versions of TypeScript does not support "solution style", so this may be the reason behind the breaking change described above.

如果使用ng update升级到Angular 10，CLI会将您的工作空间迁移到此结构。 TypeScript的早期版本不支持“解决方案样式”，因此这可能是上述重大更改背后的原因。

Angular软件包格式更改和esm5 / fesm5 (Angular Package Format Changes & esm5/fesm5)

Angular package format has changed, and the new format does not include esm5 and fesm5 distributions anymore. Angular packages (@angular/*) will not include them. Since Angular generates ES5 from ES2015 and ES2015 is the default language level consumed by Angular tooling, those code distributions had become obsolete. The format change is as follows:

Angular软件包格式已更改，新格式不再包含esm5和fesm5发行版。 Angular软件包(@ angular / *)将不包含它们。由于Angular从ES2015生成ES5，并且ES2015是Angular工具使用的默认语言级别，因此这些代码分发已过时。格式更改如下：

BEFORE:

之前：

{
  ...
  "main": "bundles/abp-ng.core.umd.js",
  "module": "fesm5/abp-ng.core.js",
  "es2015": "fesm2015/abp-ng.core.js",
  "esm5": "esm5/abp-ng.core.js",
  "esm2015": "esm2015/abp-ng.core.js",
  "fesm5": "fesm5/abp-ng.core.js",
  "fesm2015": "fesm2015/abp-ng.core.js",
  ...
}{
  ...
  "main": "bundles/abp-ng.core.umd.js",
  "module": "fesm2015/abp-ng.core.js",
  "es2015": "fesm2015/abp-ng.core.js",
  "esm2015": "esm2015/abp-ng.core.js",
  "fesm2015": "fesm2015/abp-ng.core.js",
  ...
}

AFTER:

后：

{
  ...
  "main": "bundles/abp-ng.core.umd.js",
  "module": "fesm2015/abp-ng.core.js",
  "es2015": "fesm2015/abp-ng.core.js",
  "esm2015": "esm2015/abp-ng.core.js",
  "fesm2015": "fesm2015/abp-ng.core.js",
  ...
}

If your application depends on esm5/fesm5 files, you can relax, because they are still consumable by the build system. Likewise, you do not have to worry if your Angular library does not ship esm2015 or fesm2015, because the CLI will fallback to others. However, in favor of bundle optimization and build speed, it is recommended to deliver ES2015 outputs.

如果您的应用程序依赖于esm5 / fesm5文件，则可以放宽，因为构建系统仍然可以使用它们。同样，您不必担心Angular库是否不提供esm2015或fesm2015 ，因为CLI会回fesm2015其他人。但是，为了支持包优化和构建速度，建议交付ES2015输出。

浏览器清单 (Browserlist)

Angular generates bundles based on the Browserlist configuration provided in the root app folder. Angular 10 will look up for a .browserlistrc in your app, but fall back to browserlist if not found. The ng update command will rename the file for you.

Angular根据根应用文件夹中提供的Browserlist配置生成捆绑包。 Angular 10将在您的应用程序中查找.browserlistrc ，但如果未找到，则退回到browserlist 。 ng update命令将为您重命名该文件。

重大变化 (Breaking Changes)

Resolvers that return EMPTY will cancel navigation. In order to allow the router to continue navigating to the route, emit some value such as of(null).
返回EMPTY解析器将取消导航。为了允许路由器继续导航到路由，发出一些值，例如of(null) 。
Logging of unknown property bindings or element names in templates is increased to “error” level. It was “warning” before. The change may have an effect on tools not expecting an error log.
模板中未知属性绑定或元素名称的记录增加到“错误”级别。以前是“警告”。所做的更改可能会对不希望出现错误日志的工具产生影响。
Returning null from a UrlMatcher would throw Type 'null' is not assignable to type 'UrlMatchResult'. before. This is fixed, but the return type can now be null too.
从UrlMatcher返回null会抛出Type 'null' is not assignable to type 'UrlMatchResult'. 之前。这是固定的，但是返回类型现在也可以为null 。
Reactive forms had a bug which caused valueChanges for controls bound to input fields with number type to fire twice. The listened evet is changed from "change" to "input" to fix this.
响应式表单存在一个错误，该错误导致绑定到具有number类型的输入字段的控件的valueChanges触发两次。已修复的听音从“更改”更改为“输入”。
minLength and maxLength validators validate only if the value has a numeric length property.
minLength和maxLength验证器仅在该值具有数字length属性时才进行验证。
There was a bug in detection of day span while using formatDate() or DatePipe and b or B format code. It is fixed and the output, for instance, will now be "at night" instead of "AM".
使用formatDate()或DatePipe以及b或B格式代码时，检测日期跨度时出现错误。它是固定的，例如，输出现在将是“晚上”而不是“ AM”。
Transplanted views (declared in one component and inserted into another) had change detection issues, but that is fixed now. Detection after detaching and double detection are avoided.
移植的视图(在一个组件中声明并插入到另一个组件中) 具有更改检测问题，但现在已解决。避免了分离后的检测和双重检测。

弃用和移除 (Deprecations and Removals)

没有通用类型的ModuleWithProviders [已删除] (ModuleWithProviders Without a Generic Type [removed])

Earlier versions of Angular was able to compile static method returns with ModuleWithProviders type without the generic type, i.e. ModuleWithProviders<SomeModule>, because the generated metadata.json files would have the information required for compilation. After Ivy, since metadata.json is not required, Angular checks the generic type for type validation.

早期版本的Angular能够编译具有ModuleWithProviders类型的静态方法返回，而没有泛型类型，即ModuleWithProviders<SomeModule> ，因为生成的metadata.json文件将具有编译所需的信息。在Ivy之后，由于不需要metadata.json ，因此Angular会检查泛型类型以进行类型验证。

BEFORE:

之前：

@NgModule({...})
export class SomeModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SomeModule,
      providers: [...]
    };
  }
}

AFTER:

后：

@NgModule({...})
export class SomeModule {
  static forRoot(): ModuleWithProviders<SomeModule> {
    return {
      ngModule: SomeModule,
      providers: [...]
    };
  }
}

ModuleWithProviders without a generic type was deprecated before. As of Angular 10, it is completely removed.

不ModuleWithProviders不带泛型类型的ModuleWithProviders 。从Angular 10开始，它已被完全删除。

未修饰的基类[已删除] (Undecorated Base Classes [removed])

If you are taking advantage of inheritance from classes that use Angular features such as dependency injection or Angular decorators , you now need to decorate those base classes as well. Otherwise, Angular will throw an error about the missing decorator on the parent.

如果您要利用从使用Angular功能(例如依赖项注入或Angular装饰器)的类继承的优势，那么现在还需要装饰这些基类。否则，Angular将抛出有关父代上缺少装饰器的错误。

DEPENDENCY INJECTION:

依赖注射：

@Directive()
export abstract class AbstractSome {
  constructor(@Inject(LOCALE_ID) public locale: string) {}
}

@Component({
  selector: 'app-some',
  template: 'Locale: {{ locale }}',
})
export class SomeComponent extends AbstractSome {}

Here is the error Angular 10 compiler throws when the Directive decorator is missing:

这是缺少Directive装饰器时Angular 10编译器抛出的错误：

The component SomeComponent inherits its constructor from AbstractSome, but the latter does not have an Angular decorator of its own. Dependency injection will not be able to resolve the parameters of AbstractSome's constructor. Either add a @Directive decorator to AbstractSome, or add an explicit constructor to SomeComponent.

DECORATOR:

装饰器：

@Directive()
export abstract class AbstractSome {
  @Input() x: number;
}

@Component({
  selector: 'app-some',
  template: 'Value of X: {{ x }}',
})
export class SomeComponent extends AbstractSome {}

Angular 10 compiler throws a less detailed error this time:

Angular 10编译器这次抛出了一个不太详细的错误：

Class is using Angular features but is not decorated. Please add an explicit Angular decorator.

I am sure you would not do that, but if you put a Component decorator on the parent and remove the decorator on the child, as you would expect, Angular 10 compiler will throw the error below:

我确定您不会这样做，但是，如果您像预期的那样，将Component装饰器放在父对象上，然后将装饰器放在子对象上，Angular 10编译器将抛出以下错误：

The class 'SomeComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

WrappedValue [不建议使用] (WrappedValue [deprecated])

WrappedValue is deprecated and will probably be removed with v12. Check here and here if you have never heard of it before.

WrappedValue已弃用，可能会在v12中删除。如果您以前从未听说过，请在这里和这里检查。

It was useful to trigger change detection even when same object instance was produced/emitted. There is a performance cost when WrappedValue is used and the cases where it helps are relatively rare, so Angular team has decided to drop it.

即使产生/发出相同的对象实例，触发更改检测也很有用。使用WrappedValue会降低性能，并且很少有帮助的情况，因此Angular团队决定放弃它。

As a side effect of this deprecation, you may see more ExpressionChangedAfterItHasBeenChecked errors than before, because Angular would not throw an error when WrappedValues were evaluated as equal.

作为此弃用的副作用，您可能会看到比以前更多的ExpressionChangedAfterItHasBeenChecked错误，因为当WrappedValue相等时，Angular不会抛出错误。

Incase you face change detection issues, try cloning the object or trigger change detection manually via markForCheck or detectChanges methods of the ChangeDetectorRef.

柜面你面对变化检测问题，尝试通过手动克隆对象或触发变化检测markForCheck或detectChanges的方法ChangeDetectorRef 。

其他折旧和拆除 (Other Deprecations & Removals)

Support for IE9, IE10, and IE Mobile has been deprecated and will be dropped later. The increased bundle size and complexity was the main reason. Considering even Microsoft dropped support for these browsers, it makes a lot of sense.
不再支持IE9，IE10和IE Mobile，并将在以后删除。捆绑软件的大小和复杂性增加是主要原因。考虑到微软甚至放弃了对这些浏览器的支持，这也很有意义。
Angular stopped sanitizing the style property bindings. This is due to drop of support for legacy browsers (like IE6 and IE7) and the performance cost of having a sanitizer.
Angular停止清理样式属性绑定。这是由于对旧版浏览器(如IE6和IE7)的支持下降以及拥有消毒剂的性能成本所致。
Bazel build schematics will not be continued. Angular team explained the reasons and referred to this monorepo as a source to keep an eye on, if you are interested in building Angular with Bazel.
Bazel构建原理图将不会继续。如果您对使用Bazel构建Angular感兴趣，Angular团队会解释其原因，并将此Monorepo称为关注源。

结论 (Conclusion)

I would like to emphasize how thankful I am that Angular team is trying to keep Angular up-to-date. This is a great demonstration and, in my humble opinion, just as meaningful as a state-of-art renderer. It is also very nice to see how easy it is to migrate an existing project. Angular not only keeps up with its ecosystem, but also helps you to keep up together with it.

我想强调，我非常感谢Angular团队努力使Angular保持最新。这是一个很好的演示，而且我认为与最新的渲染器一样有意义。很高兴看到迁移现有项目有多么容易。 Angular不仅跟上其生态系统，而且还帮助您与之保持同步。

Congratulations, and thank you!

恭喜，谢谢！

This article was originally published on Volosoft Blog.

本文最初发布在 Volosoft Blog上 。

翻译自: https://medium.com/volosoft/what-is-new-in-angular-10-ee4ba39a187e

weixin_26735933

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular 10的新功能

The new version, v10, of Angular has been published only hours ago and announced by this blog post. Although it may not appear as impactful as v9 (with Ivy and all), this release displays Angular team...
复制链接

扫一扫