Integration with Angular 8

[cwilkens]

I'm fairly new to Angular so maybe I'm setting this up wrong, but I can't get pptxgenjs version 3.1.0 to work with Angular 8.3.0.

I made a plain Angular app using ng new app and then called npm install pptxgenjs to add it. When I run ng serve to build, I get a few errors like this:
ERROR in node_modules/pptxgenjs/types/index.d.ts:85:50 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

So then I add node to the types field in tsconfig.app.json. Any way I try to build from there, or change the import/require of pptxgenjs in my angular component, I always get this build error:
ERROR in ./node_modules/pptxgenjs/dist/pptxgen.es.js Module not found: Error: Can't resolve 'fs' in 'C:\projects\slides-generator\node_modules\pptxgenjs\dist'

I looked at some other issues that have been closed, and maybe this is due to pptxgenjs thinking it's running on node instead of angular, but I don't know where that code is. (And I tried to put breakpoints in pptxgen.es.js everywhere I saw fs but they never got hit. Probably since the VS Code debugger was looking at runtime code instead of the compile process).

Any thoughts on how I can work around this or fix this?

[gitbrent]

Hi @cwilkens

Thanks for reporting this.

Angular is browser-based so fs should not be loading as a dependency. I'm guessing the "browser" field in package.json flags this. React built okay, so i assumed it was safe to remove during the last release (plus the spec shows it being used differently...)

Please download package.json from the master branch and replace the one in the node_modules/pptxgenjs folder, then try to build again and let me know.

[cwilkens]

Looking at my package.json, it seems it was munged/added to by npm. So I just added in the "browser" field from your recent change to the package.json file in node_modules/pptxgenjs, and it works.

For reference, I have to import it like so:
import PptxGenJS from 'pptxgenjs';

which gives a red squiggly in VS Code about index.d.ts(11, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
but I'm still able to ng serve and use the library normally:
var pptx = new PptxGenJS();
var slide = pptx.addSlide();

So I'm considering this fixed, thank you!

[readeral]

FWIW I was having trouble with fs in React using 3.1.0, but having installed from current master branch instead of NPM, that's no longer an issue.

[gitbrent]

@readeral - thanks for the feedback

[pandersen-uncharted]

I'm using 3.1.1 and still experiencing in an Angular 8 client-side app:

ERROR: node_modules/pptxgenjs/types/index.d.ts(67,50): error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

I've tried adding node to the types field in tsconfig.app.json and that didn't work.

Instead I removed Buffer from lines 67 and 73 in node_modules/pptxgenjs/types/index.d.ts and that worked. Buffer is a node.js datatype so removing it from a non-node app makes sense, but doing this manually isn't maintainable. Is there an alternative solution?

[zmzimpl]

The problem still exists in angular9

    node_modules/pptxgenjs/types/index.d.ts:73:88 - error TS2591: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    
    73  write(outputType: PptxGenJS.JSZIP_OUTPUT_TYPE): Promise<string | ArrayBuffer | Blob | Buffer | Uint8Array>