search

selemxmn / ngx-print

:printer: A plug n' play Angular (2++) library to print your stuff
MIT License
164 stars 59 forks source link

Not Working With Angular 8 #51

Closed Anky28 closed 4 years ago

Anky28 commented 5 years ago

The ngx-print is not working with angular 8.

junaidlodhi22 commented 5 years ago

[useExistingCss] not working with Angular 8, though it is printing without CSS

macshooo commented 5 years ago

What are different workarounds on this? Experiencing the same problem

varunkhambra commented 5 years ago

@Anky28 What kind of issues you are facing, can you please add some script or error description , as i currently upgraded my angular version to 8.2.6 and it is working perfectly fine, even i put my code to production and it is running without any error so far.

Anky28 commented 5 years ago

@varunkhambra I have Angular version - 8.0.0 ngx-print version - ^1.2.0-beta.3

I am not getting any console error or compile time error. But print is empty.

varunkhambra commented 5 years ago

@Anky28 i am using the same version.

"@angular/animations": "^8.2.6", "@angular/cdk": "^8.2.0", "@angular/common": "^8.1.1", "@angular/core": "^8.2.6", "@angular/forms": "^8.2.6", "@angular/material": "^8.2.0", "@angular/material-moment-adapter": "^8.2.0", "@angular/platform-browser": "^8.2.6", "@angular/platform-browser-dynamic": "^8.2.6", "@angular/router": "^8.2.6", "@angular/upgrade": "^8.2.6", "ngx-print": "^1.2.0-beta.3",

varunkhambra commented 5 years ago

@Anky28 can you atleast post your code or create a stackblitz, so the issue can be reproduced

Anky28 commented 5 years ago

package.json 


{
  "name": "xyz",
  "version": "7.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "publish": "ng build --prod",
    "start": "ng serve --host 0.0.0.0 --port 4200",
    "hmr": "ng serve --host 0.0.0.0 --port 4200 --hmr",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "^8.2.1",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "^8.0.0",
    "@angular/compiler": "^8.0.0",
    "@angular/core": "^8.0.0",
    "@angular/forms": "^8.0.0",
    "@angular/platform-browser": "^8.0.0",
    "@angular/platform-browser-dynamic": "^8.0.0",
    "@angular/platform-server": "^8.0.0",
    "@angular/router": "^8.0.0",
    "@aspnet/signalr": "^1.1.4",
    "@ng-bootstrap/ng-bootstrap": "^5.1.0",
    "@rxweb/reactive-form-validators": "^1.9.1",
    "@swimlane/ngx-charts": "^11.1.0",
    "abp-ng2-module": "^3.2.4",
    "abp-web-resources": "^3.8.5",
    "adal-angular": "^1.0.17",
    "amazing-time-picker": "^1.8.0",
    "angular-oauth2-oidc": "^5.0.2",
    "angular2-counto": "^1.2.5",
    "angular2-text-mask": "^9.0.0",
    "animate.css": "^3.7.1",
    "cookieconsent": "^3.1.1",
    "core-js": "^3.1.3",
    "famfamfam-flags": "^1.0.0",
    "html2canvas": "^1.0.0-rc.3",
    "install": "^0.13.0",
    "js-cookie": "^2.2.0",
    "jspdf": "^1.5.3",
    "localforage": "^1.7.3",
    "lodash": "^4.17.11",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.25",
    "ng-recaptcha": "^4.2.1",
    "ng2-file-upload": "^1.3.0",
    "ngx-barcode": "^0.2.4",
    "ngx-bootstrap": "^4.3.0",
    "ngx-google-places-autocomplete": "^2.0.3",
    "ngx-image-cropper": "^1.3.10",
    "ngx-material-timepicker": "^4.0.1",
    "ngx-perfect-scrollbar": "^7.2.1",
    "ngx-print": "^1.2.0-beta.3",
    "object-path": "^0.11.4",
    "primeicons": "^1.0.0",
    "primeng": "^7.1.3",
    "push.js": "^1.0.9",
    "quill": "^1.3.6",
    "rtl-detect": "^1.0.2",
    "rxjs": "^6.5.2",
    "simple-line-icons": "^2.4.1",
    "sweetalert2": "^8.11.6",
    "text-mask-addons": "^3.8.0",
    "zone.js": "~0.9.1",
    "html-to-image": "0.1.1",
    "file-saver": "2.0.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.1",
    "@angular/cli": "^8.0.1",
    "@angular/compiler-cli": "^8.0.0",
    "@angularclass/hmr": "^2.1.3",
    "@angularclass/hmr-loader": "^3.0.4",
    "@types/jasmine": "~3.3.13",
    "@types/jasminewd2": "~2.0.6",
    "@types/lodash": "^4.14.133",
    "@types/moment-duration-format": "^2.2.2",
    "@types/moment-timezone": "^0.5.12",
    "@types/node": "^12.0.4",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "nswag": "12.3.1",
    "protractor": "~5.4.2",
    "ts-node": "~8.2.0",
    "tslint": "~5.17.0",
    "typescript": "3.4.5"
  }
}

