How to add third party libraries in Angular 4 using Webpack? - javascript

I've recently tried adding js libraries (such as chartist or datatables) to my Angular 4 project using Webpack but I'm stuck. I successfully added to my project js libraries from the npm library, they were listed in the node_modules folder and in the package.json file.
The problem seems to be that typescript libraries are allowed but not js libraries. I tried importing a js library first in app.module.ts then in NgModules, then in the right component, it didn't work. I then tried importing it in the script table in the angular-cli.json file, it didn't work either.
Could you please tell me how you would proceed injecting a third party library in an Angular 4 component for example?

As previously stated this question is too broad. Generally if it is a non angular specific js library then you will be importing it via angular.json file. How that library is triggered off is completely down to how that library operates.

Related

TypeScript Library import another library

I'm developing a library in TypeScript.
This library uses the https://github.com/Simonwep/pickr library.
I would like to make my library available so users can use it, but question is: do I need to bundle pickr library or just put a reference in the package.json?
I tried to use the library in a sample project and in dev mode all works since it loads from node_modules, but when I build the project and try to load it fails to load it.
It works only by importing the library using
<script src="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/pickr.min.js"></script>
If library will be used in a web browser I made it so the script tag is automatically added.
But what if someone will use the library in an ionic project for instance which will run on a tablet?
In this case Pickr library needs to bundled in the final build.
Is this an automatic process? What's the correct way of using a third-party library in this case?
If you want pickr to get bundled with your code you will have to
List it under dependencies
Import it in your code (see pickr docs)
If its not imported in your code it wont be bundled.
If you want to tell the user to manually add pickr when he uses your module you can list pickr as a peerDependency in your package.json

How to import an external script in my Angular library?

I am trying to export some business logic ts files of my Angular application into an Angular library. Unfortunately, I need to use a Javascript file to connect to a proprietary service build by other people, which is only available as a pure javascript file and requires jQuery.
Without libraries (when I was using the script in my angular application), I solved this by adding these js files to the .angular.json under the "scripts" section.
The js file is huge so I could not consider the option to rewrite in typescript.
Is there some way to import and use a javascript file in my ng library?
Thanks
Karan
I have finally solved my issue.
Turns out there is no way to add a javascript file to an Angular library since ng library does not support "script" tag.
There is one other way: i.e. you can publish your library without the javascript file dependency, and the client using it will have to do 2 things:
npm install "your-library"
Now add the dependent javascript file to scripts tag in angular.json file.
Example in my case:
Run npm install wps-ng
And my Angular.json looks like this:
"scripts": [ "node_modules/jquery/dist/jquery.js", "node_modules/wps-js-52-north/src/web/lib/wps-js-all.js" ]
Unlike the other libraries, just a simple npm install is not sufficient, the client will just need to add their javascript file to scripts tag.

How can I use an external JavaScript library in an Angular Library

I'm developing an Angular library (Angular 7) and I need to use an external js file from node_modules in this Library.
Including it in angular.json or the main project doesn't help --> results in Can't resolve 'lib-name' in 'my-proj/node_modules/my-lib/fesm5'
Including it in scripts in angular.json and using declare let externalLib: any; doesn't help --> results in undefined
adding it's type to the types array in tsconfig.lib.json doesn't help either
adding it to peerDependencies doesn't work as well
The only thing that worked is installing the js file in the main project but that should not be the case.
any ideas?
thank you,

Angular - ngpackagr - How to include custom files and dependencies like bootstrap / custom themes?

I'm building an Angular 5 component library with ng-packagr. The components preferably should work out of the box. So that you can install the library and everything will work fine. My problem: The library has some dependencies. I have to include bootstrap (+jquery) which I included in my angular-cli.json file for now. Furthermore I use custom themes which are stored in a seperate folder. I want them to be packaged by ng-packagr and if I install the library the dependencies should install with them, preferably there should be no other work to do for the user of the library. Is this possible? If so how?
Any help would be appreciated! Thanks!
bump

How to include Third party javascript library in angular2 webpack typescript

I am using https://github.com/AngularClass/angular2-webpack-starter as seed project and it's awesome.
But i can't understand how to include third party JS lib in my project using Webpack. I know it can be done using <script src="third/party"></script> But i want to do it in angular way like import { ThirdParty } from 'third-part/';
And Also please suggest the standard way to use javascript library in angular2 project using webpack.
Place the import statement in your src/vendor.ts file, this should do the trick.
if not, you may have to resort to the <script></script>

Categories