javascriptangularamdsystemjspdf.js

Cannot read property 'createPromiseCapability' of undefined


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>

Solution

  • 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