main-module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppCommonModule } from '@app/shared/common/app-common.module';
import { NgxPrintModule } from 'ngx-print';

NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales();

@NgModule({
    imports: [
        NgxPrintModule,
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
       AppCommonModule
],
    declarations: [],
    providers: [
        { provide: BsDatepickerConfig, useFactory: NgxBootstrapDatePickerConfigService.getDatepickerConfig },
        { provide: BsDaterangepickerConfig, useFactory: NgxBootstrapDatePickerConfigService.getDaterangepickerConfig },
        { provide: BsLocaleService, useFactory: NgxBootstrapDatePickerConfigService.getDatepickerLocale }
    ]
})
export class MainModule { }

invoice.component.html


<button printSectionId="printInvoice" ngxPrint>print</button> 

<div id="printInvoice"> 
  <div class="form-group m-form__group row kt-padding-3">
                        <div class="col-xl-8 col-lg-8 col-form-label  m-md-n2 ">
                            <h5 class="label">{{appSession.tenant.name}}</h5>
                        </div>
                    </div>
                    <div class="form-group m-form__group row kt-padding-3">
                        <label class="col-xl-8 col-lg-8 col-form-label  m-md-n2 label">
                            {{appSession.tenant.address1}}
                        </label>
                    </div>
                    <div class="form-group m-form__group row kt-padding-3">
                        <label class="col-xl-8 col-lg-8 col-form-label  m-md-n2 label">
                            {{appSession.tenant.city}}, {{appSession.tenant.state}} {{appSession.tenant.zipcode}}
                        </label>
                    </div>
                    <div class="form-group m-form__group row kt-padding-3">
                        <label class="label">
                            {{l("Tel")}} :
                        </label>
                        <div class="col-xl-4 col-lg-4 label">
                            {{appSession.tenant.telePhoneNumber}}
                        </div>
                    </div>
</div>
varunkhambra commented 5 years ago

@Anky28 i dont think there is anything wrong here, it should work. for you, when you click print does a new window opens up?? and then it shows blank or the styling is missing?

ttupper92618 commented 5 years ago

Just to add my 2 cents worth, I'm having no issues here, having just updated a project to 8:

ng update @angular/cli @angular/core

 Updating package.json with dependency @angular/cli @ "8.3.5" (was "7.3.9")...
    Updating package.json with dependency @angular/compiler-cli @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular/language-service @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular/core @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular/common @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular/animations @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular/compiler @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular/platform-browser @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular/router @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency rxjs @ "6.5.3" (was "6.3.3")...
    Updating package.json with dependency @angular/forms @ "8.2.7" (was "7.2.15")...
    Updating package.json with dependency @angular-devkit/build-angular @ "0.803.5" (was "0.13.9")...
    Updating package.json with dependency zone.js @ "0.9.1" (was "0.8.29")...
    Updating package.json with dependency typescript @ "3.5.3" (was "3.2.4")...

