Using generated Swagger TypeScript Rest Client in Angular2

Question

I am working on a Meteor web application using Angular 2 and TypeScript. For using a REST API, I have generated client code with Swagger Codegen. Unfortunately there is no sample on GitHub, how to use the rest client.

I have an angular 2 view component which is injecting an Angular 2 service (ProductTreeService) and the generated API (both marked as "@Injectable"):

@Component({
    selector: 'panel-product-selection',
    template,
    providers: [ProductTreeService, UserApi],
    directives: [ProductTreeComponent]
})

export class PanelProductSelectionComponent
{
    private categoriesProductsTree: Collections.LinkedList<CategoryTreeElement>;
    private productTreeService: ProductTreeService;
    private userApi: UserApi;

    constructor(productTreeService: ProductTreeService, userApi: UserApi)
    {
        this.productTreeService = productTreeService;
        this.userApi = userApi;
    }

    ngOnInit(): void
    {
        //...
    }
}

While the angular service only is accessable and all is working fine, the application is crashing when I inject UserApi. The only difference between UserApi and ProductTreeService is the constructor: The service has no constructor parameters, the generated Api class has:

constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string) {
    if (basePath) {
        this.basePath = basePath;
    }
}

So how can I inject the generated API?

Can you please include some of the generated code? UserApi, isn't that just the sample provided? The code you linked to isn't meant to be included in projects -- it is a sample of generated code. — Martin
– Martin, Commented Sep 7, 2016 at 14:46
Here is an example using Typescript-angular2 API client generated by Swagger Codegen: github.com/taxpon/ng2-swagger-example. Would this help? — William Cheng
– William Cheng, Commented Sep 8, 2016 at 6:55

Dani P. · Accepted Answer · 2019-03-23 17:45:32Z

3

I would use the environment.ts file with a property for the url:

export const environment = {
  production: false,
  basePath: 'https://virtserver.swaggerhub.com/user/project/1.0.0'
};

And then in the app.module you provide the config to the service:

  providers: [
    { provide: BASE_PATH, useValue: environment.basePath },
  ],

This works with Swagger generated code.

Hope that helps! (updated to Angular6+)

https://blog.angulartraining.com/how-to-manage-different-environments-with-angular-cli-883c26e99d15

answered Mar 23, 2019 at 17:45

Dani P.

1,1381 gold badge11 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:17:36Z

2

After further researches I got the solution. The constructor of the rest client UserApi is expecting an HTTP provider as following:

constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string) {
    if (basePath) {
        this.basePath = basePath;
    }
}

Coming from Java, I thought maybe this provider has to be initialized somehow in the constructor which is injecting this API. In actual fact, this initialization has to be done in the NgModule containing the injecting component, as described in this thread.

This solution worked for me.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Sep 8, 2016 at 8:19

Dolf

1012 silver badges8 bronze badges

Comments

user6090729 · Accepted Answer · 2018-08-23 11:00:01Z

0

Old question but ... that's how you should do it:

providers: [
{
  provide: API_BASE_URL, // or BASE_PATH
  useFactory: () => { 
      return environment.apiBaseUrl // or return just "your base url as text"
  }
}]

answered Aug 23, 2018 at 11:00

user6090729

3 Comments

Lewis Browne Over a year ago

Could you add some more information as to why that is the way it should be done.

user6090729 Over a year ago

Oh, it was just about the missing Http Provider. My solution is how you inject the base url into your auto generated clients

olefrank Over a year ago

@PaD Could you show an example of how to do this when apiBaseUrl comes from a config JSON file that is loaded on APP_INITIALIZER?

Collectives™ on Stack Overflow

Using generated Swagger TypeScript Rest Client in Angular2

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related