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

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,

Related

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.

Need assistance with Typescript Modules bundling

I am currently developing a Typescript application using lit html. I have reached the point where I want to bundle all my typescript files, minimize them in to a single javascript file. Using VS Code as the IDE.
I have been looking at options - rollup.js is one option but I couldn't work out how to bundle multiple ts files in to a single js file, minimize it and also ensure the modules are handled correctly.
Any examples of using rollup.js to do such available or another alternative available?
You can use Parcel js for this as well. This will generate one js file. but if you require rollup js, may be this link will help you out.
Generate typescript definition files using rollup

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 add third party libraries in Angular 4 using Webpack?

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.

How do I add external JS files to my Zurb Foundation 6.4 project (webpack)?

I created a new Foundation project using npm and I need to add a lightbox plugin. Adding an external JS file to the previous version of Foundation was as simple as linking it in the config.yml file. The new version of Foundation uses the module bundler Webpack which I am unfamiliar with. I tried following these instructions but did not have any success and ended up with a Jquery is not defined error.
I dropped the minified lightbox plugin in the /lib directory and tried linking the file in the app.js and config.yml files but also had no success. Any assistance would be greatly appreciated.
I think you can solve adding:
window.jQuery = $;
and call the file externally as you're doing.
That's the quick solution.
To add to the webpack build it's something I'm still unsure (if the plugin is not and exported module by default)

Categories