Currently utilizing Angular 9 with the Ivy compiler, my goal is to showcase a PDF file in a preview format. Simple solution being the ngx-doc-viewer, however encountering errors during implementation

Errors detected in ngx-doc-viewer module:

  • "CommonModule" export cannot be imported from non-EcmaScript module
  • "Component" export cannot be imported from non-EcmaScript module
  • "DomSanitizer" export cannot be imported from non-EcmaScript module
  • "EventEmitter" export cannot be imported from non-EcmaScript module
  • "Input" export cannot be imported from non-EcmaScript module
  • "NgIf" export cannot be imported from non-EcmaScript module
  • "NgModule" export cannot be imported from non-EcmaScript module
  • "NgZone" export cannot be imported from non-EcmaScript module
  • "Output" export cannot be imported from non-EcmaScript module
  • "ViewChildren" export cannot be imported from non-EcmaScript module
  • "__awaiter" export cannot be imported from non-EcmaScript module
  • "getDocxToHtml" export cannot be imported from non-EcmaScript module
  • "getViewerDetails" export cannot be imported from non-EcmaScript module
  • "googleCheckSubscription" export cannot be imported from non-EcmaScript module
  • "iframeIsLoaded" export cannot be imported from non-EcmaScript module
  • "isLocalFile" export cannot be imported from non-EcmaScript module
  • "replaceLocalUrl" export cannot be imported from non-EcmaScript module
  • "ɵɵFactoryTarget" export cannot be imported from non-EcmaScript module
  • "ɵɵngDeclareClassMetadata" export cannot be imported from non-EcmaScript module
  • "ɵɵngDeclareComponent" export cannot be imported from non-EcmaScript module
  • "ɵɵngDeclareFactory" export cannot be imported from non-EcmaScript module
  • "ɵɵngDeclareInjector" export cannot be imported from non-EcmaScript module
  • "ɵɵngDeclareNgModule" export cannot be imported from non-EcmaScript module
angulartypescriptngx-doc-viewer

Answer №1

I faced a similar issue and managed to resolve it by downgrading the version of ngx-doc-viewer. The problem stemmed from my tslib having an incompatible lower version than what was required. It is essential to ensure compatibility between the ngx-doc-viewer version and your tslib version. Additionally, verify if you have the necessary dependency docviewhelper. To better understand the requirements, refer to your package-lock.json file.

