Create an NPM package using the open-api-generator gradle plugin

Has anyone successfully generated an npm package using the open API generator plugin for Gradle?

I was able to generate .ts model classes using the typescript-angular generator, but I noticed properties like npmName and npmVersion which made me wonder if it's possible to create an npm package with this plugin.

However, I haven't been able to generate the npm package or find any examples online.

Below is an example of the configuration I attempted:

task buildTypeScriptClient(type: org.openapitools.generator.gradle.plugin.tasks.GenerateTask) {
        generatorName = "typescript-angular"
        inputSpec = "$rootDir/${project.name}/api-definition/${apiDefinitionFile}".toString()
        outputDir = "$buildDir".toString()
        validateSpec = false
        modelPackage = "model.${project.name}-service-client"

        configOptions = [
                ngVersion    : "8.0.0",
                npmName      : "some-typescript-client",
                npmVersion   : "1.0.0",
                npmRepository: "some repo",
                snapshot     : "false",
                supportsES6  : "true"
        ]

        systemProperties = [
                models: "" //generates all model classes
        ]
    }

Answer №1

Here is the setup I utilized:

task buildTypeScriptClient(type: org.openapitools.generator.gradle.plugin.tasks.GenerateTask) {
        generatorName = "typescript-angular"
        inputSpec = "$rootDir/${project.name}/api-definition/${apiDefinitionFile}".toString()
        outputDir = "$buildDir".toString()
        validateSpec = Boolean.valueOf(project.validateOpenApiFile)
        supportingFilesConstrainedTo = ["package.json"]
        modelPackage = "${project.name}-client/model"
        templateDir = "$rootDir/${project.name}/template/"

        configOptions = [
                ngVersion    : "8.0.0",
                npmName      : "${project.name}-client",
                npmVersion   : "${project.version}",
                npmRepository: project.NEXUS_UPLOAD_URL
        ]

        additionalProperties = [
                backendService: "${project.name}".toString()
        ]

        systemProperties = [
                models    : "",
                modelDocs : "false",
                modelTests: "false",
                apis      : "false"
        ]
    }

To generate a custom package.json, I use a package.mustache template structured like this:

{
    "name": "{{npmName}}",
    "version": "{{npmVersion}}",
    "description": "This package contains the DTO classes (generated by open api generator) used for the REST interface of {{backendService}}",
    "private": false,
    "license": "unlicensed",
    "repository": {
        "type": "git",
        "url": "https://git-repo.com/{{backendService}}"
    },
    "scripts": {
        "package": "npm pack"
    },
    "files": [
        "{{modelPackage}}/*"
    ]
}

In addition to that, I make use of a specialized npm gradle plugin built on top of the com.moowork.gradle:gradle-node-plugin:1.3.1. This lets me package the client in a zip file and push it to the remote repository.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

lite-server is failing to serve the .js file located in the /js directory, resulting in the browser not sending a request

I am currently using a lite-server by running npm run lite Despite my jQuery file and CSS being loaded without issue, the browser is not even attempting to make a GET request for the main.js file. The main.js file is located in the /js folder, just like ...

What to do when calling disabled() on a FormControlName causes all form fields to become invalid?

