Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
ngx-lazy-module
Advanced tools
Readme
This module contains tools for lazy loading modules outside of the routing context.
Install and save as a dev dependency
npm install ngx-lazy-module --save-dev
Add NgxLazyModule to the main application module. Use the forRoot
function to provide a singleton of the LazyModuleService in your Angular application. Configure the RouterModule.forRoot with the modules you want to programatically load using the '__lazy/' prefix on the route and a canActivate
guard to block routing. This allows us to use the Angular compiler to build the module in the context of the application and the prefix allows the LazyModuleService to identify the module for later.
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
RouterModule.forRoot([{
path: '__lazy/LazyModule',
loadChildren: './lazyModule/lazy.module#LazyModule',
canActivate: [ () => false]
}
]),
NgxLazyModule.forRoot()],
bootstrap: [AppComponent]
})
export class AppModule {
}
Similar to the router-outlet
, the ngxLazyModuleOutlet
directive will mark the location where a component from a lazy module will be rendered. The directive requires a name
attribute that corresponds with a lazy-loaded module and a component
attribute that corresponds with the component to be rendered once the lazy module is loaded.
<div ngxLazyModuleOutlet name="ModalsModule" component="ModalComponent"></div>
In order for the ngxLazyModuleOutlet
directive to access components in the lazy module, you will need to setup a provider called $lazyComponents
in the lazy module to map components to string accessors. These components should also be added to "entryComponents" list in the module's configuration.
import { ModalComponent } from './modal.component';
export function ModalComponentsFactory() {
return {
ModalComponent, // access with string 'Modal Component'
AlternativeNameforModalComponent: ModalComponent // access with string 'AlternativeNameforModalComponent'
};
}
import { NgModule } from '@angular/core';
import { ModalComponent } from './modal.component';
import { ModalComponentsFactory } from './modals-module-components.factory';
@NgModule({
declarations: [
ModalComponent
],
entryComponents: [
ModalComponent
],
providers: [
{ provide: '$lazyComponents', useFactory: ModalComponentsFactory}
]
})
export class ModalsModule {
}
Use the function loadModule
in the LazyModuleService
to programmatically load a module. Once the configure module is loaded the ngxLazyModuleOutlet
directive will display the configured component.
public loadModal() {
this.lazyModuleService.loadModule('ModalsModule');
}
Clone repo. npm i. Then use npm run start
to run the demo project locally at http://localhost:4200
FAQs
Module for creating lazy module hooks in Angular
We found that ngx-lazy-module demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).