Generate OpenAPI Angular Client

Connect angular frontend via generated Services to your backend.

# install the latest version of "openapi-generator-cli"
npm install @openapitools/openapi-generator-cli -g
# switch into a folder where you want to create the client
cd angular-openapi-client
# generate the client
openapi-generator-cli generate -g typescript-angular -i ./openapi.json -o ./ --additional-properties npmName=slim-api,snapshot=false,ngVersion=10.0.0,npmVersion=0.0.1
# switch into the folder where you generated the client
cd angular-openapi-client
# initalize a git repository, add files, commit them and publish
git init
git add --a
git commit -m "inital commit"
git remote add origin git@github.com:pguso/openapi-typescript-angular-client.git
git push -u origin master
# setup a new angular project
ng new angular-openapi-client-demo
npm i git+ssh://github.com:pguso/openapi-typescript-angular-client.git
"dependencies": {
...
"slim-api": "git+ssh://git@github.com/pguso/openapi-typescript-angular-client.git",
...
},
...# we add the slim-api node module to our include list
"include": [
"src/**/*.d.ts",
"node_modules/slim-api/**/*.ts"
]
...
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng serve
import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {User, UserService} from 'slim-api';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
users$: Observable<User[]>;

constructor(private userService: UserService) {}

ngOnInit(): void {
this.users$ = this.userService.getUsers();
}
}
<h3>User list</h3>
<ul *ngFor="let user of users$ | async">
<li>{{user.username}}</li>
</ul>
openapi-generator-cli version-manager set 5.1.0

Loving web development and learning something new. Always curious about new tools and ideas.