Questions tagged lazy-loading

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

Angular 10: how to load feature modules in background while PWA is already running

I’ve divided my PWA in modules and applied lazy-loading according to Angular docs. My code was: import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’; import { RouterModule } from ‘@angular/router’; import { AppComponent } from ‘./app.component’; import { StartComponent } from ‘./start/start.component’; import {MatSnackBarModule} from […]

Angular 10: Bundle creation for lazy loaded modules

I have a service which uses xslx library to create a excel report. Since xlsx is pretty big and its only used in one place I want to put the service and also the dependency into a lazy loaded module. So far everything works fine: I lazy load the module where I need it and […]

By Markus Bio-Alexander
Categorized as angular, angular10, bundle, ivy, lazy-loading Tagged , , , ,

Why Angular module lazy loading loads more then one module for each route?

I expected that using module lazy loading without preloading strategy angular will load one module per route, currently my network tab looks: Two for one route default~frontpage-frontpage-module~product-card-ProductCardModule.js frontpage-frontpage-module.js Three for another route default~catalog-CatalogModule~order-history-OrderHistoryModule.js default~catalog-CatalogModule~product-card-ProductCardModule.js catalog-CatalogModule.js Could someone explain this behaviour, please? Source: Angular Questions

By Roman Chygryn
Categorized as angular, javascript, lazy-loading, webpack Tagged , , ,

angular- how to reduce DOMContentLoaded time of angular app

i am practicing angular and created an app where i add only 3 components. My app took 26 secs to load, so to reduce this time i used Lazy load concept in my app, but still this thing is not working. I still got 26 secs to load my app after implementing lazy load concept. […]

ngOnInit is not calling on route change

I am using the dynamic loading of modules. Each module has only a single component is it. My project structure is like that, App Module -> Pages Module -> Lazy loaded modules (Student, Teacher). Whenever both of the modules are loaded, ngOnInit is not called again. I have tried this.router.routeReuseStrategy.shouldReuseRoute = () => false but […]

Angular lazy loading deprecated – is it usable?

I have an angular 9 project and I’m using the string representation of lazy loading like { path: ‘lazy’, loadChildren: ‘./modules/lazy/lazy.module#LazyModule’, } Though I’m not getting error, I think this does not actually apply lazy loading. So should I update it to the new import(‘./modules/lazy/lazy.module’) format? Or the string representation works fine Source: Angular Questions

Categorized as angular, lazy-loading Tagged ,

Load Lazy loaded modules from CDN in angular

<html lang="en"> <head> link href="MY-CDN-PATH/styles.028e2d2ecf1b16206359.css" rel="stylesheet" type="text/css"/> </head> <body> <app-root></app-root> https://MY-CDN-PATH/runtime.24248252fa5d092174cd.js https://MY-CDN-PATH/polyfills.9d865c4e055183e2a9fe.js https://MY-CDN-PATH/scripts.b9bbd771b6e5188128c7.js https://MY-CDN-PATH/main.dfa0c749560539af4c24.js https://MY-CDN-PATH/common.45a6ad43242581d6f4b4.js </body> </html> I am using the above HTML to load my angular app from CDN. My app is loading the above js files from CDN. Issue: Is there any way I can load my lazy loaded modules from CDN. Currently, […]

Angular lazy loading module reloads application

I lazy load a module. When changing the route which points to it, the whole app reloads and app.component ngOnInit() funciton is called again (which is undesirable since I subscribe to server and need to do this only once). I found out that loading the module without refreshing the whole app is called ‘Hot module […]

By P Vitvera
Categorized as angular, angular-routing, lazy-loading Tagged , ,

accessing component functions in shared modules

I have a shared module that contains common components such as headers and notification components. I have a another module called ProductModule which uses the notification component from the shared module and calls a function defined in the notification component. shared.module.ts @NgModule({ declarations: [ HeaderComponent, SideNavComponent, SpinnerComponent, ItemSummaryComponent, UserRoleDirective, EmptyResultComponent, NotificationComponent ], imports: [ CommonModule, […]

By Lalinda Sampath
Categorized as angular, lazy-loading, shared-module Tagged , ,

Unit test lazy loaded component

I’m loading a component and its module lazily with the following code snippet: @ViewChild(TemplateRef, { read: ViewContainerRef }) private templateViewContainerRef: ViewContainerRef; constructor( private readonly componentFactoryResolver: ComponentFactoryResolver, private readonly injector: Injector ) {} ngOnInit() { this.loadModuleAndComponent(); } private async loadModuleAndComponent() { import(‘@scope/package’).then(({ LazyModule, LazyComponent }) => { // load module to set up store etc. createInjector(LazyModule, […]

By tilo
Categorized as angular, angular9, jest, lazy-loading, unit-testing Tagged , , , ,
1 14 15 16 17

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