I am trying to export some ponents 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?

I am trying to export some ponents 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?

• javascript
• angular
• angular-cli

• 3 Were you every able to resolve this issue? – Oren Hizkiya Commented Aug 28, 2018 at 20:19
• 1 Unfortunately not. There seems not to be a way to achieve this yet. – PeterO Commented Aug 30, 2018 at 8:47
• 2 Thanks @PeterO - Hoping a solution es about soon. – Oren Hizkiya Commented Aug 31, 2018 at 13:48
• 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 Commented May 28, 2019 at 16:19
• Could you please share example that demonstrates the issue on stackblitz. ? – abdulrahman alaa Commented Mar 25, 2020 at 20:13

2 Answers 2

   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(`welle ${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 ponent file. I am using the app ponent.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
}

 

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