Adding a script to an Angular Library

Question

I am trying to export some components of my Angular 6 application into a library. Unfortunately, I need to use a WebToolkit to connect to a proprietary service build by other people, which is only available as a pure javascript file. This file, in turn also needs jQuery and require.js.

Without libraries, I have solved this by adding these js files to the .angular-cli.json under "scripts"

{
 ...,
 scripts: [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/require/require.js",
  "path/to/my/magic/library.js"
 ],
 ...
}

Now building my angular library, I would like to have those scripts built into my own library code, such that it can still be used by my customers in the simple manner of performing just one npm-install and importing it in their .module.ts file.

Is that somehow possible with the Angular-CLI 6? Or do you have other suggestions how I can achieve a simple installation of my library?

Unfortunately not. There seems not to be a way to achieve this yet. — PeterO
– PeterO, Commented Aug 30, 2018 at 8:47
It's not the prettiest, but you could use ngx-script-loader. Instead of multiple scripts you could roll these up and distribute them as one script — inorganik
– inorganik, Commented May 28, 2019 at 16:19
Could you please share example that demonstrates the issue on stackblitz.com ? — abdulrahman alaa
– abdulrahman alaa, Commented Mar 25, 2020 at 20:13

Nikhil · Accepted Answer · 2022-04-14 08:08:26Z

   Provide the reference of your external JS in your angular. json file of main angular project in a script tag and provide the path of your package from your libraries node_modules folder like this. So now you have created the NPM package from your library and you are going to use it in different project

    **Add externaljs file**
    **Step 1**
    Take a file in the assets folder and set any name. Like as custom.js 
    
    function getToday() {
    alert(new Date().toLocaleDateString());
}

function greetings(name) {
    alert(`wellcome ${name}`);
}


    **Step 2**
    Now add the customjs file reference in the angular.json scripts section array list. Like as below

    
"src/assets/custom.js"

    **Step 3**
    Now add the functions reference in a component file. I am using the app component.ts

    //external js function declaration
declare function getToday(): any;
declare function greetings(name: any): any;
ngOnInit(): void {
    // call the externaljs functions
    getToday(); // without param
    greetings('rohol'); // with param
}

Luis Fernando Hernandez · Accepted Answer · 2020-03-30 08:39:18Z

0

Maybe isn't the cleanest way to do it but you can achieve this with:

let scriptTap = document.createElement('script');
scriptTag.src = '<route to your scripts>';
document.body.appendChild(scriptTag);

The best way to integrate is creating the library from ng new project-name -create-application=false then you add the library with ng g library name-of-library

and you will have a clean project to develop your library

answered Mar 30, 2020 at 8:39

Luis Fernando Hernandez

1141 silver badge11 bronze badges

Collectives™ on Stack Overflow

Adding a script to an Angular Library

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related