I'm using [useExistingCss] and it works as expected.

Snow1501 commented 5 years ago

I temporarily fixed by editing your library. So I think you need to update your function like this. It works with 'prod' model. Editing "getElementTag" function.

getElementTag(tag) {
        /** @type {?} */
        const html = [];
        /** @type {?} */
        const elements = document.getElementsByTagName(tag);
        if (tag == 'link') {
            for (let index = 0; index < elements.length; index++) {
                if (elements[index].rel == 'stylesheet') {
                    html.push('<link rel="stylesheet" href="' + elements[index].href + '">');
                }
            }
        } else {
            for (let index = 0; index < elements.length; index++) {
                html.push(elements[index].outerHTML);
            }
        }
        return html.join('\r\n');
    }
rodrigojrmartinez commented 4 years ago

I have the same problem. The printing works since it opens the preview, but no css is applied, not the existing one, neither the one imported from the stylesheet attribute. This seems quite a problem since it makes it almost useless to use the library, at least with angular 8

mohamedElkast commented 4 years ago

I have also the same issue, there is no CSS style work when I use [useExistingCss], Can anyone help to solve this problem?

certifirm commented 4 years ago

I temporarily fixed by editing your library. So I think you need to update your function like this. It works with 'prod' model. Editing "getElementTag" function.

getElementTag(tag) {
        /** @type {?} */
        const html = [];
        /** @type {?} */
        const elements = document.getElementsByTagName(tag);
        if (tag == 'link') {
            for (let index = 0; index < elements.length; index++) {
                if (elements[index].rel == 'stylesheet') {
                    html.push('<link rel="stylesheet" href="' + elements[index].href + '">');
                }
            }
        } else {
            for (let index = 0; index < elements.length; index++) {
                html.push(elements[index].outerHTML);
            }
        }
        return html.join('\r\n');
    }

I tried but not works.

hope4555 commented 4 years ago

this is the only think that is working for me:

[printStyle]="{div : { 'border': 'thin solid #333333', 'text-align':'center', 'direction':'rtl', 'border-radius': '10px', 'padding': '10px', 'line-height': '30px', 'font-weight': 'bold', 'font-size': 'x-large', 'font-family': 'monospace', 'width': '206px' }
}"

hope4555 commented 4 years ago

styleSheetFile not working for me (angular8) and [useExistingCss] also not working

pYassine commented 4 years ago

Same problem. In production mode, "useExistingCss" is not working

kahanu commented 4 years ago

I found what works for me.

If I have a large application where I've created Feature Modules, and I import the NgxPrintModule to the AppModule, it doesn't work.

But when I import NgxPrintModule to the FeatureModule where it's implemented, it works!

I makes sense to add this module to your SharedModule that contains the collection of shared modules you use throughout your application. Then you can easily import it to any necessary feature module.

Also, all attributes work, such as [useExistingCss]="true".

Note: this works in development so far. It has not been tested in production yet. I'll come back and post my result for that later.

I hope this helps.

aingerusanchez commented 4 years ago

If I have a large application where I've created Feature Modules, and I import the NgxPrintModule to the AppModule, it doesn't work.

But when I import NgxPrintModule to the FeatureModule where it's implemented, it works!

This works for me, but when I enable [useExistingCss]="true" the print preview goes blank.

My workspace:

Ionic:

   Ionic CLI                     : 5.4.14 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.2
   @angular/cli                  : 7.3.2
   @ionic/angular-toolkit        : 1.5.1
varunkhambra commented 4 years ago

I suggest, try using media query for print in css as well, it works for me. e.g. @media print{ @page {size: portrait} .printTD{ display: inherit; } thead { display: table-row-group }

td{ overflow-wrap: break-word; word-break: break-word; } }

junaidlodhi22 commented 4 years ago

