Using licensed files in Angular Application

In thisblog, we willcometo knowhowto use the Licensed filesin our Angular app. Firstly install the required packages and use it as given in documentation provided on their official site and later purchase the license of the package you have installed or want to use to use extra features. Here I’m discussing this topic because I had faced some critical issuesinmy Production environment, as wehave received the multiple files to be use with package files which is in node_module folder. In this blog, I’m going to share the same experience with you guys.

Let’s understand why we are getting issues

As I said received the multiple files to be use with package files that lies in node_module folder. We cannot replace the file inside node_module as we all know it will be removed at the time of build on server as it install the packages on its own everytime. And we cannot replace the file manually after npm install. To get rid of it we just created a new folder with external_node_module and move the package files in it including licensed files and use the external folder. But its not the correct way to use licensed files as it is using extra space and the overall size of the application will increase.

Here, I am sharing how to get rid of theexternal_node_module and reduce the application size

Let’s start by installing the Replace in file Packageforthis, we neednpmpackagei.e. replace-in-file.

npm i replace-in-file

After Package installation let's create a json file to replace the existing files with new one i.e, fusion chart default files with the licensed files. here is the example of json file used to replace

{
    "copyFiles":[
        {
            "from": "./licensedFusionChartFiles/fusioncharts.charts.js",
            "to": "node_modules/fusioncharts/fusioncharts.charts.js"
        },

    ],
    "copyFilesSettings": {
        "whenFileExists": "overwrite"
    }
}

Here, in Copy files array you need to add from which includes the path of the file that should be the new one and to which include the file path that should be change. Here are multiple settings i have usedwhenFileExists only to overrite the existing file.

Add a script in package.json file to run the command or you can simply run the command in terminal i.e,

copy-files-from-to --config licensedFiles.json

HerelicensedFiles.json is the JSONfile name which you have created earlier.

Once you have done the all requiredchanges, then it will reduce the space, but make sure that command should be run at the time of build on server for the each and every time else it will not get the licensed file on server and the extra feature will not be usable anymore.

We are an Angular Development Company with a goal of transforming enterprise operations with our development services. Our services include customized software development for ERP, WFM, CRM, HRM, eCommerce, Finance, Accounting as well as mobile/web application development. Get in touch with us to avail our Angular development services NOW!