Nswag: Compatibility with Angular 6 / RxJs v6

[vaceslav]

Angular 6 has dependency on RxJs 6.
RxJs 6 require a pipeable operators.

Generated AngularClient files use at moment "old" style and should use a pipeable operators.

here is update guide from Angular Team

[RicoSuter]

It would be great, if Angular wouldn't break the generated code every 2 months... :-)

[RicoSuter]

Is there a way to change this so that the code is backward-compatible with RxJS 5? Otherwise we need a setting to choose the RxJS version.

[vaceslav]

there is a "compat" library.
yarn add rxjs-compat

I am currently on testing. cli says following:
error TS2339: Property 'throw' does not exist on type 'typeof Observable'.

there is only one error at the moment. With compat library

[vaceslav]

The compability library is working. Only one thing is Observable.throw. It must be replaced with

import { _throw } from 'rxjs/observable/throw';
....
return _throw(response_);

[nartc]

@vaceslav Observable.throw has been deprecated. Use throwError() instead.

Pipeable methods require RxJS 6 to be installed as a package so there's really no point to have the generated code to be using pipeable methods when the Angular Client is using the old dot-chaining methods. Hence, having the option to pick RxJS version is necessary. However, the RxJS team encourages people to change to RxJS 6 with Pipeable Methods as soon as possible as it's beneficial to: Bundle size, cleaner code.

I can help with working on the Angular Client template if I have a clearer view as how the flow of the generator works.

[simeyla]

@nartc Not sure what you mean by 'no point to have the generated code to use pipeable methods'. Version 6 is now released (of Angular and RxJS) and if you don't install the rxjs-compat package then the generated code just doesn't work. Pipeable methods are 'backwards compatible' to version 5.5 at least.

My project is still fairly new, so it just took an afternoon to remove 'chained' code and convert everything to pipes. I'd love to be able to uninstall the compatibility package but can't until the generated code is updated. As a workaround I uninstalled it, fixed all my code and then reinstalled it to allow the generated client to work.

[nartc]

@simeyla You’re missing the second part of my statement. I was stating that there’s no point to have one place to use chained operators while the other is using pipeable operators. If that’s the case, rxjs-compat is required. My point was to point at the direction of not solely relying on rxjs-compat package.

[pantonis]

Any update on this?

[simeyla]

This should probably be renamed to 'Compatibility with Angular 6 / RxJs v6' and handle all Angular 6 issues at the same time as RxJs6 ones.

For example Angular 6 now supports singleton services where you don't need to 'provide' them in app.module and specify providedIn: 'root' parameter to @Injectable instead.

This would make it much easier to add a new Client class without having to 'provide' every single one you use in the root module. However it could be dangerous to to this by default due to name collisions. Personally I don't have any conflicts and would love this option to clean up my app.module.ts file.

[nartc]

Agree. Then we’d have to provide an option to choose Singleton Providers or something like that in the NSwag file. Not everyone uses Angular 6, not yet.

[RicoSuter]

I think we'll have two new settings

• RxJsVersion (5.0 or 6.0)
• UseSingletonProviders (or maybe better an enum, e.g. AngularProviderType - values?)

And clean up the templates so that they are not that cluttered with js framework conditional logic..

[RicoSuter]

PR: https://github.com/RSuter/NSwag/pull/1329

[RicoSuter]

New settings:

• RxJsVersion, default: 5.0
• UseSingletonProvider, default: false

Sample:

import { mergeMap as _observableMergeMap, catchError as _observableCatch } from 'rxjs/operators';
import { Observable, from as _observableFrom, throwError as _observableThrow, of as _observableOf } from 'rxjs';
import { Injectable, Inject, Optional, OpaqueToken } from '@angular/core';
import { Http, Headers, ResponseContentType, Response } from '@angular/http';

export const API_BASE_URL = new OpaqueToken('API_BASE_URL');

@Injectable({
    providedIn: 'root'
})
export class EntitesClient {
    private http: Http;
    private baseUrl: string;
    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;

    constructor(@Inject(Http) http: Http, @Optional() @Inject(API_BASE_URL) baseUrl?: string) {
        this.http = http;
        this.baseUrl = baseUrl ? baseUrl : "http://localhost/Api";
    }

    /**
     * Updates details of the entity for a given entity ID.
     * @id Id of the entity
     * @updateEntityRequest UpdateEntityRequest model
     * @return OK
     */
    patch(id: number, updateEntityRequest: UpdateEntityRequest): Observable<any> {
        ...

        return this.http.request(url_, options_).pipe(_observableMergeMap((response_ : any) => {
            return this.processPatch(response_);
        })).pipe(_observableCatch((response_: any) => {
            if (response_ instanceof Response) {

[RicoSuter]

Wiki: https://github.com/RSuter/NSwag/wiki/SwaggerToTypeScriptClientGenerator%3A-Angular

[simeyla]

@RSuter Looks like you inadvertently removed the import * as moment from 'moment';

Looks like a cut and paste error

But fixing this manually everything else looks great and I can now remove the compat package. Thanks :-)

[RicoSuter]

Sorry, patch release soon... just got out of battery.

[RicoSuter]

Is everything working without compat package?

[RicoSuter]

Are there other things which are new for ng 6?

[simeyla]

@RSuter Seems like everything is working fine. Was able to remove the services and clients from my module.ts and do a production build with compatibility package uninstalled. I'm not currently aware of any other Angular 6 features. Seems to be working great and nice to be able to kill off the old syntax :-)

Also for a temporary workaround use an extension code file - so I was able to add the import to my extension file and it gets included when I generate the file :-)

`import * as moment from 'moment';`

You could also put private http:HttpClient in the constructor which means you don't need an explicit local variable + assignment. You don't need @Inject() - but maybe it's clearer for generated code to have it (and I can never quite keep up with all the nuances of DI anyway).

[RicoSuter]

I think the local var is there for people with older ts version (minified code should be the same). And inject() to show that it’s meant to be used via di.