user3169715
user3169715

Reputation: 36

ERROR TypeError: $(...).FlowPaperViewer is not a function in Angular 4

I am trying to use FlowPaper Viewer from my Angular 4 app. but I get the following error :

core.es5.js?de3d:1020 ERROR TypeError: $(...).FlowPaperViewer is not a function

I tried as following (in Jhipster Angular 4 app): I have included the JS and CSS files manually in my project folder like:

webapp/content/css/flowpaper.css
webapp/content/js/jquery.min.js
webapp/content/js/jquery.extensions.min.js
webapp/content/js/fpsmeter.min.js
webapp/content/js/three.min.js
webapp/content/js/flowpaper.js
webapp/content/js/flowpaper_handlers.js
webapp/content/js/FlowPaperViewer.js
webapp/content/js/flowpaper.worker.js

then add the reference in the angular-cli.json file as following:

        "styles": [
            "content/css/vendor.css",
            "content/css/global.css",
            "content/css/flowpaper.css"
        ],
        "scripts": [
            "content/js/jquery.min.js",
            "content/js/jquery.extensions.min.js",
            "content/js/fpsmeter.min.js",
            "content/js/three.min.js",
            "content/js/flowpaper.js",
            "content/js/flowpaper_handlers.js",
            "content/js/FlowPaperViewer.js",
            "content/js/flowpaper.worker.js"
        ]

In the Html file added :

<div id="documentViewer" class="flowpaper_viewer" style="position:absolute;;width:100%;height:100%;background-color:#222222;;"></div>

in the component I declare jquery variable:

declare var $:any;

on receive pdf blob file I called :

uint8Array  = new Uint8Array(arrayBuffer);
$('#documentViewer').FlowPaperViewer(
                        { config : {
                            PDFFile : uint8Array
                        }});

and I see in the chrome console :

core.es5.js?de3d:1020 ERROR TypeError: $(...).FlowPaperViewer is not a function

Upvotes: 0

Views: 896

Answers (0)

Related Questions