Why is the generated Angular client so convoluted?

[Ghostbird]

When I generate a TS client of our API using NSwag, the resulting code seems wildly overcomplicated. Is our NSwag or API misconfigured?

Generated code for a single HTTP POST (excluding generated DTOs, which are fine)

fooAggregate(
    body: AggregateCollectionContract | undefined,
  ): Observable<AggregateResult[]> {
    let url_ = this.baseUrl + '/foo/aggregate';
    url_ = url_.replace(/[?&]$/, '');

    const content_ = JSON.stringify(body);

    let options_: any = {
      body: content_,
      observe: 'response',
      responseType: 'blob',
      headers: new HttpHeaders({
        'Content-Type': 'application/json-patch+json',
        Accept: 'text/plain',
      }),
    };

    return this.http
      .request('post', url_, options_)
      .pipe(
        _observableMergeMap((response_: any) => {
          return this.processFooAggregate(response_);
        }),
      )
      .pipe(
        _observableCatch((response_: any) => {
          if (response_ instanceof HttpResponseBase) {
            try {
              return this.processFooAggregate(response_ as any);
            } catch (e) {
              return _observableThrow(e) as any as Observable<
                AggregateResult[]
              >;
            }
          } else
            return _observableThrow(response_) as any as Observable<
              AggregateResult[]
            >;
        }),
      );
  }

  protected processFooAggregate(
    response: HttpResponseBase,
  ): Observable<AggregateResult[]> {
    const status = response.status;
    const responseBlob =
      response instanceof HttpResponse
        ? response.body
        : (response as any).error instanceof Blob
          ? (response as any).error
          : undefined;

    let _headers: any = {};
    if (response.headers) {
      for (let key of response.headers.keys()) {
        _headers[key] = response.headers.get(key);
      }
    }
    if (status === 200) {
      return blobToText(responseBlob).pipe(
        _observableMergeMap((_responseText: string) => {
          let result200: any = null;
          result200 =
            _responseText === ''
              ? null
              : (JSON.parse(
                  _responseText,
                  this.jsonParseReviver,
                ) as AggregateResult[]);
          return _observableOf(result200);
        }),
      );
    } else if (status !== 200 && status !== 204) {
      return blobToText(responseBlob).pipe(
        _observableMergeMap((_responseText: string) => {
          return throwException(
            'An unexpected server error occurred.',
            status,
            _responseText,
            _headers,
          );
        }),
      );
    }
    return _observableOf(null as any);
  }

Note that the generated options are seemingly wrong and to facilitate that they're cast to any.

• The Content-Type and Accept header values should not be changed from the defaults.
• The responseType shouldn't be 'blob' but 'json' (the default).

What I expected it to generate (excluding generated DTOs, which are fine)

fooAggregate(body: AggregateCollectionContract) {
  return this.http.post<AggregateResult[]>(`${this.baseUrl}/asset/aggregate`);
}

Have I done something wrong in my configuration? Can I configure NSwag to generate less convoluted code?

I figured that at least something that goes wrong has to do with the error handling. We added exceptionClass: "ApiException" to the nswag configuration. However apparently it constructs its own class for exception handling and names it ApiException. We added ApiException because the ApiException class defined in the swagger.json is always the type of the body data that our API returns if a request is not successful (not 200 or 204).

[Jogai]

Feel free to update the templates to your liking: https://github.com/RicoSuter/NSwag/tree/master/src/NSwag.CodeGeneration.TypeScript/Templates

[Ghostbird]

Personally I assume there's a reason why NSwag can generate this convoluted code, and it's probably other people's use cases. In our case the code could be much more simple, and I was wondering if I misconfigured something.

Now that I've looked at the templates, I can see that that's probably not the case. There's no option to disable generic response handling for Angular clients.

Is it possible to load a custom template for client generation?

[Ghostbird]

Ah, I think it can be done using the experimental TemplateDirectory option. I'll have a look at that. I think I'll have to create a file named TemplateClient.liquid which references the Template option.

[Ghostbird]

Cool, this works, but I have to "abuse" an existing client name. If I provide a custom FooClient name, it aborts with an error because the name is not defined here.

[Ghostbird]

Aside from the AngularClient.liquid one must also override File.liquid. For some reason that file generates many framework specific lines that are insufficient, unused, or wrong, if one changes the AngularClient.liquid. It would have made more sense if those lines were in AngularClient.liquid and that file explicitly pulled in generic subtemplates.

Also interesting to see is that NSwag does seem to support some things that I expected, but were missing in the documentation, most importantly luxon.