Angular 6 is not recognizing 'pdf-viewer' as a valid object when using ng2-pdf-viewer

My goal is to incorporate the ng2-pdf-viewer module into my Angular 6 application using webpack.

I have carefully followed the guidelines for adding this module which can be found at;

ng2-pdf-viewer instructions

The necessary entry has been added to my package.json file, as shown below;

{
  "name": "myApp",
  "private": true,
  [...]
}

I have verified that the ng2-pdf-viewer folder exists in my node_modules directory.

Next, I made additions to my app.module.ts file like so;

[...]

In my press.component.html, the following code snippet was included;

[...]

However, upon running npm run webpack-production, the following error message is displayed;

[...]

If anyone could shed some light on why this error is happening and provide a solution, it would be greatly appreciated.

Answer №1

The reason for this error is that Angular cannot locate the PdfViewerModule. It appears that there is a sub module where the declaration of PdfViewerModule is missing. Are you using a sub module called 'press.module.js'?

Answer №2

If you find yourself in this scenario, the issue lies in the PdfViewer example using the AppComponent to display the pdfViewer demo. However, most of us will be placing the pdf-viewer tag within a page module.

Therefore, instead of importing PdfViewerModule in the app.module.ts file, simply import it in your page's module file (your-page.module.ts).

Answer №3

Like many others, I encountered an error that had stumped numerous people. After several failed attempts, I found a solution by adding 'providers:[PdfViewerComponent]' to the array within Angular 9:

In app.module.ts, I included the following:

import { PdfViewerModule, PdfViewerComponent } from 'ng2-pdf-viewer';

imports:[PdfViewerModule]

providers:[PdfViewerComponent ]

Alternatively, if you prefer placing 'providers:[PdfViewerComponent ]' directly within YourComponent in app.module.ts, you can do so inside

@Component({ selector:'bla', templateUrl:'bla', styleUrls:['bla'] , providers: [PdfViewerComponent ] })

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

Securing Angular 2: How to Safely Store PassportJS Tokens

How can I retrieve the token generated from the provided express code snippet after a user logs in via Facebook, is stored in the database, and is redirected to /auth/facebook/callback? I want to fetch this token using either callbacks, promises, or obse ...

The type '{ }' does not include the properties 'params', 'isExact', 'path', 'url' from the 'match<Identifiable>' type

Currently, I am utilizing react router and typescript in order to extract the id variable from a route for use in a component. However, typescript is raising an issue: The type '{}' lacks the following properties found in type 'match' ...

Angular directive for converting fields to title case

I have created a custom directive to transform all table column data into titlecase. The directive I implemented is designed to achieve this transformation, keeping in mind that pipes are not being counted: @Directive({ selector: '[appTitleCase]' ...

Warning: React Hook Form, NumericFormat, and Material-UI's TextField combination may trigger a reference alert

I'm currently working on a Next.js project using TypeScript and MUI. I'm in the process of creating a form that includes a numeric field for monetary values. In order to validate all fields upon form submission, I have decided to utilize yup, rea ...

How can TypeScript and MobX work together using Set()?

I'm encountering errors while trying to implement Set() in my Grocery Shopping app using MobX with TypeScript. I have a simple setup with defined types in types.ts: types.ts export type Item = { name: string; instock: number; price: number; }; ...

The correct method to effectively type out a JSON object

Recently, I came across an article on that mentioned the possibility of importing JSON objects into a TypeScript project. Intrigued, I decided to give it a try by importing the following JSON: { "defaultLanguage": "en", "languageMap": { "en": "En ...

Creating a form with required fields in Angular and using the ngIf directive

Update: modified the sample code to incorporate TypeScript for better clarity I have a form with various buttons for users to choose from. The submit button is initially disabled until a user selects a button. However, there's a unique requirement wh ...

Are there more efficient methods for utilizing local scope when defining a variable?

Having experience in the ML world, I'm used to creating variables with limited scope like this: let myVar = let result1 = doSomething() let result2 = doSomethingElse() result1 + result2 In TypeScript, it seems you can achieve similar sco ...

What is causing the warnings for a functional TypeScript multidimensional array?

I have an array of individuals stored in a nested associative array structure. Each individual is assigned to a specific location, and each location is associated with a particular timezone. Here is how I have defined my variables: interface AssociativeArr ...

Encountering a problem with node-sass during asset compilation - npm

I encountered an issue while running npm run prod npm run prod > @ prod /opt/atlassian/pipelines/agent/build > encore production Running webpack ... ERROR Failed to compile with 2 errors4:15:08 PM error in ./web/assets/src/scss/styles.scss Module ...

Is there a way to view Deno's transpiled JavaScript code while coding in TypeScript?

As I dive into Typescript with Deno, I am curious about how to view the JavaScript result. Are there any command line options that I may have overlooked in the documentation? P.S. I understand that Deno does not require a compilation step, but ultimately ...

Incorporate matTooltip dynamically into text for targeted keywords

I'm currently tackling a challenge in my personal Angular project that utilizes Angular Material. I'm struggling to find a solution for the following issue: For instance, I have a lengthy text passage like this: When you take the Dodge action, ...

Setting the value of a dropdown menu by updating a form

Currently, I am utilizing a select element with Angular: <select class="form-select form-select-md" formControlName="MaritalStatus"> <option value="0" selected>Select...</option> <option *ngFor=&qu ...

``Moving from a React application built on Create React App (CRA) to React with Vite

Upon creating the same React project with a different bundler pack, I encountered an error. This time, I used Vite to build the project. Textillate import $ from 'jquery'; import 'animate.css'; window.jQuery = $; require('textilla ...

Giving imported node modules access to React Context

Can you import a React component from node_modules in ES6, where the component depends on a Context Provider (such as react-redux 6.0), without the Provider Context being exported by that module? One possible implementation is to wrap the imported compone ...

Leveraging Angular's HTTPClients: merging multiple HTTP requests with Observables to optimize asynchronous operations

In my HTML code, I have the following: <ng-container *ngIf="lstSearchResults|async as resultList; else searching"> ... <cdk-virtual-scroll-viewport class="scroll-container"> <div *cdkVirtualFor="let search of resultList" class="card ...

Dynamic TypeScript class constructor argument typing determined by user input

I am working on creating a dynamic class that can adapt its argument properties based on a certain value. To illustrate this concept, let's consider a simple example: Imagine I have a class called Customizer, and depending on the value of the mode pr ...

You were supposed to provide 2 arguments, but you only gave 1.ts(2554)

Hey everyone, I hope you're having a good morning. Apologies for the inconvenience, I've been practicing to improve my skills and encountered an issue while working on a login feature. I'm trying to connect it to an API but facing a strange ...

Typescript encountering difficulty in accessing an array saved in sessionStorage

Imagine you have an array stored as a string in session storage, and you need to retrieve it, add an element, and then save it back. trackNavHistory = (path: String) => { let historyArr : Array<String> = sessionStorage.getItem("navHistory ...

There is currently no initialized firebase.app.App instance within the Angular Application

While working on my web application with firebase mobile authentication, I encountered an issue with the recaptchaVerifier. It's giving an error when the recaptchaVerifier is not displayed. My project is already using the realtime database, which is f ...