How to reduce angular CLI build time

 Index:

-----

I am using angular cli - 7 and I am going to tell how to reduce the build time as per my knowledge.

Problem:

--------

Now the days, lot of users and developers are waiting too long for the build in prod with enabled [Build optimizer][1]. 

If your application having lot of files(more than 1000 components), then the build timing is taking more than 1 hour. 

In my application, we're enabled build optimization for QA also build time is more than 2 hours . So it's very difficult to quick function test for testers/developer because long build time. So I have decided to reduce the build time. 

What I Analyzed.

---------------- 

  I checked each and  every build process to know which step is taking too long to complete, So I found the following steps are taking too long to complete.

 - **69%-70%** - compilation process- , So we can't reduce this due to file compilation . 

 - **79%-80%** - Concatenation Module - This process is taking more than 25 mins. 

 - **90%-92%** - Chunk optimization for terser - this process is taking around 40 mins and taking too much of CPU process( system hanging happened).

How I fixed?

------------

**69%-70%: compilation**

  It's compiling process, So leave it. 

**79%-80%:Concatenation Module process:**

*Please follow this below steps* 

1- npm i -D @angular-builders/custom-webpack

 **Note:** *I have installed `^7.4.3`version in my application due to some version issue.* 

2-Change the `angular.json` configuration as the following way

    "architect": {

        "build": {

          "builder": "@angular-builders/custom-webpack:browser",

          "options": {

            "customWebpackConfig": {

               "path": "./extra-webpack.config.js"

            },

3-Create a new file named extra-webpack.config.js next to angular.json with the following code

    module.exports = {

        optimization: {

           concatenateModules: false

        }

    };

>If you did this above steps, The build time is reduced around 30 mins. Please visit this [blog][3] for more details.

**90%-92%: Chunk optimization for terser:** 

Please add this below line in package.json file if you had terser in your node module folder. 

 

     "resolutions": {

            "uglify-es": "npm:terser"

        }

**Note**: if you don't have [terser][2] in node module folder , then please do install.

*2293551ms* --- without resolutions

*596900ms*  --- with resolutions

Additional Tips:(Not Recommended)

-------------------

If you want reduce more build time, then please enable vendor chunk and disable extract CSS in your build command or in `angular.json` file

    ng build --configuration=qa --vendor-chunk=true --extract-css=false 

*Not a big impact, but it is also reducing 10 - 15 mins in 10%-12% process.*

Result:

-------

>Now my application build time is reduced more than 1 hour, **now it's running within 20-30 mins**.

Dependency Injection in MVC , Web Api

Dependency Injection :


What is this? Why we use this?

feel free and learn from Google, Many peoples are write more articles for there

See,

Explains from Code project

Explains from MSDN


Now we'll see, How to implement this in our local application?

First create a class and interface and Implement the interface into the class

public class CompanyService : ICompanyService
    {
        public AppContext _salesAppContext = new AppContext();    // this is object reference   for your entity 

        public IList<Company> GetAll()
        {
            return _salesAppContext.Companies.ToList();
        }

        public Company Create(Company model)
        {
            throw new NotImplementedException();
        }

        public Company Update(Company model)
        {
            throw new NotImplementedException();
        }

        public Company Delete(Company model)
        {
            throw new NotImplementedException();
        }

        public Company Get(int modelId)
        {
            throw new NotImplementedException();
        }

        public Company Get(Guid modelId)
        {
            throw new NotImplementedException();
        }
    }

Interface


 public interface ICompanyService
    {
        TModel Create(TModel model);
        TModel Update(TModel model);
        TModel Delete(TModel model);
        TModel Get(int modelId);
        TModel Get(Guid modelId);
        IList<TModel> GetAll();
    }

Okay, once it's fine . Then you need to add a Nuget package named as  "NUnit" . and  add the below methods in your global.asax file

public static void Initialise()
        {
            var container = BuildUnityContainer();

            // DependencyResolver.SetResolver(new UnityDependencyResolver(container));
            // register dependency resolver for WebAPI RC
            GlobalConfiguration.Configuration.DependencyResolver = new Unity.WebApi.UnityDependencyResolver(container);
            // if you still use the beta version - change above line to:
            //GlobalConfiguration.Configuration.ServiceResolver.SetResolver(new Unity.WebApi.UnityDependencyResolver(container));
        }



        private static IUnityContainer BuildUnityContainer()
        {
            var container = new UnityContainer();
            container.RegisterType<ICompanyService, CompanyService>();
            return container;
        }

and also you must add this namespace

using Microsoft.Practices.Unity;


Now the sample configurations are done. Then you need to call the Initialise() method into the Application_Start()  Method 

That Look like 

  protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
            //  Database.SetInitializer<SalesAppContext>(null);
            GlobalConfiguration.Configuration.MessageHandlers.Add(new CorsHandler());
            Initialise();

        }
Done.

AngularJS Simple Sample

I already gave some information about angularJs here :


First you surely need to read the above article , then come here ......


Okay cool ! Now we will go to build simple one angularJs Application .


My sample application created for Web-application , But you can do any type of application(windows,MVC Project) ,etc......

First add one index page in my application  and you need to just copy past the below code but , I will explain further details .

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<!DOCTYPE html>

<html ng-app>
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <label>Name:</label>
            <input type="text" ng-model="Name" placeholder="Enter a name here">
            <label>{{Name}}</label>           
        </div>
    </form>
</body>
</html>

The Above Green color codes are must important ..

where..

ng-app  - This keyword use for  Define Angular Js .

 <script src="Scripts/angular.min.js"></script> - Call angularJs in the Current Page .

 ng-model="Name"  - This is AngularJS Model Property (Just assume MVC Model property)

{{Name}} - Binding the model property value in a label . (Just Assume pass the MVC Model Property values to view)


Results are :

If you type any value in the textbox , It's display the below label( Like OnTextChanged Event process)

Okay ! Now you can create simple  angularJS application on yourself ,

AngularJS tutorial

What Is AngularJS ?

AngularJS is a Javascript MVC framework created by Google to build properly architectured and maintenable web applications.

Why AngularJS?

AngularJS is a MVC framework that defines numerous concepts to properly organize your web application. Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instanciated thanks to dependency injection. Thanks to the use of dependency injection, AngularJS helps you structure and test your Javascript code very easily. Finally, utility code can easily be factorized into services that can be injected in your controllers. Now let’s have a closer look at all those features.


Build Simple AngularJs Application :

First You need to Install AngularJs Package in your application .It's not a big work , Just simple go and right click the Project In Solution explorer>Click  Manage NuGet Package  >Select Online tag > type AngularJs In the Search box >Then Download and install the AngularJs .

See this below Image for install angularJs in the Project 

If you done this process then you can see some javascript files in your Script Folder 

See this below Image 

Okay now we are finished of angularJs installation in our application . 


Now We will go to Build simple angularJs application (click the link )....... 

Add values to SelectList in MVC C#

 SelectList adequateList = new SelectList(new[]
             {
                new { Id = "1", Name = "Yes" },
                new { Id = "0", Name = "No" },       
             }, "Id", "Name");

How to find single value from string in c#

         You can use this code for  find single value from string


        const string stringValue = "1,16,12,113";
            string result = "";
            const string yourValue = "1"; //Assiged the user input value
            string[] arr = stringValue.Split(new char[] { ',' });//Convert string to string array
            foreach (string value in arr)
            {
                if (value == "" + yourValue + "") // condition checked for matching your value  in string array
                {
                    result = value; //assign the matched value
                    break; // then go to out side of for each
                }
            }
            string finalResult = result; //finally assigend the matching value

My above code is working fine .but i used foreach ,it's not a good performance ,so we can use findall

see below code and try this

const string stringValue = "1,16,12,113";
string finalValue = "";
const string yourValue = "1"; //Assiged the user input value
string[] arr = stringValue.Split(new char[] { ',' });//Convert string to string array
var results = Array.FindAll(arr, s => s.Equals(yourValue));//if your value there ,then we assigned that value in array
if (results.Length != 0)
    {
      finalValue = results[0];//finay we got a value
    }

Convert string to string array in c#

here is a simple example for convert string to string array


            string values= "1,16,12,113";
            string[] arr = values.Split(new char[] { ',' }); //Convert string to string array using split