useExistingCss was added in beta version... So not using this module for printing...what i did i used all bootstrap classes only for the div which i need printing and just included bootstrap cdn while printing in the document... this solved the issue... you can also css in the style in the new document when printing

ganholete commented 4 years ago

Same problem with useExistingCss, multiple modules and prod mode

ganholete commented 4 years ago

I found what works for me.

If I have a large application where I've created Feature Modules, and I import the NgxPrintModule to the AppModule, it doesn't work.

But when I import NgxPrintModule to the FeatureModule where it's implemented, it works!

I makes sense to add this module to your SharedModule that contains the collection of shared modules you use throughout your application. Then you can easily import it to any necessary feature module.

Also, all attributes work, such as [useExistingCss]="true".

Note: this works in development so far. It has not been tested in production yet. I'll come back and post my result for that later.

I hope this helps.

not work in prod mode

ranga26 commented 4 years ago

Use [useExistingCss]="true"

on scss add @media print, with all css classes:

@media print { / print only styling /

demo {

border:1px solid #000; } }

I hope this helps.

pcoombe commented 4 years ago

But when I import NgxPrintModule to the FeatureModule where it's implemented, it works!

this made it "work" for me, had to be the closest module to where it was used couldnt add it to the app or the lazy loaded module, had to be the feature module

but didnt quite behave how i expected, any html content was fine, but any input controls didnt display values. im also using angular material

broem commented 4 years ago

The discussion has got a little off topic so I can address the 3 main issues posed here. I am unable to reproduce anything broken in Angular 8 or 9, in the initial snip @Anky28 provided everything seems in order I would just make sure that your importing the module into the same module your component is in. The reason this needs to be done is because ngx-print is a directive and has those same scopes as other directives, pipes, components, etc.

I am able to remedy the missing css when using [useExistingCss] in --prod builds by wrapping my style in @ media print {} as @ranga26 pointed out, I think this is closer to the intended functionality and can update the readme as this isn't very clear.

And for the missing input values @pcoombe and others have brought up there is a PR currently out for it. I'm going to close the issue since the original issue seems to be more or less resolved.

nisha2107 commented 4 years ago

Hello,

After importing module into the same module as component. The dynamic css is not loaded. Angular CLI: 8.3.0 "ngx-print": "^1.2.0-beta.4",

Issue started after application upgraded to Angular 8.

is there any workaround for this?

evolmk commented 4 years ago

I'm on Angular 9. I couldn't get Button to fire anything when id had a hyphen like id="print-section, but this works fine: id="printSection"

zeshanvirk commented 4 years ago

+1 [useExistingCss]="true" not working on production in Angular 9

Rodolfo-XDR commented 4 years ago

Angular 9 [useExistingCss] not working only on Production mode.

Phosphorus-M commented 3 years ago

Any solution? I'm using Angular 8 and I have the same problem.

varunkhambra commented 3 years ago

Like i said before, for me it works with angular8.

Sent from Yahoo Mail on Android

On Thu, Mar 4, 2021 at 7:58 AM, Phosphorus Moscunotifications@github.com wrote:

Any solution? I'm using Angular 8 and I have the same problem.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Phosphorus-M commented 3 years ago

Oh okay, I'm sorry, the solution is to add the NgxPrintModule inside of the providers @NgModule({ imports: [NgxPrintModule], providers: [NgxPrintModule], }

weeken88 commented 3 years ago

Faced this problem as well after an update. Here's a workaround that might help anyone that's facing a blank preview page when useExistingCss is true: in your custom css, add (add this to your @media print css as well): body{ display: block!important; }

To fix production build not loading custom css: -open the index.html created after ng build --prod. -look for : <link rel="stylesheet" href="styles.<hash>.css"> -add "/" before styles --> <link rel="stylesheet" href="/styles.<hash>.css"> -save.

Hope this helps.

Anasfjk commented 3 months ago

[closeWindow] not working with Angular 8. ngx-print 1.2.1

ranga26 commented 3 months ago

Try with version 1.2.0-beta.5 on Angular 8