How to embed "regular" JS-Libs (e.g. Chart.js, dragula.js) in dev & prod built

[hmrc87]

There are a lot of discussions going on regarding the --prod built and how difficult it can be to embed 3rd-Party libraries. So far I have managed to add the following libraries, they run perfectly in dev and prod-built with beta5

• ng2-uploader
• ng2-bootstrap
• ng2-table

I wanted to add ng2-dragula and ng2-charts but each of them rely on a separate JavaScript-Library (chart.js and dragula.js) which I am only able to get up and running in dev-mode and when I add the import to index.html.

When I add them via system-config.js I only get errors. I tried changing the format to cjs or register or just leave it away. But I didn't find a way to add a "regular JS library like "Chart.JS" to the angular-cli project so that it runs in dev and --prod mode.

[hmrc87]

I was able to get Chart.JS and dragula.js working by declaring it a "global" module in system-config.ts

'chartjs':{ format: "global" },

and importing it in my main-component import 'chartjs so that SystemJS knows that is has to include it into its combined main.js.

I don't know if this should be in the docs, since this is an SystemJS issue but it would be great to have it in the "How to install 3rd party libs" section.

More information here:
#718 (comment)

[filipesilva]

Heya, glad to know that you got it working! I'll try to add it to the wiki when reviewing the angular2-material example.

Meanwhile I might just redirect people here when they have similar issues. Cheers!

[vabhik]

It doesn't work in my case, I used jquery and bootstrap and tried defining the format global but it still not able to recognise them. Finally, I moved them to public folder and used them in index file. Please help if there is another working approach exists

[iBasit]

+1

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}