How to import a js file in Angular Library? - javascript

I am creating a Angular Library which will be using a js file for operations. How do I import this file in Library since it doesn't contain angular.json file.
In Normal app which could just add it to scripts in angular json and access through global variable but not sure about this.

Related

Importing JS bundle to an Angular Library

I am trying to add a JS script bundle file to a custom Angular Library which is using features from it. I have added the types files so the linting errors are not showing, but the Project does not get built as classes from JS Bundle are not found.
I have tried and failed importing the bundle to the public-api file.
I am thinking of trying to make the bundle a private npm package to install. But that will take lot of time and effort.
What other options do I have?
Sometimes you could have that kind of circumtances like having would like to use an JS library in your Angular project.
i have encountered something like that but i have created one directive file in the src folder like "type.d.ts" so after i declared my library in it with something like "declare module 'pdfmake/build/vfs_fonts.js';" and at last imported it in my component file like "import * as pdfMake from 'pdfmake/build/pdfmake.js';"
1- Create one directive file like "type.d.ts"
2- Declare your JS library in your recent file created with something like "declare module 'pdfmake/build/pdfmake.js';"
3- Declare back the import statement in your component file like "import * as pdfMake from 'pdfmake/build/pdfmake.js';"

How do I prevent webpack from rewriting import() so that I can use the buildIn one?

I am writing a kind of meta application. It is written in React and bundled by webpack. The meta application loads a .js file based on the user input etc. The .js file may not exist at the bundling time. My loading function should just make an HTTP(S) request, try to load the file, and take a function with a known name in the file.
If I just have import(aConstructedPath}) in my loading function, webpack treats it as its directive and generates something like __webpack_require__("./ lazy recursive ^.*$").... How can just just say that this import() should use the built-in one?
I am not sure if you have defined import already. But you can give it a try if you have
const anyName = eval(`import(${aConstructedPath})`);
Where anyName is imported package.
This will make webpack not to rename the code inside ``

Is it possible to import app's js file inside cordova-plugin source code?

I have a custom cordova-plugin that needs to depend on project's js file. Is it possible to import it in the plugin source code or I have to inject the dependency on startup to the plugin itself?

How do I pass a variable to angular library

So I have an Angular library with a service installed on my main project and I want to know if it's possible to retrieve a global url variable or a field of my config.json file I defined in my main project. Would be nice to know how too.
In the src/environments/ folder you can have an environment.ts file with settings variables and use it with
import { environment } from './../environments/environment';
Then any variable you have in the file will be available.
You can even have different files for each of your environments.
https://angular.io/guide/build

Use external javaScript library in angular 4 Component Library created with ng-packagr

With lots of help from this excellent article by Nikolas LeBlanc, I'm trying to create an Angular 4 component library:
https://medium.com/#nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e
The problem is this... my library depends on an external JavaScript file - let's call that somefunctions.js.
In a regular Angular 4 application - I've been able to do this by referencing the file in the angular-cli.json file:
"scripts": [
"./app/js/somefunctions.js"
],
... then declare the variables as type any in the typings.d.ts file.
This makes the JavaScript file available to the application, and it works just fine.
However - my goal is to create an Angular 4 component library, and package/publish it to npm.
When I follow the instructions for creating the library - the feature module is packaged without somefunctions.js.
So - if someone else installs my module, they won't have somefunctions.js, and it obviously won't work.
So, I guess I need to know how to tell ng-packagr to bundle the module so that it includes somefunctions.js, and how to set up my module so that my code can reference that file when the module is installed in other applications.
Thanks in advance!

Categories