swagger 源代码_我们如何使用swagger代码生成器从Angular 4更新到Angular 5

最新推荐文章于 2024-05-31 09:38:41 发布

cumian8165

最新推荐文章于 2024-05-31 09:38:41 发布

阅读量624

点赞数

文章标签： java python 大数据数据库 linux

原文链接：https://www.freecodecamp.org/news/how-we-updated-from-angular-4-to-angular-5-using-swagger-code-generator-4a35a014247e/

版权

swagger 源代码

by Mark Grichanik

马克·格里卡尼克(Mark Grichanik)

我们如何使用swagger代码生成器从Angular 4更新到Angular 5 (How we updated from Angular 4 to Angular 5 using swagger code generator)

As a full stack developer in an enterprise company, I had the opportunity to update our client side to Angular 5. The process itself is not simple and there are many things to take into account. In this article, I’ve outlined the necessary steps needed to update your Angular version with ease and simplicity.

作为一家企业公司的全栈开发人员，我有机会将客户端更新为Angular 5 。该过程本身并不简单，需要考虑很多因素。在本文中，我概述了轻松，简单地更新Angular版本所需的必要步骤。

According to the Angular team, it is ill-advised to update from version 4 to 6 directly. That is why this article will focus on updating to version 5.

根据Angular团队的说法，不建议直接从版本4更新到版本6。 因此，本文将重点介绍更新到版本5。

Just as a heads up, the Angular team promises that updating from Angular 6 and further will be lighter and easier to handle.

刚起步时，Angular团队承诺从Angular 6进行更新，并且进一步更新将更加轻便且易于处理。

先决条件 (Prerequisites)

Make sure you are using the latest swagger version. Angular 5 deprecates OpaqueToken and it now uses InjectionToken instead.

确保您使用的是最新版本。 Angular 5弃用了OpaqueToken，现在改为使用InjectionToken。

OpaqueToken is a unique and immutable value which allows developers to avoid collisions of DI token id’s. InjectionToken<T> is a parametrized and type-safe version of ‘OpaqueToken’.

OpaqueToken是一个唯一且不变的值，它使开发人员可以避免DI令牌ID的冲突。 InjectionToken <T>是'Opaqu eToken'的参数化且类型安全的版本。

We use swagger-codegen-maven-plugin, version 2.2.2. Because of the aforementioned issue, we had to upgrade to 2.3.1.

我们使用版本2.2.2的swagger-codegen-maven-plugin。 由于上述问题，我们不得不升级到2.3.1。

Inside maven pom.xml file we had to change language attribute of swagger yml from ‘typescript-angular2’ to ‘typescript-angular’ which should support all angular versions from now on.

在maven pom.xml文件中，我们不得不将swagger yml的语言属性从'typescript-angular2'更改为'typescript-angular'，从现在开始应支持所有的角度版本。

With Swagger 2.2.2 the BASE_PATH is generated as:

使用Swagger 2.2.2时，BASE_PATH生成为：

As opposed to Swagger 2.3.1, which is supported by Angular 5:

与Angular 5支持的Swagger 2.3.1相对：

Take note that there is another major difference between the Swagger versions in regard to the generated file. For example, if we had a dogResource.java file that contains all kinds of REST calls, Swagger 2.2.2 will generate dogApi.ts. Whereas Swagger 2.3.1, will generate it as a service. Meaning, dog.service.ts.

请注意，就生成文件而言，Swagger版本之间还有另一个主要区别。例如，如果我们有一个dogResource.java文件，其中包含各种REST调用，则Swagger 2.2.2将生成dogApi.ts。而Swagger 2.3.1会将其作为服务生成。含义，dog.service.ts。

After upgrading to the latest swagger version, you must refactor your imports to use dog.service.ts instead of dogApi.ts.

升级到最新的swagger版本后，必须将导入重构为使用dog.service.ts而不是dogApi.ts。

让我们开始 (Let’s Begin)

Our server side is written in Java while our client side is written using Angular 4. We are using swagger that creates a yaml file that uses OpenApi specification.

我们的服务器端是用Java编写的，而我们的客户端是使用Angular 4编写的。我们正在使用swagger创建使用OpenApi规范的yaml文件。

It’s a standard interface to RESTful APIs which allows understanding of the capabilities of the service without access to source code. (https://swagger.io/specification/).

它是RESTful API的标准接口，使您无需访问源代码即可了解服务的功能。 ( https://swagger.io/specification/ )。

Next, we generate Typescript files (containing objects and APIs) from the original yaml file. You can play with their generator here.

接下来，我们从原始yaml文件生成Typescript文件(包含对象和API)。您可以在这里使用其生成器。

STEP 1: Update your node and npm to the latest versions . We used npm 6.1 with node 10.0. You can download them from here.

步骤1：将节点和npm更新到最新版本。我们在节点10.0上使用了npm 6.1。您可以从此处下载它们。

STEP 2: Update your package.json file using:

步骤2 ：使用以下命令更新您的package.json文件：

升级NgRx和所需的重构 (Upgrading NgRx And Needed Refactoring)

It is not mandatory to use NgRx, but I highly suggest it. If you are not using NgRx, you can skip to the next step.

使用NgRx不是强制性的，但我强烈建议使用。如果您不使用NgRx，则可以跳到下一步。

The NgRx team created a very useful migration guide. They really describe step by step what modifications are needed to be done in order to have a successful migration

NgRx团队创建了一个非常有用的迁移指南。他们确实逐步描述了要成功进行迁移需要进行哪些修改

In version 5, the ‘payload’ property in Action Interface has been removed because it was a source of type-safety issues.

在版本5中，动作界面中的“有效载荷”属性已被删除，因为它是类型安全问题的根源。

The NgRx team suggests to create a new class for each action that you have, and pass the payload as an input to the constructor of that class.

NgRx团队建议为您执行的每个操作创建一个新类，并将有效负载作为输入传递给该类的构造函数。

We’ve decided to make the transition easier by creating our own Action interface called, ActionWithPayload, which extends the regular Action interface. ActionWithPayload extends the newer interface, but retains the older payload attribute.

我们已决定通过创建自己的Action接口ActionWithPayload来简化转换过程，该接口扩展了常规Action接口。 ActionWithPayload扩展了较新的接口，但保留了较旧的有效负载属性。

Also we noticed that we can’t use observable$.select and we must wrap it with the ‘pipe’ operation:

我们还注意到，我们不能使用observable $ .select，而必须使用'pipe'操作将其包装：

定影单元测试 (Fixing Unit Tests)

In order to use the new store mechanism, you need to create a mocked store class:

为了使用新的商店机制，您需要创建一个模拟的商店类：

In order to use it within a test, do the following:

为了在测试中使用它，请执行以下操作：

Store will be a mocked instance of the provided state! We can mimic all kinds of states with that!

Store将是提供状态的模拟实例！我们可以以此模拟各种状态！

最后的话 (Final Words)

Although it may seem daunting at first, the steps I have outlined are straightforward and not very complicated. If you run into any issues, feel free to drop me a line at : markgrichanik[at]gmail[dot]com.

尽管乍一看似乎令人生畏，但我概述的步骤很简单，也不是很复杂。如果您遇到任何问题，请随时给我留言： markgrichanik [at] gmail [dot] com 。

I would also love to hear any feedback you have while upgrading Angular applications with Swagger and NgRx.

我也很想听听您使用Swagger和NgRx升级Angular应用程序时收到的任何反馈。