pdfmake with Angular 4 and webpack

[dushkostanoeski]

I tried the solutions proposed in #1058 but I'm using webpack not @angular/cli.
I defined the scripts in vendor.ts like this:

import 'pdfmake/build/pdfmake';
import 'pdfmake/build/vfs_fonts';

And I also declared pdfMake in my ProvidePlugin

new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        pdfMake: 'pdfmake'
    }),

But how do I declare pdfFonts ? If I don't declare it, I get this error:
ERROR Error: File 'Roboto-Regular.ttf' not found in virtual file system

and if I do, I get this:
Could not find a declaration file for module 'pdfmake/build/pdfmake'

My component looks something like this ( removed the non-essential code and

//imports
declare var pdfMake: any;
declare var pdfFonts: any;

@Component....
export class MyComponent {
    constructor () {
         pdfMake.vfs = pdfFonts.pdfMake.vfs;
    }

    printFile () {
         var dd = { content: 'your pdf data' };
         pdfMake.createPdf(dd).download();
    }   
}

[Ragnarok99]

Hi, @dushkostanoeski

var pdfMake = require('pdfmake/build/pdfmake.js');
var pdfFonts = require('pdfmake/build/vfs_fonts.js');
pdfMake.vfs = pdfFonts.pdfMake.vfs; 

this fix it for me

[dushkostanoeski]

Yup, this worked for me too, thanks!

The thing that bugs me is that it's not the angular way :)

[Eamonnzhang]

@dushkostanoeski hi, can you tell me how do you resolve the problem at last?

[dushkostanoeski]

I created a service:

export class PrinterService {
 private readonly pdfFonts: any;
    pdfMake: any;

    constructor() {
        this.pdfMake = require('pdfmake/build/pdfmake.js');
        this.pdfFonts = require('pdfmake/build/vfs_fonts.js');
        this.pdfMake.vfs = this.pdfFonts.pdfMake.vfs;
    }
}

and then just inject the service wherever you need