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?

Answer 1

   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
}