Redoc: Publish angular2 module to npm

Created on 14 Oct 2016  路  21Comments  路  Source: Redocly/redoc

enhancement

Most helpful comment

Hey guys!

I've just release v1.17.0 which includes ReDoc angular module. It probably has some issues so I would like you to test and provide feedback here.

Known issues:

  • Webpack will show warnings about jquery. You do not have to install jquery. This is caused by one of the dependencies. I will try to fix this for the next release.
  • need to install @types/swagger-schema-official as it is missing from dependencies

Example project created with angular-cli is here.

From an empty angular-cli project the following steps are required to use ReDoc module:

1) install ReDoc dependency. npm --save install redoc or yarn add redoc
2) import missing dependency yarn add @types/swagger-schema-official --dev (see known issues above)
3) import RedocModule and add it to your module imports:

// ...
import { RedocModule } from 'redoc';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RedocModule // add here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4) import redoc.css in styles.css

@import url("../node_modules/redoc/dist/redoc.css");

5) place <redoc spec-url="..."></redoc> tag somewhere

Let me know if this works for you or any issues you face.

cc @jamesleegovtech @brunorfranco @ankushkankariya @kushwahashiv

All 21 comments

Hi @RomanGotsiy

Can redoc be used in an angular application as a dependency? if answer is yes how I can use this in angular 2 frontend application?
Any help would be appriciated.
/shiv

@kushwahashiv no, at the moment it is not published as a module.

I am working on that at the moment. I will notify you once done.

@RomanGotsiy thanks. If you can give some tentative timeline would be great.

up to 2 weeks

Hi @RomanGotsiy any update on this? please let us know if something I can help.

Thanks.

@kushwahashiv still didn't manage to finish this.
But I'm going to finish this till the end of the week.

Any updates on this, I am also looking for the same feature to be used in my application. Any inputs will be appreciated. Thanks

Same thing here. I am also waiting for this.

@RomanGotsiy Sorry to bother you, but would have any updates on this?
Maybe an expected date for this to be release.
Thanks, Bruno

@brunorfranco @ankushkankariya sorry for delaying this again and again. I'm quite busy now with other project.

I have this already done on a separate local branch. Just have to move the code to master.
I will try my best to finish this till the end of this week.

Sorry to bother you

It's ok. Even, thanks for bothering me 馃槂

That's pretty cool. Thanks @RomanGotsiy.
Waiting for it to checkin...

any updates on this? I'm also hitting the same issue trying to import it as a dependency in an angular app.

@RomanGotsiy quick check if u are ready to check in the code for this?
sorry to keep bothering, but my project is really anxious to incorporate redoc into out angular project. Without this, I would have to create redoc as a separate project/app.

Let me know if there's anything I can do to help. :)

Hey guys!

I've just release v1.17.0 which includes ReDoc angular module. It probably has some issues so I would like you to test and provide feedback here.

Known issues:

  • Webpack will show warnings about jquery. You do not have to install jquery. This is caused by one of the dependencies. I will try to fix this for the next release.
  • need to install @types/swagger-schema-official as it is missing from dependencies

Example project created with angular-cli is here.

From an empty angular-cli project the following steps are required to use ReDoc module:

1) install ReDoc dependency. npm --save install redoc or yarn add redoc
2) import missing dependency yarn add @types/swagger-schema-official --dev (see known issues above)
3) import RedocModule and add it to your module imports:

// ...
import { RedocModule } from 'redoc';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RedocModule // add here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4) import redoc.css in styles.css

@import url("../node_modules/redoc/dist/redoc.css");

5) place <redoc spec-url="..."></redoc> tag somewhere

Let me know if this works for you or any issues you face.

cc @jamesleegovtech @brunorfranco @ankushkankariya @kushwahashiv

@RomanGotsiy very much appreciated. I will update you in case of any issue(s) I will find.

Hi @RomanGotsiy

When trying to install the npm module I get this error:

npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR! node v6.9.5
npm ERR! npm  v4.2.0
npm ERR! code 128

npm ERR! Command failed: git -c core.longpaths=true clone --template=C:\Users\AppData\Roaming\npm-cache\_git-remotes\_templates --mirror [email protected]:julmot/mark.js.git C:\Users\AppData\Roaming\npm-cache\_git-remotes\git-github-com-julmot-mark-js-git-8e188349
npm ERR! Cloning into bare repository 'C:\Users\AppData\Roaming\npm-cache\_git-remotes\git-github-com-julmot-mark-js-git-8e188349'...
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.

Hey guys ! anyone using this angular and updating url dynamically? like from a dropdown etc. I am trying update spec-url property dynamically but it's not working. Does anyone has a working example? Thanks.

@j26nz actually this is not working yet as the angular module is still unstable.
However, I don't think this issue would be resolved as I'm rewriting ReDoc using React (https://github.com/Rebilly/ReDoc/issues/327)

Thanks @RomanGotsiy - waiting for the React version 馃憤

ran in my Angular project but it does not allow to run the command "ng build --prod" for the problem with ./src/main.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/(user)/Documentos/src'
@ ./src/main.ts 3:0-74
@ multi ./src/main.ts

Closing as wontfix

Was this page helpful?
0 / 5 - 0 ratings

Related issues

yuji38kwmt picture yuji38kwmt  路  3Comments

dvh picture dvh  路  3Comments

dwilding picture dwilding  路  4Comments

gavinkalika picture gavinkalika  路  3Comments

martnst picture martnst  路  3Comments