This example shows how Angular HMR can be used to automatically reload lazy routes and lazy (dynamically-loaded) components. This can be extremely helpful for large Angular apps that take a while to JIT compile when they reload.
License: MIT License
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
I followed your instructions, i got HMR enabled but if i change a html file in a component from the lazy loaded module i get this
[WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Updated modules:
log.js:24 [HMR] - ./src/app/modules/dashboard/index/index.component.html
log.js:24 [HMR] - ./src/app/modules/dashboard/index/index.component.ts
log.js:24 [HMR] - ./src/app/modules/dashboard/dashboard.routing.ts
log.js:24 [HMR] - ./src/app/modules/dashboard/dashboard.module.ts
log.js:24 [HMR] App is up to date.
core.js:15714 ERROR Error: Uncaught (in promise): Error: Type class_1 is part of the declarations of 2 modules: DashboardModule and DashboardModule! Please consider moving class_1 to a higher module that imports DashboardModule and DashboardModule. You can also create a new NgModule that exports and includes class_1 then import that NgModule in DashboardModule and DashboardModule.
Error: Type class_1 is part of the declarations of 2 modules: DashboardModule and DashboardModule! Please consider moving class_1 to a higher module that imports DashboardModule and DashboardModule. You can also create a new NgModule that exports and includes class_1 then import that NgModule in DashboardModule and DashboardModule.
Angular CLI: 7.3.3
Node: 8.12.0
OS: darwin x64
Angular: 7.2.6
Any idea what is going one? I can guess that it appends the module instead of reloading it.
I can see two modules getting created here
chunk {modules-dashboard-dashboard-module} modules-dashboard-dashboard-module.js, modules-dashboard-dashboard-module.90be0b060bcc42ec91b3.hot-update.js, modules-dashboard-dashboard-module.js.map, modules-dashboard-dashboard-module.90be0b060bcc42ec91b3.hot-update.js.map (modules-dashboard-dashboard-module) 1.22 MB [rendered]
I may be just too new to angular to understand the expected pattern, but each module of ours has its own routes defined.
how do you utilize a single appRoutes from the app module to populate the helper with import { appRoutes } from "./app.module" ?
I'm specifically concerned with the circular dependency that I'm getting initially as our appModule itself needs the HMR.
Hi.
I'm trying to use this solution in complex Angular 8 application with lazy modules.
I put this code to lazy module:
export class SomeModule {
constructor(moduleRef: NgModuleRef<SomeModule>) {
HmrModuleHelper.enableHmrRouterNgModule(module, moduleRef);
}
}
HmrModuleHelper.enableHmrNodeModule(module);
It seems HMR works good. In console log I see that it detect where changes were made, and reloads right module. Also component in app reloads - it display loader and then data. The rest of app doesn't change.
Only problem is that browser doesn't apply changes in component I edited. It refreshes component, but displays old HTML. Once I refresh page, then I can see new changes.
Do you have any suggestions what could it happen?
Of course your example works perfectly, even after upgraded to Angular 8 and changed lazy-loading syntax to new one.
This was originally built for angular 7, is there any plans on maintaining this solution to HMR lazy loading for angular 8, 9, 10, or 11?
I have a module named index.module, then set a router to lazy load it.
The router component is like a layout component which contains some other components, for example header, footer.
The problem is when I used the hmr-module-helper to wrap my index.module, everytime I modify the files in other components( not the route component ), HMR didn't work correctly, it replaced the changed files but page content still stay no change.
Could you tell me is there any solution to work around? thanks!
here is my code.
index.module.ts:
import { NgModule, NgModuleRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IndexRoutingModule } from './index-routing.module';
import { IndexLayoutComponent } from '../../components/index/common/index-layout/index-layout.component';
import { HomePageComponent } from '../../components/index/home-page/home-page.component';
import { IndexHeaderComponent } from '../../components/index/common/index-header/index-header.component';
import { IndexFooterComponent } from '../../components/index/common/index-footer/index-footer.component';
import { HmrModuleHelper } from 'src/app/hmr-module-helper';
@NgModule({
declarations: [
IndexLayoutComponent,
HomePageComponent,
IndexHeaderComponent,
IndexFooterComponent
],
imports: [CommonModule, IndexRoutingModule]
})
export class IndexModule {
constructor(moduleRef: NgModuleRef<IndexModule>) {
HmrModuleHelper.enableHmrRouterNgModule(module, moduleRef);
}
}
HmrModuleHelper.enableHmrNodeModule(module);
index-routing.module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexLayoutComponent } from 'src/app/components/index/common/index-layout/index-layout.component';
import { HomePageComponent } from 'src/app/components/index/home-page/home-page.component';
const routes: Routes = [
{
path: '',
component: IndexLayoutComponent,
children: [
{
path: 'index',
component: HomePageComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class IndexRoutingModule {}
index-layout.component:
<app-index-header></app-index-header>
<router-outlet></router-outlet>
<app-index-footer></app-index-footer>
Expect:
The page content change as well.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.