{"id":30613976,"url":"https://github.com/gdfreitasdev/angular-modules-lazy-loading-sample","last_synced_at":"2026-05-19T07:09:58.922Z","repository":{"id":78717987,"uuid":"379066544","full_name":"gdfreitasdev/angular-modules-lazy-loading-sample","owner":"gdfreitasdev","description":"Angular sample for lazy loading routed components","archived":false,"fork":false,"pushed_at":"2021-09-08T01:12:07.000Z","size":144,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-30T06:49:34.420Z","etag":null,"topics":["angular","lazy-loading"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gdfreitasdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-21T21:25:15.000Z","updated_at":"2023-03-04T04:06:37.000Z","dependencies_parsed_at":"2023-03-24T23:16:56.808Z","dependency_job_id":null,"html_url":"https://github.com/gdfreitasdev/angular-modules-lazy-loading-sample","commit_stats":null,"previous_names":["gdfreitasdev/angular-modules-lazy-loading-sample"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gdfreitasdev/angular-modules-lazy-loading-sample","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdfreitasdev%2Fangular-modules-lazy-loading-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdfreitasdev%2Fangular-modules-lazy-loading-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdfreitasdev%2Fangular-modules-lazy-loading-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdfreitasdev%2Fangular-modules-lazy-loading-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gdfreitasdev","download_url":"https://codeload.github.com/gdfreitasdev/angular-modules-lazy-loading-sample/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gdfreitasdev%2Fangular-modules-lazy-loading-sample/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33205681,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"online","status_checked_at":"2026-05-19T02:00:06.763Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","lazy-loading"],"created_at":"2025-08-30T06:49:35.458Z","updated_at":"2026-05-19T07:09:58.903Z","avatar_url":"https://github.com/gdfreitasdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-modules-lazy-loading-sample\n\nSetup lazy loading for routed components\n\n## Step by step\n\n### Create new feature modules\n\nCreate Customer module using CLI\n\n```\nng generate module customers --route customers --module app.module\n```\n\nCreate Orders module using CLI\n\n```\nng generate module orders --route orders --module app.module\n```\n\nThe commands above will auto register routes like below, with `loadChildren` implementation using native ESM dynamic imports syntax.\n\n```ts\nconst routes: Routes = [\n  {\n    path: 'customers',\n    loadChildren: () =\u003e import('./customers/customers.module').then(m =\u003e m.CustomersModule)\n  },\n  {\n    path: 'orders',\n    loadChildren: () =\u003e import('./orders/orders.module').then(m =\u003e m.OrdersModule)\n  },\n  {\n    path: '',\n    redirectTo: '',\n    pathMatch: 'full'\n  }\n];\n```\n\n### Add router links\n\n```html\n\u003ch1\u003e\n  {{title}}\n\u003c/h1\u003e\n\n\u003cbutton routerLink=\"/customers\"\u003eCustomers\u003c/button\u003e\n\u003cbutton routerLink=\"/orders\"\u003eOrders\u003c/button\u003e\n\u003cbutton routerLink=\"\"\u003eHome\u003c/button\u003e\n\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\n### Checkout lazy load in action\n\n```\nng serve\n```\n\nor \n\n```\nyarn start\n```\n\nCheckout it's behaviour by navigating on http://localhost:4200\n\nNotice JavaScript chunks being fetched while routing by looking into network inspection of browser's devtools. It also contains components styles that will be injected in the DOM.\n\n### Bonus: Pre-loading strategy\n\nYou can also configure to automatically pre load modules to improve user experience by setting the strategy on routing module. This prevent users to have to wait for files to be downloaded when routed.\n\n```ts\nimport { PreloadAllModules } from '@angular/router';\n\nRouterModule.forRoot(routes, {\n  preloadingStrategy: PreloadAllModules\n});\n```\n\n## References\n\n- [Lazy-loading feature modules](https://angular.io/guide/lazy-loading-ngmodules)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgdfreitasdev%2Fangular-modules-lazy-loading-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgdfreitasdev%2Fangular-modules-lazy-loading-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgdfreitasdev%2Fangular-modules-lazy-loading-sample/lists"}