Compatibility problems with Angular Ivy

Having issues with ngx-print or ngx-printer in Angular 10, errors seem to be related to Ivy

Check the code here

package.json

{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.2",
    "@angular/common": "~10.1.2",
    "@angular/compiler": "~10.1.2",
    "@angular/core": "~10.1.2",
    "@angular/forms": "~10.1.2",
    "@angular/platform-browser": "~10.1.2",
    "@angular/platform-browser-dynamic": "~10.1.2",
    "@angular/router": "~10.1.2",
    "ngx-print": "^1.2.0-beta.5",
    "ngx-printer": "^0.8.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.2",
    ...
  }
}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxPrinterModule } from 'ngx-printer/lib/ngx-printer.module'; // This line causes an error
import { NgxPrintModule } from 'ngx-print/lib/ngx-print.module'; // This line causes an error

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxPrinterModule.forRoot({printOpenWindow: true}),
    NgxPrintModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ERROR

ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve 'ngx-print/lib/ngx-print.module' in 'D:\angular print\app\src\app'

ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve 'ngx-printer/lib/ngx-printer.module' in 'D:\angular print\app\src\app'

Answer №1

To utilize the functionality, it is necessary to bring in modules from ngx-printer and ngx-print:

import { NgxPrinterModule } from 'ngx-printer';
import { NgxPrintModule } from 'ngx-print';

access stack here

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 error message in TypeScript is indicating that the property 'x' is not found in the type '{}', which is required for a computed key

Description of a Typescript fragment: enum Field { age, bugs, } interface Foo { number_age: number; number_bugs: number; } function createFoo():Foo { let obj = {}; let index = 0; for (let key in Field) { obj['numb ...

Angular is not providing the anticipated outcome

I'm new to Angular (7) and I'm encountering an issue while trying to retrieve the status code from an HTTP request. Here's the code snippet used in a service : checkIfSymbolExists() { return this.http.get(this.url, { observe: 'res ...

Discovering the Steps to Extracting Every Segment of a Route in Angular

If my URL follows this pattern #/desktop/admin/reconciliationconfig/nav/ledger/GMO-DDA-21819971/detail, what is the best way to extract all segments of the route in Angular? The desired output should be ['desktop','admin','reco ...

The comparison between importing and requiring mutable values for export

I'm exploring the distinction between import and require in relation to exporting and importing mutable values. Picture a file a.ts: export let a = 1; export function f() { a = 2; } Next, we have three versions of a main file, index1.ts: import { ...

Understanding Typescript in Next.js components: Deciphering the purpose behind each segment

Consider the following function: type User = { id: string, name: string } interface Props { user: User; } export const getUserInfo: GetUserInfo<User> = async ({ user }: Props) => { const userData = await fetchUser(user.id); return ...

changing the breadcrumb item to a dropdown item in a dynamic way

Hey there, I'm currently working on creating a breadcrumb item using Angular. Here is what I have so far: https://i.stack.imgur.com/zt5yX.png I decided to add a dropdown for the breadcrumb item, but I'm facing a challenge: I want to be able to ...

A helpful guide on troubleshooting the ngx-bootstrap error within Angular-14

While working on my Angular-14 project, I encountered an issue with the package.json file: This is how my package.json looks like: "dependencies": { "@angular/animations": "^14.0.0", "@angular/common": "^14 ...

Sharing API data between components in Angular 5

Summary: I'm trying to retrieve data from an input field in a component form, then compare it using API services. After that, I want to take the value from the "correo" field in the form and pass it to another component. In this other component, I aim ...

How to Invoke a TypeScript Function in Angular 2 Using jQuery

Using the Bootstrap-select dropdown in Angular 2 forms with jQuery, I am attempting to call a Typescript method called onDropDownChangeChange on the onchange event. However, it seems to not be functioning as expected. import { Component, OnInit, ViewChi ...

Discover the proportion of the total area occupied by your own artwork within the figure

Shapes come in many forms, from simple (like a red triangle) to complex (such as a black "U shape"). I am currently drawing a blue shape using my mouse and trying to determine the percentage of the figure covered by the blue color. <!DOCTYPE html> &l ...

How can TypeScript generics be used to create multiple indexes?

Here is an interface snippet: interface A { a1: { a11: string }; a2: { a21: string }; a3: { a31: string }; } I am looking to create a generic type object with indexing based on selected fields from interface A. Here is the pseudo-code exampl ...

Exploring [routerLink] vs routerLink: Unraveling the Distinctions

Can you explain the distinction between [routerLink] and routerLink in Angular routing? What are the advantages of each one and which should be used? Understand the difference ...

Troubleshoot: Angular hide/show feature malfunctioning

I am facing an issue where clicking on one parent element causes all parent elements to show or hide their child elements accordingly. I am relatively new to Angular 2 and would appreciate any recommendations. Below, you can see the code for the component ...

Challenges with the Push Function in Ionic

Every time I attempt to navigate the page by passing data in ionic, I encounter this error message: "this.navctrl.push()" is not functioning as expected. How can I resolve this issue because it's hindering my progress! dishSelected(dish: any) { ...

Displaying API responses in Ionic4 application viewer (HTML) is not functioning properly

Having recently delved into Ionic and Angular, I found a helpful tutorial () that guided me in creating a movie app that works across platforms. To further my learning, I decided to switch to using the API instead of the IMDB API. While I am able to retr ...

When applying css font-weight bold with jsPDF, spaces may be removed from the text

Whenever I apply the font-weight bold in jspdf, it seems to cause the text to lose its spacing. You can compare the before and after images below which were extracted from the pdf file generated: https://i.stack.imgur.com/0BPWP.png Below is the code snipp ...

In what scenario would one require an 'is' predicate instead of utilizing the 'in' operator?

The TypeScript documentation highlights the use of TypeGuards for distinguishing between different types. Examples in the documentation showcase the is predicate and the in operator for this purpose. is predicate: function isFish(pet: Fish | Bird): pet ...

What are the best practices for integrating PrimeVue with CustomElements?

Recently, I decided to incorporate PrimeVue and PrimeFlex into my Vue 3 custom Element. To achieve this, I created a Component using the .ce.vue extension for the sfc mode and utilized defineCustomElement along with customElements.define to compile it as a ...

Exploring the capabilities of supertest by testing endpoints in Express with NodeJS

Having trouble setting up a test environment to test my TypeScript Express Node.js endpoints. Here are the packages I've installed: jest ts-jest jest-junit supertest @types/supertest @types/jest This is how my spec file looks like: imp ...

Angular9 integrated with Firebase to enhance the capabilities of

I am facing an issue with displaying a specific element from the database. //component.html <section class="firee"> <figure class="snip1208"> <div *ngFor="let scholarship of scholarships" > <h3>{{scholarshi ...