Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@herodevs/hero-loader
Advanced tools
This component allows you to lazily load your Angular module whenever you want, instead of being restricted to lazy loading on route changes.
<hero-loader>
for lazy loading in AngularEvery Angular app is different and has different needs. Yet Angular only provides
one method for lazily loading code: using the loadChildren
piece in the routes
for any given module. By using the loadChildren
piece of a route, you are telling
Angular and the Angular CLI to help you out and lazily load that piece of the app
when the associated route is hit. This is a very efficient tool that we should
all be using.
Some of us need more flexibility when lazily loading modules. Some modules need
to be triggered to load on events BESIDES route change. Maybe a click
or a
mouseover
. Maybe when the user has admin rights, or when they don't have
admin rights. This is why we built <hero-loader>
. Using this component, combined
with an ngIf
, you can trigger lazy loading of a module for just about any
scenario that you can think of.
To do this, we utilize the exact same pieces of Angular that loadChildren
from
routes uses. But we do it in a different way. Let's look at how it works.
Start by installing the right node module:
npm install @herodevs/hero-loader
At this point, we have all that we need to get started. We only need to do some configuring. We need to do the following:
HeroLoaderModule
where we intend to use this lazy loading.<hero-loader>
to load that bundle when needed.Let's do this one at a time.
Open your angular.json
file. In that file, look for the nested property
projects.<your-project-name>.architect.build.options
where <your-project-name>
is the name of your project. Once you have the build options property in
sight, add the lazyModules
property to the options:
"options": {
...
"lazyModules": [ "src/app/test/test.module" ]
}
In the above example, you are telling the Angular CLI to prepare a separate
bundle for TestModule
in the file src/app/test/test.module.ts
. You will
notice that this looks a lot like the loadChildren
syntax for a route.
That's because this lazyModules
property is doing the same thing that
the loadChildren
property does in a route. Now the Angular CLI knows to
create a separate bundle for the TestModule
.
HeroLoaderModule
In your app, you need to add HeroLoaderModule
to the imports of one of your
app's NgModules
@NgModule({
imports: [HeroLoaderModule],
})
export class AppModule {}
Now your app knows about the HeroLoaderModule
and you can use the <hero-loader>
component to lazy load the TestModule
.
<hero-loader>
in our appThe following is an example of how to use <hero-loader>
to load our TestModule
.
<div (mouseover)="load = true">Hover to load TestModule</div>
<hero-loader *ngIf="load" moduleName="src/app/test/test.module#TestModule"></hero-loader>
When you hover the <div>
above, the ngIf
will turn on the <hero-loader>
component
which will then load the TestModule
and it will use whatever component is
listed in the TestModule.bootstrap
property and attach that component to the
inside of the <hero-loader>
component.
Consider that TestModule
looks as follows:
@NgModule({
declarations: [TestComponent],
bootstrap: [TestComponent],
})
export class TestModule {}
Using <hero-loader>
to load the TestModule
will the TestComponent
inside of the
the <hero-loader>
component that you added to your template.
FAQs
This component allows you to lazily load your Angular module whenever you want, instead of being restricted to lazy loading on route changes.
The npm package @herodevs/hero-loader receives a total of 6 weekly downloads. As such, @herodevs/hero-loader popularity was classified as not popular.
We found that @herodevs/hero-loader 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.