I'm trying to use ngx-extended-pdf-viewer
in an Angular project that uses amd.min.js
as an dependency. If I remove amd as an dependency it's working fine. But sadly I can't remove it as, a lot of other things are dependent on it.
Here's the reproducible html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hi Duniya</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/amd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-register.min.js"></script>
<script src="https://unpkg.com/ngx-extended-pdf-viewer@9.0.0-alpha.5/assets/pdf.worker-2.7.684.js"></script>
<script src="https://unpkg.com/ngx-extended-pdf-viewer@9.0.0-alpha.5/assets/pdf-2.7.684.js"></script>
<script src="https://unpkg.com/ngx-extended-pdf-viewer@9.0.0-alpha.5/assets/viewer-2.7.684.js"></script>
</head>
<body>
hello
</body>
</html>
Load all three pdf modules before amd.
<script src="https://unpkg.com/ngx-extended-pdf-viewer@9.0.0-alpha.5/assets/pdf.worker-2.7.684.js"></script>
<script src="https://unpkg.com/ngx-extended-pdf-viewer@9.0.0-alpha.5/assets/pdf-2.7.684.js"></script>
<script src="https://unpkg.com/ngx-extended-pdf-viewer@9.0.0-alpha.5/assets/viewer-2.7.684.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/amd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-register.min.js"></script>
Explanation
pdf-viewer.js
checks for the presence of pdf
module in window object. But, when amd
module is loaded first pdf.js
don't store in window object but register it as an amd module.
else if(typeof define === 'function' && define.amd)
define("pdfjs-dist/build/pdf", [], factory);
If you load pdf.js
before amd
, following line gets executed which makes pdf
module available in window object(root is window).
root["pdfjs-dist/build/pdf"] = root.pdfjsLib = factory();
Snippets mentioned above are from https://unpkg.com/ngx-extended-pdf-viewer@9.0.0-alpha.5/assets/pdf-2.7.684.js