How to use generated Angular client from Spring Boot REST API?

I finally managed to generate an Angular client using this tutorial using the openapi-generator-maven-plugin.

I had to make a few adaptations e.g. using different dependencies

<!-- 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>

and also had to add a few more arguments e.g. for the database driver etc.:

<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>

But now, after the code has been generated, I am not able to follow the instructions as posted in the (generated) README.md:

@

Building

To install the required dependencies and to build the typescript sources run:
npm install 
npm run build 
publishing

First build the package then run npm publish

consuming

Navigate to the folder of your consuming project and run one of next commands.

published:

npm install @ --save

...

The reason: There is no package.json and therefore also no "build" script that could be executed in the first place.

Therefore, I am wondering whether there's something missing out or what I have to do to be able to use the generated code in my Angular clients.

I found the answer in Why does openapi-generator not create a package.json with typescript-angular?.

I had to set <npmName>tmsClientRest</npmName> for 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>

Note: In my case I also had to add npmVersion to make it "work" ~~(it's still not working, just running into the next issue)~~

Update:

If you get something like

models.ts is not a module

it might be because you do not have any DTO objects yet. In my case I only had a simple REST Controller that returned a simple String. Just make sure you return (at least) a dummy object and model.ts gets populated with code and npm install && npm run build should finally work for example:

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();
}

instead of just

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

@

Building

publishing

consuming

Recommended topics

Hot tags