{"id":21231573,"url":"https://github.com/piyalidas10/angular-lazy-loading","last_synced_at":"2026-04-30T06:36:41.624Z","repository":{"id":191788291,"uuid":"685398829","full_name":"piyalidas10/Angular-Lazy-Loading","owner":"piyalidas10","description":"Angular Lazy Loading in Angular 14","archived":false,"fork":false,"pushed_at":"2023-09-11T04:41:54.000Z","size":19887,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T02:32:41.813Z","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/piyalidas10.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}},"created_at":"2023-08-31T06:25:53.000Z","updated_at":"2024-12-05T02:51:31.000Z","dependencies_parsed_at":"2023-08-31T18:45:47.484Z","dependency_job_id":"4a1fabaa-2131-40b5-a4c8-b952caed63b1","html_url":"https://github.com/piyalidas10/Angular-Lazy-Loading","commit_stats":null,"previous_names":["piyalidas10/angular-lazy-loading"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/Angular-Lazy-Loading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Lazy-Loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Lazy-Loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Lazy-Loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Lazy-Loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Angular-Lazy-Loading/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FAngular-Lazy-Loading/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259888182,"owners_count":22927071,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":"2024-11-20T23:47:21.324Z","updated_at":"2026-04-30T06:36:36.585Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### forRoot() and forChild() of Angular Lazy Loading Module\n#### forRoot() \n```\nRouterModule.forRoot(routes)\n```\nThe forRoot static method is the method that configures the root routing module for your app. When you call RouterModule.forRoot(routes), you are asking Angular to instantiate an instance of the Router class globally. Just like Angular creates a new base AppModule to import all of your feature modules, it also provides the AppRoutingModule to import all of your child routes.\n\nIn the new app that you have created via the Angular CLI, the forRoot method is actually already being used inside of the app-routing.module.ts. In your app, you only want to use the forRoot method once. This is because this method tells Angular to instantiate an instance of the Router class under the hood, and there can be only one router in your app. The forRoot static method is a part of a pattern that ensures that you are using singleton classes.\n\n#### forChild()\n```\nRouterModule.forChild(routes)\n```\n\nWhen you are using the forChild static method, you are basically telling Angular, \"There is already a Router instance available in the app so please just register all of these routes with that instance.\" The forChild method is the method that you will call to register routes throughout your app and you will use it inside of the child, routing modules that you create.\n\nThe forChild static method is useful because it plays a core part of Angular module functionality by allowing you to maintain separation of concerns within your app.\n\n#### forRoot() and forChild()\n\nYou might have noticed that the Angular CLI adds RouterModule.forRoot(routes) to the AppRoutingModule imports array. This lets Angular know that the AppRoutingModule is a routing module and forRoot() specifies that this is the root routing module. It configures all the routes you pass to it, gives you access to the router directives, and registers the Router service. Use forRoot() only once in the application, inside the AppRoutingModule.\n\nThe Angular CLI also adds RouterModule.forChild(routes) to feature routing modules. This way, Angular knows that the route list is only responsible for providing extra routes and is intended for feature modules. You can use forChild() in multiple modules.\n\nThe forRoot() method takes care of the global injector configuration for the Router. The forChild() method has no injector configuration. It uses directives such as RouterOutlet and RouterLink. For more information, see the forRoot() pattern section of the Singleton Services guide.\nCall forRoot only in the root application module, AppModule. Calling it in any other module, particularly in a lazy loaded module, is contrary to the intent and is likely to produce a runtime error.\n\nRemember to import the result; don't add it to any other @NgModule list.\n\nEvery application has exactly one starting point (root) where the main routing service should be initialized with forRoot, while routes for particular \"child\" features should be registered additionaly with forChild. It is extremely useful for sub modules and lazy loaded modules which do not have to be loaded at the application start.\nWhat is the diffrence between RouterModule.forRoot() vs RouterModule.forChild()? Why is it important?\nforRoot creates a module that contains all the directives, the given routes, and the router service itself.\nforChild creates a module that contains all the directives and the given routes when you call RouterModule.forChild(routes), Angular check Router instance available in the app and register all of these routes with that instance, but does not include the router service. It registers the routers and uses the router service created at the root level.\nThis is important because location is a mutable global property. Having more than one object manipulating the location is not a good idea.\n\n#### How does loadChildren property work?\n```\nconst routes: Routes = [\n  ...,\n  { path: 'home', loadChildren: () =\u003e import('./home/home.module').then(m =\u003e m.HomeModule) }\n  ...\n]\n```\n\nIn the above example, loadChildren tells the router to fetch the HomeModule bundle assigned to it when the user visits '/home' url. (To be more precise, it will ask the module loader to find and load it.)\n\nRouter will get the router configuration from home module. It merges HomeModule router configuration with the main application configuration.Activate all the needed components.\n\n#### Do you need a Routing Module? Why/not?\n\nYes if the user was expected to navigate between different URLs. The Routing Module interprets the browser's URL as an instruction to load a specific component and its view. The application has to have its main router configured and bootstraped by passing an array of routes to RouterModule.forRoot(), and since this returns a module, it has to be added to the imports meta property in the main application module.\n\nThe RouterModule:\n\n1. separates our routing concerns from our feature module\n2. provides a module to replace or remove when testing our feature module\n3. provides a common place for require routing service providers including guards and resolvers\n4. is not concerned with feature module declarations\n\n#### When does a lazy loaded module is loaded?\n\nThe loadChildren property is used by the Router to map to a bundle and lazy-load it. The router will take our loadChildren string and dynamically load in a module, add its routes as child routes to the configuration dynamically and then load the requested route. This will only happen when the route is first requested and the module will be immediately be available for subsequent requests.\n\nNote that lazy-loaded modules should be removed from modules tehy were part of since they will be loaded on demand.\n\n#### When to use ForRoot and ForChild in Angular?\n\nForRoot is used when a module is \"eager\" (loads when the application starts). Angular creates a Router instance for all the modules that is going to be injected into the \"root\" of the modules. When we want to access our providers from any point in the application.\nForChild is used when a module is \"lazy\" (loads when the module loaded on demand). it has its own injector. specifically, when we want to deliver a provider that is visible only to the \"children\" modules of our module.\n\n#### Note\nDon't inject same service on both providers of forRoot() and forChild() modules, if we add it will create two instance of that service. \nThats why routerModule has implemeted following this pattern to ensure router module got only single instance throughout the application.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular-lazy-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fangular-lazy-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular-lazy-loading/lists"}