• Technologies
  • Frontend
  • Backend
  • Server
  • Contact
  • About
Thursday, June 8, 2023
Adnan Halilovic Blog
  • Technologies
    • All
    • Angular
    • Git
    • JavaScript
    • ReactJS
    How to Work on Different Git Branches at the Same Time?

    How to Work on Different Git Branches at the Same Time?

    Lazyload Standalone Components in Angular

    Lazyloading Standalone Components in Angular

    Standalone Components Angular

    How to Create Standalone Components in Angular

    Private Routes in React Router V6

    Protecting Routes in React JS

    How to setup routing in ReactJS

    How to setup routing in ReactJS

    Retry Error HTTP Requests in Angular (without retryWhen)

    Retry Error HTTP Requests in Angular (without retryWhen)

    Scalable Angular Structure

    Scalable Angular Structure

    Top 10 Most Common RxJS Operators

    Top 10 Most Common RxJS Operators

  • Frontend
  • Backend
  • Server
  • Contact
  • About
No Result
View All Result
  • Technologies
    • All
    • Angular
    • Git
    • JavaScript
    • ReactJS
    How to Work on Different Git Branches at the Same Time?

    How to Work on Different Git Branches at the Same Time?

    Lazyload Standalone Components in Angular

    Lazyloading Standalone Components in Angular

    Standalone Components Angular

    How to Create Standalone Components in Angular

    Private Routes in React Router V6

    Protecting Routes in React JS

    How to setup routing in ReactJS

    How to setup routing in ReactJS

    Retry Error HTTP Requests in Angular (without retryWhen)

    Retry Error HTTP Requests in Angular (without retryWhen)

    Scalable Angular Structure

    Scalable Angular Structure

    Top 10 Most Common RxJS Operators

    Top 10 Most Common RxJS Operators

  • Frontend
  • Backend
  • Server
  • Contact
  • About
No Result
View All Result
Adnan Halilovic Blog
No Result
View All Result

Lazyloading Standalone Components in Angular

Adnan Halilovic by Adnan Halilovic
September 11, 2022
in Angular, Frontend, Technologies
0
0
SHARES
770
VIEWS
Share on FacebookShare on Twitter
ADVERTISEMENT

Standalone components are a new feature in Angular 14, but lazyloading standalone components is something you should also use as well!


The lazy loading components feature allows us to easily ‘detach’ components from our build and serve them to our users as per their need, instead of bundling everything and sending it to the user.

How to?

This is actually easier than it sounds. The only requirement is that the lazyloaded component has to be standalone, otherwise this won’t work. So take a look at the app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { Route, RouterModule, Routes } from '@angular/router';
import { DefaultComponent } from './default/default.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home' },
  { path: 'home', component: DefaultComponent },
  {
    path: 'standalone',
    loadComponent: () =>
      import('./standalone/standalone.component').then(
        (m) => m.StandaloneComponent
      ),
  },
  {
    path: 'standalone2',
    loadComponent: () =>
      import('./standalone2/standalone2.component').then(
        (m) => m.StandaloneComponent2
      ),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

As you could see in the code above, we have used a new key in the router object, named loadComponet`, and imported the component as per request. Using this way, we don’t have to import the components in the module itself and call them when navigating, we are doing this lazily.

ADVERTISEMENT

If we take a look at our networks tab of the browser inspector, we would be able to see that the components are loading lazily while navigating between routes.

Standalone components lazy loading in the networks tab preview.

Conclusion

Lazyloading standalone components is a simple-to-implement, yet potent feature for enhancing the performance of Angular applications.

Here is a link to the project’s GitHub page: adnan-halilovic/lazyload-standalone-components-angular: Lazyload Standalone Components in Angular – Youtube Video (github.com)

ADVERTISEMENT

Thank you for reading the article!

If you like the article and the content, you can follow me on YouTube, Instagram, Linkedin, or any other social networks that you can find listed on my page.

Source: Youtube
Tags: AngularRoutingstandalone components
ADVERTISEMENT
Previous Post

How to Create Standalone Components in Angular

Next Post

How to Work on Different Git Branches at the Same Time?

Related Posts

How to Work on Different Git Branches at the Same Time?
Git

How to Work on Different Git Branches at the Same Time?

December 4, 2022
Standalone Components Angular
Angular

How to Create Standalone Components in Angular

September 10, 2022
Private Routes in React Router V6
Frontend

Protecting Routes in React JS

September 7, 2022
How to setup routing in ReactJS
ReactJS

How to setup routing in ReactJS

September 7, 2022
Retry Error HTTP Requests in Angular (without retryWhen)
Angular

Retry Error HTTP Requests in Angular (without retryWhen)

September 7, 2022
Scalable Angular Structure
Angular

Scalable Angular Structure

September 27, 2022
Next Post
How to Work on Different Git Branches at the Same Time?

How to Work on Different Git Branches at the Same Time?

Leave a Reply Cancel reply

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

Latest posts

How to Work on Different Git Branches at the Same Time?
Git

How to Work on Different Git Branches at the Same Time?

by Adnan Halilovic
December 4, 2022
0

Have you ever been in the middle of an important project when you had to switch to a different branch...

Read more
Lazyload Standalone Components in Angular

Lazyloading Standalone Components in Angular

September 11, 2022
Standalone Components Angular

How to Create Standalone Components in Angular

September 10, 2022
Private Routes in React Router V6

Protecting Routes in React JS

September 7, 2022
Installing Virtualmin on Ubuntu OS

Installing Virtualmin on Ubuntu OS

September 7, 2022
Github LinkedIn Youtube Twitter Pinterest Instagram Reddit

About Me

Adnan Halilovic Blog

Adnan Halilović

Software Developer - Content Writer

I am Adnan Halilović, the man behind the website and channels that you are currently reading and viewing!

I am a software developer with over 12 years of expertise in a variety of fields.

Newsletter

Country:

Email address:


Recent from Instagram

© 2022 Adnan Halilovic - Software development content, tips & tricks.

No Result
View All Result
  • Technologies
  • Frontend
  • Backend
  • Server
  • Contact
  • About

© 2022 Adnan Halilovic - Software development content, tips & tricks.

Click to Copy