如何使用从 Spring Boot REST API 生成的 Angular 客户端？

Question

我终于设法使用this tutorial 使用openapi-generator-maven-plugin 生成了一个Angular 客户端。

我不得不做出一些调整，例如使用不同的依赖项

<!-- Spring Docs (Swagger) -->

<!-- TODO After version upgrades check https://github.com/springdoc/springdoc-openapi/issues/133 -->

<dependency>
    <groupId>org.springdoc</groupId>
    <artifactId>springdoc-openapi-core</artifactId>
    <version>1.1.49</version>
    <exclusions>
        <exclusion>
            <groupId>io.github.classgraph</groupId>
            <artifactId>classgraph</artifactId>
        </exclusion>
    </exclusions>
</dependency>

<dependency>
    <groupId>org.springdoc</groupId>
    <artifactId>springdoc-openapi-ui</artifactId>
    <version>1.1.49</version>
</dependency>

<dependency>
    <groupId>io.github.classgraph</groupId>
    <artifactId>classgraph</artifactId>
    <version>4.8.44</version>
</dependency>

并且还必须添加更多参数，例如对于数据库驱动程序等：

<profile>
    <id>angular</id>
    <build>
        <plugins>

            <!-- Code Generation -->

            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>build-helper-maven-plugin</artifactId>
                <version>3.0.0</version>
                <executions>
                    <execution>
                        <id>reserve-tomcat-port</id>
                        <goals>
                            <goal>reserve-network-port</goal>
                        </goals>
                        <phase>process-resources</phase>
                        <configuration>
                            <portNames>
                                <portName>tomcat.http.port</portName>
                            </portNames>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- Spring Boot Maven plugin -->

            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>pre-integration-test</id>
                        <goals>
                            <goal>start</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>post-integration-test</id>
                        <goals>
                            <goal>stop</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <addResources>true</addResources>
                    <arguments>
                        <!--suppress MavenModelInspection -->
                        <argument>--server.port=${tomcat.http.port}</argument>
                        <argument>--spring.profiles.active=angular</argument>
                    </arguments>
                    <environmentVariables>
                        <JDBC_DATABASE_URL>jdbc:postgresql://localhost/mydatabase</JDBC_DATABASE_URL>
                        <JDBC_DATABASE_USERNAME>postgres</JDBC_DATABASE_USERNAME>
                        <JDBC_DATABASE_PASSWORD>root</JDBC_DATABASE_PASSWORD>
                    </environmentVariables>
                </configuration>
            </plugin>


            <plugin>
                <groupId>org.openapitools</groupId>
                <artifactId>openapi-generator-maven-plugin</artifactId>
                <version>4.2.2</version>
                <executions>
                    <execution>
                        <id>angular-client-code-generation</id>
                        <phase>integration-test</phase>
                        <goals>
                            <goal>generate</goal>
                        </goals>
                        <configuration>
                            <!--suppress MavenModelInspection -->
                            <inputSpec>http://localhost:${tomcat.http.port}/v3/api-docs</inputSpec>
                            <output>${project.build.directory}/generated-sources/angular-client</output>
                            <generatorName>typescript-angular</generatorName>
                            <!--
                                Use this option to dump the configuration help for the specified generator
                                instead of generating sources:
                                <configHelp>true</configHelp>
                            -->
                            <configOptions>
                                <!--
                                    Put generator-specific parameters here, e.g. for typescript-angular:
                                    <apiModulePrefix>Backend</apiModulePrefix>
                                 -->
                            </configOptions>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

        </plugins>
    </build>
</profile>

但是现在，在生成代码后，我无法按照（生成的）README.md 中发布的说明进行操作：

@

建筑

安装所需的依赖项并构建打字稿 来源运行：

npm install 
npm run build 

出版

首先构建包然后运行npm publish

消费

导航到您的消费项目的文件夹并运行下一个 命令。

已发布：

npm install @ --save

...

原因：没有 package.json，因此也没有可以首先执行的“构建”脚本。

因此，我想知道是否遗漏了什么或者我必须做些什么才能在我的 Angular 客户端中使用生成的代码。

Answer 1

我在Why does openapi-generator not create a package.json with typescript-angular?找到了答案。

我必须将<npmName>tmsClientRest</npmName> 设置为openapi-generator-maven-plugin：

<plugin>
    <groupId>org.openapitools</groupId>
    <artifactId>openapi-generator-maven-plugin</artifactId>
    <version>4.2.2</version>
    <executions>
        <execution>
            <id>angular-client-code-generation</id>
            <phase>integration-test</phase>
            <goals>
                <goal>generate</goal>
            </goals>
            <configuration>
                <!--suppress MavenModelInspection -->
                <inputSpec>http://localhost:${tomcat.http.port}/v3/api-docs</inputSpec>
                <output>${project.build.directory}/generated-sources/angular-client</output>
                <generatorName>typescript-angular</generatorName>                    
                <configOptions>
                    <!-- The missing part(s) -->
                    <npmName>restClientName</npmName>
                    <npmVersion>0.0.1</npmName>
                </configOptions>
            </configuration>
        </execution>
    </executions>
</plugin>

注意：在我的情况下，我还必须添加 npmVersion 以使其“工作”（它仍然无法工作，只是遇到下一个问题）

更新：

如果你得到类似的东西

models.ts 不是模块

这可能是因为您还没有任何 DTO 对象。就我而言，我只有一个简单的 REST 控制器，它返回一个简单的字符串。只要确保您返回（至少）一个虚拟对象，model.ts 就会填充代码，npm install && npm run build 最终应该可以工作，例如：

public static class HealthInfoDto {
    public String message = "I am alive, you see?";
}

@RequestMapping(value = "/health", method = RequestMethod.GET)
public @ResponseBody HealthInfoDto getHealth() {
    return new HealthInfoDto();
}

而不仅仅是

@RequestMapping(value = "/health", method = RequestMethod.GET)
public @ResponseBody String getHealth() {
    return "Hello World!";
}