"ngx-doc-viewer": {
  "version": "2.1.2",
  "resolved": "https://registry.npmjs.org/ngx-doc-viewer/-/ngx-doc-viewer-2.1.2.tgz",
  "integrity": "sha512-TuWSWGl1sCGe9w3oSiL93DeOr4JdCKb79ImnFv696AHi81zNFzwZs6RRV95nusoh6YTmBORra7D2oDDh6yeXWw==",
  "requires": {
    "docviewhelper": ">= 0.0.1",
    "tslib": "^2.3.0"
  },

Another approach to resolving this issue is to exclude the "^" in the ngx-doc-viewer version in the package.json file. Instead of "ngx-doc-viewer": "^2.1.2", use "ngx-doc-viewer": "2.1.2".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The process of transferring a list of objects to another in Typescript

There seems to be an issue with copying values from "all" to "available" and sometimes not getting the value from "available" as well. I've tried multiple methods like using slice(), Array.from(), and simply assigning with =, but none of them seem to ...

angulartypescript-typings

Ways to invoke a slice reducer from a library rather than a React component

I've been working on a React application using the React Boilerplate CRA Template as my foundation. This boilerplate utilizes Redux with slices, which is great for updating state within a React component. However, I'm facing a challenge when try ...

reactjstypescriptreact-redux

Fetching URL from Right Before Logging Out in Angular 2 Application

I am struggling to capture the last active URL before logging a user out of my Angular 2 app. My goal is to redirect them back to the same component or page once they log back in. Currently, I am using this.router.routerState.snapshot['url'] to r ...

javascriptangulartypescriptroutes

What is the best way to call my template's object in Angular?

I am working on a project that involves an array of notifications, which I then add to the template using *ngFor. I need help figuring out how to pass data about the current notification from the template to be able to delete it from the array. Here' ...

javascriptarraysangular

Converting intricate JSON objects into a class using Typescript and Angular 5

I am attempting to transform a complex JSON response object (received from my Node.js/Mongoose backend) into a TypeScript class that contains multiple type classes. A Moment class includes an author of type User and a comments array of type Comment. mome ...

javascriptnode.jsangulartypescriptmongoose

Utilize the npm module directly in your codebase

I am seeking guidance on how to import the source code from vue-form-generator in order to make some modifications. As a newcomer to Node and Javascript, I am feeling quite lost. Can someone assist me with the necessary steps? Since my Vue project utilize ...

javascripttypescriptnpmvue.js

Determine the type of input and output based on another argument

When working with a function that takes an object of either TypeA or TypeB, the first parameter is used to specify the type of the object and the returned type depends on this first parameter. The issue arises in TypeScript where the type of the object is ...

typescript

Exploring Objects with Union Types in TypeScript

Looking to iterate through an object that combines two interfaces. interface Family { cat: string; age: string; family: string; lastYearFamily: string; } interface Model { cat: string; age: string; ...

typescript

Angular menu with nested dropdowns

Is it possible to create a nested select menu similar to the example select screenshot menu below, using my mat-select? When a user selects an item from the REPM mat select, it should display the Master Broker Company menu on the right side. Thanks. #exam ...

javascriptangulartypescriptangular-material

A Guide to Implementing Schema.virtual in TypeScript

After switching from using schema.virtual in JavaScript to TypeScript, I encountered an error when trying to use it with TypeScript. Below is my code: UserSchema.virtual('fullname').get(function () { return `${this.firstName} ${this.lastName}` ...

node.jstypescriptexpressmongoosemern

Accessing Properties or Methods in Angular2 Components

My application consists of 3 main components: PageMenu, LoginSession, and LoginForm. The purpose is to establish a connection between the variables in LoginSession and PageMenu, allowing for the proper functionality of the LoginForm component. PageMenu: ...

typescriptangularangular2-directives

Is it possible to utilize TypeScript version 2.0.6 in conjunction with Visual Studio 2017?

Is it possible to utilize TypeScript 2.0.6 with Visual Studio 2017, or do I need to use a version greater than 2.1? Also, can you explain the difference between Microsoft.TypeScript.Compiler and Microsoft.TypeScript.MSBuild? If I don't have Microsof ...

visual-studiotypescript

Dragging and dropping in Angular does not move to the intended location within a mat dialog

Attempting to manipulate the order of a lengthy list by dragging and dropping items. In a basic component, moving an item is uncomplicated - able to drag it anywhere within the list. While dragging, can scroll through contents beyond visible range and dro ...

angulardrag-and-drop

Programmatically defining the state of the form and inputs as "ng-dirty"

This is my first time dealing with Angular or Angular2, but I've been tasked with updating a website on my domain that uses Angular2. I need to fill out a textbox and submit it programmatically, however even after setting the textbox value using .valu ...

javascriptangular

The requested resource on localhost does not have the 'Access-Control-Allow-Origin' header

I'm having trouble connecting to the Ebay API from my local server. Every time I try, I encounter this error message: The requested resource does not have the 'Access-Control-Allow-Origin' header. This means that the origin 'http://l ...

jsonapiangularlocalhost

Using conditional buttons with ngSwitch in conjunction with ngFor to render a list of buttons from an asynchronously pip

I can't seem to figure out a logic error I am experiencing. Apart from the issue with my code, why does Angular restrict me from doing this? The purpose of using the conditional switch is to have drop-down menus for different models such as Gender. I ...

angularcomponentsangular2-directives

Is it possible to locate a specific entry by searching within an array data type in Firebase using Angular 6?

I am facing a challenge with firebase collection as I have an array type key that stores numerous ids. I need to find the value by searching for one specific id within that array type value. Is there a where clause query available in firebase for Angular 6 ...

angularfirebaseangular5angular6angular2-services

Encountering a Problem Configuring Jest in Angular 9 Using angular-jest-preset

Currently in the process of setting up Jest for Angular 9 using jest-preset-angular version 9. The code is running, but encountering the error: Error: Cannot read property 'ngModule' of null Uncertain on how to troubleshoot this issue. https:/ ...

angularjestjsts-jest

Saving the name and corresponding value of a selected option element into separate fields using Angular framework

I have implemented the following code to generate a select field. The ngModel is successfully updating the value, but I am also looking to capture the name of the selected option and store it in a different field. Is there a solution to achieve this? ( & ...

htmlangular

Angular lifecycle event

When using the Firebase JS SDK in an Angular project and implementing lifecycle hooks, such as afterViewInit, I noticed that the console message repeats infinitely. How can I ensure that the message only appears once in the console? Thank you for any help ...

angularhooklifecycle