Oops! Make sure to explicitly allow the dependency @types/html2canvas by adding it to the "allowedNonPeerDependencies" option

After installing the html2canvas package in my Angular library project, I encountered an error when compiling in production mode using the command ng build --prod. The specific error message is as follows:

ERROR: Dependency @types/html2canvas must be explicitly allowed using the "allowedNonPeerDependencies" option.

What steps should I take to resolve this issue?

Answer №1

One way to include the library in your project is by adding it to the peerDependencies section of your package.json. This method is recommended as it clearly shows others that your library relies on additional libraries:

{
    ...
    "scripts": {...},
    "peerDependencies": {
        ...
        "@types/html2canvas": "0.0.36",
        ...
    },
}

Alternatively, you can specify this option in your ng-package.json file:

{
    ...
    "lib": {
        "entryFile": "src/public-api.ts"
    },
    "allowedNonPeerDependencies": [
        "@type/html2canvas"
    ]
    ...
}

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

Conflicting Angular controller names within different modules

I'm facing an issue where two modules (A and B) with controllers of the same name are conflicting when imported into module C. Is there a recommended solution to prevent this conflict, such as using a naming convention like "module.controller" for ea ...

The whereabouts of the node_modules folder during the development phase

As I dive into Angular 2 app development, I encountered an issue. Installing node modules in each project folder using npm install seems to be taking up a lot of disk space and causing duplication across multiple projects. This led me to consider creating ...

What steps can I take to eliminate the warning "Warning: Prop `style` did not match" that appears when I bring in the Image component in Next.js?

Hi there! I'm encountering a warning when trying to import an image using the Image component in nextjs. The warning message reads: Warning: Prop style did not match. Server: "display: block; max-width: 100%; width: initial; height: initial; ba ...

Is there a way to link a particular model table with a designated user table?

Hey everyone, I'm new to stack overflow and this is my first question. I hope it's clear enough for you all to understand. I'm currently working on a budget API using Node.js, Sequelize, Express, and PostgreSQL. The API allows users to add/ ...

What's causing the member to be undefined?

client.on('raw', (e) => { if (e.t === 'MESSAGE_REACTION_ADD' && e.d.message_id === '813150433651851265' && e.d.emoji.name === "✅" ) { const guild = client.guilds.cache.get(e.d.gui ...

Sluggish performance of Zombie.js on VirtualBox shared directory

I am currently experimenting with using Zombie in my Node.js project. The project is running within a shared folder on a VirtualBox VM, and I've noticed a significant decrease in performance when Zombie is installed locally rather than globally. For ...

Exporting enums within types in React Typescript

Here are the files I have: VehicleBrands.ts: export enum VehicleBrands { FORD = "ford", HONDA = "honda" } VehicleBrand.ts: import {VehicleBrands} from "./VehicleBrands"; export type VehicleBrand = VehicleBrands.FORD | V ...

Understanding how to extract and utilize the display name of enums from a C# Web API within an Angular

Within my C# web API, I have established an enum with a designated display name: public enum Countries { Australia, [Display(Name="New Zealand")] NewZealand } To showcase this list in a dropdown menu within my Angular project, I transmit ...

Incorporate the casper function within the casper.evaluate() method

Is it possible to use the casper function inside casper.evaluate() with jQuery code? I need to iterate through elements in a way similar to how jQuery does. I have loaded the jquery.js library. Here is the script I have tried: casper.evaluate(function() ...

Attempting to generate a fresh document by duplicating the data from a specific variable

Currently attempting to generate a new csv file within a specific directory. The goal is to save the data of a variable inside the created csv file: handleRequest(req, res) { var svcReq = req.body.svcReq; var csvRecData = JSON.stringify(req.bod ...

Developing new Azure AD users through Angular using MSAL.js

Is it feasible, from the perspective of Web Applications, for a user to create an Azure AD account by inputting their email, name, phone number, and other details that can then be forwarded to Azure AD through the web application? I am currently exploring ...

Interactive YouTube Video Player that keeps video playing in original spot upon clicking the button

Currently, I'm working on a project that involves combining navigation and a video player within the same div container. Here is an image link And another image link The concept is that when you click on one of the four boxes, a new video will appe ...

Is an Event Bus necessary for sibling communication? Or can a parent send its data as a prop instead?

After watching a tutorial on using an event bus to communicate between sibling components in Vue, I came across an interesting approach. The tutorial demonstrated passing data from a parent component to child components as props, then modifying that prop i ...

Can you import folders containing *.vue files in your project?

Repeating code is my least favorite thing. Currently, I am importing vue files in a repetitive manner in my main.js file. import Default from '../../src/components/default.vue'; import Home from '../../src/components/home.vue&apo ...

Global variables become undefined after utilizing jQuery's getScript() method for assignment

I have a few global variables named var1, var2, and so on... Instead of immediately initializing these variables, I wait until later to instantiate them using jQuery from a constructor located in a separate javascript file. However, after this instantiat ...

Angular implementation of reverse geocoding

retrieveAddress(lat: number, lng: number) { console.log('Locating Address'); if (navigator.geolocation) { let geocoder = new google.maps.Geocoder(); let latlng = new google.maps.LatLng(lat, lng); let request = { LatLng: latlng }; ...

Updating the Backbone.js model within a MySQL database

I am facing an issue with my model setup: var Car = Backbone.Model.extend({ url: "/save.php", defaults: { color: "red" } }); Upon document ready, I initialize a new instance of the model and save it: new volvo = new Car({color:"gree ...

Why isn't offsetTop working for a div within a table in HTML and Javascript?

When using the offsetTop property to get the absolute position of an object, it works fine when the objects are outside of tables. However, if the object is inside a table, it always returns 1. Why does this happen and how can it be avoided? To see an exa ...

Removing API request in React.js

My approach: deleteSample = () => { this.sampleService .deleteCall(this.props.id) .then((response) => { window.location.reload(false); }) .catch((error) => { console.log ...

Choose a row by selecting the checkbox in the Kendo UI grid using TypeScript

I'm just starting out with Kendo UI and Angular 2, and I'm currently working on integrating Kendo UI with Angular 2. Specifically, I have a Grid Module set up with checkboxes in each row. My goal is to extract the row ID or any other field value ...