Support for Angular 6

[Aruna29]

The Redoc 1.x and 2.0 does not work in Angular 6 version. When will the support for Angular 6 be available?

[RomanHotsiy]

What do you mean by "does not work"?
Any details?

[Aruna29]

I have used ReDoc 1.x with angular 6 using the description in the following issue link
#126
and I'm getting the following warnings and errors

WARNING in ./node_modules/dropkickjs/build/js/dropkick.min.js
Module not found: Error: Can't resolve 'jquery' in 'E:\Project\Angular\Angular-Redoc-1.x\node_modules\dropkickjs\build\js'

ERROR in ./node_modules/redoc/node_modules/json-schema-ref-parser/lib/resolvers/http.js

I have also used the ReDoc version 2.0 with Angular 6 and I'm getting the following error.

ERROR in ./node_modules/redoc/node_modules/json-schema-ref-parser/lib/resolvers/http.js

[Aruna29]

I had a couple of dependency issues, like react, react-dom, rxjs-compat, styled-components. Even after resolving them I could not get build success.
Please let me know if there is any solution or workaround that will work. I'm working on migrating a project which is using ReDoc version 1.x, hence I need the support for Angular 6.

[RomanHotsiy]

ReDoc 1.x is frozen now. Only critical bug fixes are done.
Angular 6 support is not one of the priorities.

ReDoc has been rewritten to React in versions 2.x so we don't have resources to investigate Angular issues of the 1.x version.

Although if you can find the issue root and open a PR against 1.x branch I would be happy to merge it!

[RomanHotsiy]

Closing it as stale.
Feel free to continue discussion here.

[wageeshwara]

I have upgrade v1.x branch to work on angular 6. When I run the project it runs ok. How can I make angular library out of this?

[tindleaj]

I was able to get a workaround that solves this. You have to include the CDN script tag in your index.html, then Redocwill be available as a global variable. In the component you want the documentation in, you have to declare Redoc as any to stop TypeScript from complaining, i.e. declare let Redoc: any. Then you can call Redoc.init() like in the examples. Here's a simplified version of my documentation.component.ts:

import {
  Component,
  AfterViewInit,
  ElementRef,
  OnDestroy,
  ViewEncapsulation
} from '@angular/core'

declare let Redoc: any

@Component({
  selector: 'api-documentation',
  templateUrl: './api-documentation.component.html',
  styleUrls: ['./api-documentation.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ApiDocumentationComponent implements AfterViewInit, OnDestroy {
  constructor(private element: ElementRef) {}

  ngAfterViewInit() {
    this.attachDocumentationComponent()
  }

  async getSwaggerSpec(): Promise<any> {
    // swagger spec retrieval logic
  }

  async attachDocumentationComponent() {
    const swaggerSpec = JSON.parse(await this.getSwaggerSpec())
    const elem = this.element.nativeElement.querySelector('.documentation-root')

    Redoc.init(swaggerSpec, {}, elem)
  }

  ngOnDestroy(): void {
    this.element.nativeElement.querySelector('.documentation-root').remove()
  }
}