Currently, I am working on implementing lazy loading for modules from different libraries in my project. This involves utilizing two libraries located in the node_modules directory, which are then lazily loaded by the main application. Below is a snippet of my app-routing-module:
const routes: Routes = [
{
path: 'admin/b',
loadChildren: () => import('lib2-web').then(m => m.BModule)
},
// Other paths and lazy loading configurations
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Upon building the project, the output reveals certain chunk files:
Initial Chunk Files | Names | Size
// Initial chunk file information
Lazy Chunk Files | Names | Size
// Lazy chunk file information
However, I have encountered an issue where instead of having individual lazy chunk files for each module, only a few files are generated. This situation arises when importing modules from one library into another library or the main application.
In order to optimize this setup, one potential solution could involve importing utility modules directly using a more specific syntax, such as
import {DataService} from 'lib1-web/utility'If further refinement is necessary to achieve the desired outcome of having distinct lazy chunk files for each module, additional adjustments may need to be made within the codebase to segregate functionalities effectively.