reactjsangularngx-extended-pdf-viewer

ngx-extended-pdf-viewer for React

I need a way to display PDFs in my React app with the following requirements:

I found the ngx-extended-pdf-viewer package but it seems to be for Angular. https://www.npmjs.com/package/ngx-extended-pdf-viewer

I've never used Angular before, but since it's still just a node package can I import and use it in React just like any other package?

I tried to use the component from the package:

import React from "react";
import { NgxExtendedPdfViewerComponent } from "ngx-extended-pdf-viewer";

const NGXPDFViewer = () => {
  return (
    <NgxExtendedPdfViewerComponent
      src={
        "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
      }
      useBrowserLocale="true"
    ></NgxExtendedPdfViewerComponent>
  );
};

export default NGXPDFViewer;

However I get the following errors:

Module not found: Error: Can't resolve '@angular/platform-browser'

Module not found: Error: Can't resolve '@angular/forms'

Before I go trying to install Angular modules inside a React app, can someone let me know if this is even possible? I really want to use the ngx-extended-pdf-viewer package because it's the only one I've found with Search and PageNumber capabilities. (Text highlighting I might be able to do myself with CSS)

If this is akin to mixing apples and oranges though then I'll stop here.

Solution

  • This is not possible. Reason: React and Angular are Frameworks. So you write code and they render it to (for the browser) readable html and javascript. And they do more: auto refresh, two way binding, state management.

    All this things are big code parts inside each framework.

    Long story short: react will never know what to do with this unknown angular code. And angular will never know what to do with this unkown react code.

    You cannot mix it in this way.

    Some solutions

    1. Micro frameworks - Webcomponents. You can create webcomponents (@angular/elements) with angular (read more) and add a webcomponent in your react app. A nice solution - but a little work.
    Very short example:

    create project (install angular cli first!!)

    ng new angular-web-component
cd angular-web-component

    add Angular elements

    ng add @angular/elements

    create a component (which can include the pdf viewer)

    ng generate component my-web-component

    add it into app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MyWebComponentComponent } from './my-web-component/my-web-component.component';

@NgModule({
  declarations: [MyWebComponentComponent],
  imports: [BrowserModule],
  entryComponents: [MyWebComponentComponent]
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const webComponent = createCustomElement(MyWebComponentComponent, { injector: this.injector });
    customElements.define('my-web-component', webComponent);
  }
}

    build the angular project

    ng build --prod --output-hashing none

    6. Use in React:

    Add the resulting JS files from the dist/ directory to your React project. This can be done by including tags in the HTML or through other means.

    Then you can use the Web Component in your React code like this:

    function App() {
  return (
    <div className="App">
      <my-web-component></my-web-component>
    </div>
  );
}
    1. Build a little Angular app with the pdf component, build it, and add it into your react app inside a iframe.