Modules and Routers

Information on Modules and Routers

• In TS each file can be considered as module.
• For making each file module we have to add export keyword before class to make it accessible outside of the file.
• In TS we divide the program into multiple files, in each files we export one or more types
• These types can be classes, functions, simple variables or objects. Wherever we need to use these file we need to import them first.
• When we have an import or export on the top of the file then that file is module in respect to typescript point of view.
• In Angular we also have concept of module but Angular modules are little bit different, they are not about organization of code in different files. They are about organization of application into smaller functional areas.

ES6 Modules

• ES6 modules provide organization at a language level. All this does is to provide us the container to export one thing and import into another thing.
• use ES6 module syntax
• Modules export things that other modules can import.
• It makes it easy to reuse a piece of code, maintain code and debug code.

@NgModule

• It provides organization at framework level.
• This allows us to tell Angular how to configure itself so that it knows what exists and how it needs to fit together.
• declarations: define view classes that are available to module
• imports: define a list of modules that module needs
• providers: define a list of services that module makes available.
• exports: define a list of modules that module make available
• bootstrap: defines the component that should be bootstrapped.

Note: So we can think of module is really nothing more than a logical grouping or a division mechanism to divide and segment pieces of our application.

Routes

Let’s take an example. So i am currently in area A and i have to go pickup my friend from airport from area E and take him back to area A. Here all these area (A, B, C, D, E) are modules and highway, bypass and roads connecting them are called as Routes. All these areas are part of let’s say big city. So in simple word we can say this city is segmented into all these small area and these areas will be called as Modules. Thus these routes helps us to navigate from one module to another.

Routing

• Routes mainly contains two things path and component reference
• Components are loaded into the router-outlet directive
• We can navigate to routes using routerLink directive
• The router uses history.pushState which means we need to set a base-ref tag to our index.html file.

So the order that you declare your routes in the routing table or that array does matter.

Why do you need to import modules twice (ES6 and ngModule)?

• We are using ES6 at the language level. So when we are writing our code and it compiles that by using TypeScript & ES6, this is how the compiler knows that these things go together.
• ES6 modules are completely for compilation and language level purposes.
• On the other hand ngModule which are not at the language level they’re at the framework level.
• ngModule tells Angular specifically how to wire itself together.
• In simple ES6 is language level organization and ngModule is framework level organization.

Lazy Loading

• It is the process for loading modules, components and other in required thing in website as needed.
• Lazy loading helps to keep the bundle size small which also reduces load time.
• Since we know Angular create SPA (Single Page Applications), so all the components get loaded at once. Due to this lot of unnecessary libraries also gets added which we don’t need.
• If application is small one then it will not be a big issue but with the increasing size of application it will become much harder to continue with this way.
• To get detailed understanding of Lazy Loading we need to understand the ngModule which is the basic building block of framework. I will discuss ngModule in full detail in the next blog.

What type of route would somebody lazy load?

• Possibly a route that does not get a lot of traffic.
• So when you don’t lazy load your routes then everything gets compiled into like one-bundle that gets deployed. That makes the initial payload a lot bigger.

With all this, let’s end this blog as this is it of Modules and Routers. If you will find any issue regarding concept or code, you can message me on my Twitter or LinkedIn. The next blog will be published on 07 March 2023.

Some words about me

I’m Mohit.❤️ You can also call me Chessman. I’m a Machine learning Developer and a competitive programmer. Most of my time is spent staring at a computer screen. During the day, I am usually programming, working to derive insight from large datasets. My skills include Data Analysis, Data Visualization, Machine learning, Deep Learning, DevOps and working toward Full Stack. I have developed a strong acumen for problem-solving, and I enjoy occasional challenges.

My Portfolio and Github.