While working with a reactive form, I have observed that setting a formControlName to disabled() can cause the entire form to become invalid. Is there a way to ensure the form remains valid even after disabling a control? console.log('Before:' ...

Enhance the display using ngOnChanges when receiving input in Angular

My child component has an @Input property of type Person where the object is passed from the parent component through an attribute. You can find the complete working code on StackBlitz After researching a similar question and following the provided answe ...

The inability to receive a response from the OpenAI API in NextJS is causing frustration

I tried following a tutorial to implement functionality in T, but I am facing issues with getting a response from the API. I am unsure if there has been an update to the OpenAI API that is causing this problem. Any assistance would be greatly appreciated. ...

Filtering JSON array data in Typescript can help streamline and optimize data

Recently diving into Angular, I am facing a challenge with filtering data from a JSON array. My goal is to display names of items whose id is less than 100. The code snippet below, however, is not producing the desired result. list : any; getOptionList(){ ...

Angular 2 .net core project experiencing issues with missing files in the publish folder

Exploring the Angular 2 template within a .NET Core framework, as detailed in this resource . However, upon publishing the solution, I noticed that all the files within the "app" subfolder of ClientApp are missing. This leads to a situation where my esse ...

Organizing date values within an array using TypeScript

I need to customize a page within D365 Event Management that is coded in HTML, CSS, JS, AngularJS, and Typescript. Within an html file, I have an overview of events: <div class="spinner-container m-5" *ngIf="isLoading"> <app-spinner></ ...

When using Typescript, an error will be flagged within the condition (IF) block if there is an undefined value present

Encountered a peculiar situation while working on a project. Take a look at this example where TS flags an error: type Fruit = { name: string; }; const myFruits: Fruit[] = [{ name: "Apple" }, { name: "Banana" }]; let asyncFuncResult ...

Experiencing problem when using Angular Dart material-input with data type set to number

I am currently in the process of constructing a web application (essentially an e-commerce platform) using Angular Dart and incorporating elements from materialDirectives to create the app's components. My primary focus at the moment is on developing ...

I am attempting to pass input values from a parent component to a child component in order to display them, utilizing the @input decorator

How can I pass input values from a form in the parent component to be displayed in the child component using @Input? Login Form (Parent): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> & ...

Is it possible to develop a web API using express.js without the need to have node.js installed?

As I work on developing my portfolio website, I've run into the challenge of hosting restrictions that prevent me from utilizing Node.js. While I understand that Angular can be used on any web server, I'm curious if it's possible to leverag ...

Setting up webpack to compile just the necessary assets for running an Angular 5 application

I am currently using Angular 5 and I encountered a situation when running the following command: ng build --prod --named-chunks --aot This command generated numerous files and folders in the 'dist' directory: [development a85a7dc] Initial dist ...

The function $(window).height() is designed to output a numerical value or potentially undefined

Recently, I encountered an issue with my TypeScript code (version 3.9.5): const height: number = $(window).height(); This resulted in the following error message: TS2322: Type 'number | undefined' is not assignable to type 'number'. A ...

Angular form requests can utilize the Spring Security Jwt Token to allow all options methods

Despite checking numerous sources online, I am facing a persistent issue with my Angular application. The problem arises when using HttpClient along with an Angular interceptor to set headers for authentication in my Java Rest API using JWT tokens. The int ...

Tips on displaying or hiding the close button on the task pane of an online Excel document with an Office.js add-in

Working with office.js and Angular 6 to develop my add-in, I have implemented event listeners that run in the background. However, these events require the right side task pane to remain open or minimized. I am seeking a solution to prevent users from clos ...

Arranging a Collection of Items into Nested Arrays with Recursive String Paths

I am facing a challenge with organizing a list of items that can have multiple levels of children using an API that provides a path property. The issue arises when the path requires each child to add an incrementing -000n starting from 0001. I am strugglin ...

Develop a CakePHP CRUD view using a JavaScript framework

Creating a CRUD view in Cake PHP is simple with the following command: bin/cake bake all users This command builds the users table for CRUD operations. Is there a JavaScript framework that offers similar simplicity? ...

Encountering a consistent "npm start" error on all of my React projects on

Challenges with Starting React Project using npm Every time I try to run npm start in one of my React projects, I face the same error consistently: Expected Outcome: I expected the React application to start without any errors. Steps Taken: I have tri ...

Best Practices for Integrating Angular with Your Custom JavaScript Library

Imagine needing to create a TypeScript function that can be utilized across various components, services, or modules. For example, let's say you want an alert wrapper like this: my_alert(msg); // function my_alert(msg) { alert(msg); } You might hav ...

Having trouble linking tables to Node.js with TypeScriptyntax?

I am facing an issue with mapping multiple entities using sequelize. I keep encountering the error message " Error: Profesor.hasOne called with something that's not a subclass of Sequelize.Model". How can I resolve this issue? Below is the code for t ...