Questions tagged lazy-loading

Explore the latest questions and answers asked by our top developers.

How to lazy-load an Angular component from an html template?

I have an existing Angular app which eager-loads everything, and I would now like to add lazy-loading capabilities to it. Lazy-loading routes works fine, especially by following the guidelines provided by https://link.medium.com/xJ18mitCElb and https://link.medium.com/8F3G2rg0slb, with the following routes construct in AppRoutingModule: {path: ‘dashboard’, loadChildren: () => import(‘./dashboard/dashboard.module’).then(m => m.DashboardModule)} Programmatically loading components is also doable […]

Lazy loading angular components with ngx-bootstrap TabsModule

I’m using the TabsModule from gx-bootstrap in my angular app. Each tab has an angular component contained within it. When the page loads and, by default, opens the first tab all the other tabs are also loaded. Is there a way to lazy load the tabs which are displayed/selected yet, or at least refresh them […]

By afish
Published
Categorized as angular, lazy-loading, ngx-bootstrap Tagged , ,

Lazy loading Angular 13+ modules without the deprecated compiler

I’ve worked extensively with loading and instantiating Angular modules. (without the router) But now with Angular 13 I’m seeing deprecations for the usual compiler tools to instantiate an NgModule: Looking deeper The V13 change where ViewContainerRef now has the factory included makes dynamic components 1 step easier. However, regarding ViewContainerRef.createComponent() the documentation states: Deprecated Angular […]

Angular Doing lazyload but still have 1 main.js

app-routing https://prnt.sc/20zqxzy const routes: Routes = [ { path: ”, loadChildren: () => import(/* webpackChunkName: “index” */ ‘./pages/module/main/index-page/index-page.module’).then(m => m.IndexPageModule) }, { path: ‘user’, loadChildren: () => import(/* webpackChunkName: “user” */ ‘./pages/module/user/user-routing/user-routing.module’).then(m => m.UserRoutingModule) } ] @NgModule({ imports: [RouterModule.forRoot(routes, { initialNavigation: ‘enabledBlocking’ })], exports: [RouterModule] }) export class AppRoutingModule { } index-page-routing https://prnt.sc/20zr52z import { […]

By
Published
Categorized as angular, javascript, lazy-loading Tagged , ,

Lazyload angular modules being loaded on another routes

I’m using angular lazyloading to lazyload my modules and here is my routes: { pathMatch: ‘full’, path: ”, loadChildren: () => import(‘./pages/landing/home-page/home-page.module’).then(m => m.HomePageModule) }, { path: ‘web-design’, loadChildren: () => import(‘./pages/landing/web-design/web-design.module’).then(m => m.WebDesignModule) }, { path: ‘content’, loadChildren: () => import(‘./pages/landing/content/content.module’).then(m => m.ContentModule) }, { path: ‘profile’, loadChildren: () => import(‘./pages/public/freelancer-profile/freelancer-profile.module’).then(m => m.FreelancerProfileModule) }, […]

By Behnam Aminazad
Published
Categorized as angular, lazy-loading Tagged ,

lazy load a module in Angular

Can search engines read the content of our component if we lazy load its module with ngx-loadable in Angular? Source: Angular Questions

By yasaman ghasedian
Published
Categorized as angular, lazy-loading, search-engine, seo Tagged , , ,

Can search engines read the content of our component if we lazy load its module with ngx-loadable in Angular?

Can search engines read the content of our component if we lazy load its module with ng x-loadable in Angular? Source: Angular Questions

Angular default route always preloaded

I have two routes : home [ ” ] about [ ‘about’ ] When I go to /about directly with my browser, I’ve notice 2 things : my home module is preloaded (whereas I’ve requested /about) the URL is rewritted like this : /about -> / -> /about app-routing.module.t import { NgModule } from ‘@angular/core’; […]

By Ziad
Published
Categorized as angular, lazy-loading Tagged ,

navigation help using roting in angular

Look at the following list – auth auth/login auth/forget-password dashboard dashboard/cart dashboard/delivery dashboard/users auth has a common backgound for login and forget-passowrd. const routes: Routes = [ { path: ‘auth’, loadChildren: () => import(‘./auth/auth.module’) .then(m => m.AuthModule) }, { path: ‘dashboard’, loadChildren: () => import(‘./admin-dashboard/admin-dashboard.module’).then(m => m.AdminDashboardModule) }, { path: ”, redirectTo: ‘/auth/login’, pathMatch: ‘full’ […]

Navigation using routing in angular

Look at the following list – auth auth/login auth/forget-password dashboard dashboard/cart dashboard/delivery dashboard/users auth has a common backgound for login and forget-passowrd. const routes: Routes = [ { path: ‘auth’, loadChildren: () => import(‘./auth/auth.module’) .then(m => m.AuthModule) }, { path: ‘dashboard’, loadChildren: () => import(‘./admin-dashboard/admin-dashboard.module’).then(m => m.AdminDashboardModule) }, { path: ”, redirectTo: ‘/auth/login’, pathMatch: ‘full’ […]

1 16

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq