Issue
I am using pdfmake library in my angular 8 project for client side pdf generation. I have installed the pdfmake library modules and it is working fine. but this third party library increases angular app build size, as shown below.
To reduce this build size I want to use pdfmake library using CDN link and want to load it dynamically.
Let me know is there any way to load third party libraries from CDN in angular app ?
Solution
After referring some articles and answers, I am able to load the pdfmake library from CDN.
We can do this using two ways.
1. Initially Loading : add script tag in the <head> section of index.html. And access the global library object exported in the window object.
For PDFMake I have added below scripts in head section,
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js'></script>
and to use it in component declare it on top of component as declare let pdfMake: any ; use this variable to access pdfmake methods: pdfMake.createPdf(docDefinition)
2. Dynamically Loading : If you want to load library on particular action or in particular component, you add script tag dynamically.
Refer this answer for this approach.
I have written article Loading External Libraries from CDN in Angular on both this approach.
Answered By - Ankit Prajapati
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.