googleads
Dynamic Import Expressions In Angular Using TypeScript
preloder
Angular Technical

Dynamic Import Expressions In Angular Using TypeScript

Dynamic import expressions are a new feature and part of ECMAScript that allows users to asynchronously request a module at any arbitrary point in your program. TC39 JavaScript committee has it’s own proposal which is in stage 3, and it’s called import() proposal for JavaScript.

However we knew that when the vendor.js files size is high, then the loading time also will get increased. So to resolve this, Angular webpack bundler has a feature called Code Splitting which will help us to split the code into Multiple chunk files.

With the help of dynamic import(). We can avoid the unnecessary files even when the application initially loads.

After this, i had a quick discussion with our web development team and decided to implement this feature in our Angular projects and the result is amazed us! yes it’s great. So without limiting this i came forward to share it with you guys.

So let’s look into this with an example.

TypeScript 2.4 and above versions have this dynamic import expression which will automatically split your JS final optimization bundle into multiple chunks.

Initial configuration

Initially the code will look like below,

 

To change the configuration

Replace the module “es2015” to “esnext” . Now, TypeScript produces the mimic impot() statement which will be the input for Webpack Code Splitting. Once the modification is done, then the code will like this,

 

Import moment js library in the angular application.

Basically when you try to include the momentjs library, then our final optimization bundle size will get high due to it’s added options like multiple languages and locate options.
So the better approach to avoid this conflict would be uploading the libraries only when the particular module is required. Here.s where the dynamic import() expressions takes place.

Follow the below code for dynamic import

 

Now, will tell you how to add the moment.js library here. To include the moment.js library type the below command,

 

[ctt template=”5″ link=”lUZB8″ via=”no” ]Also you can read: Tips To Optimize Angular Application To Increase The Website Speed[/ctt]

Next, you can see how i have changed the above code by including moment.js library,

 

We can also have the button to dynamically import the moment.js library whenever it’s required. For that, we need to call the function as below in app.html files,

 

Our Result :


So the “moment chunk file” will be loaded the moment you click on the button, we can check it through the network tab in the inspector console as you can see below,

Import Dynamic Module

Now, hope I had cleared you to add the third party library manually. Next, will see how to import the .ts file dynamically.

 

String-helpers is .ts files. This file will dynamically include the ts files based on the requirements. The above code will call reverseString functions.

string-helpers.ts have collection of function. This functions can be exported to reverseString in following way,

 

[ctt template=”5″ link=”56xzd” via=”no” ]Related: Tips To Optimize Angular Application To Increase The Website Speed[/ctt]

Let’s see how the button action will get the reverse string,

 

Result:

The final build will have all the split chunk files as you can see it on the below screen,

Ufffff! it sounds perfect! yes we did it guys! Hope you will find it helpful!, What more? give it out a try and let us know your opinions. Also if you have any queries in resolving this then drop a comment. We would definitely try to help you out.

Mad over reading? Then never miss out anything from our blog works where you can read about all latest technologies & it’s updates which would be perfect for your 15 minutes tea break! What else guys hit the subscribe link and go crazy over learning.  If you are looking for angular developers for your project ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via info@agiratech.com

The following two tabs change content below.

Manigandan

An ideal Full Stack Developer, having around 5+ years of experience in web development arena, expertise in AngularJS, Nodejs, PHP and also scoring 6 years of experience in Networking & Window servers. A perfect all-rounder has fondness to play diverse role. he always strives to match perfection and likely remains the best in whatever role he takes.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call