5 lines
27 KiB
JSON
5 lines
27 KiB
JSON
{
|
||
"id": "guide/lazy-loading-ngmodules",
|
||
"title": "Lazy-loading feature modules",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/lazy-loading-ngmodules.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"lazy-loading-feature-modules\">Lazy-loading feature modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#lazy-loading-feature-modules\"><i class=\"material-icons\">link</i></a></h1>\n<p>By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial\nbundle sizes smaller, which in turn helps decrease load times.</p>\n<div class=\"alert is-helpful\">\n<p>For the final sample app with two lazy-loaded modules that this page describes, see the\n<live-example></live-example>.</p>\n</div>\n<a id=\"lazy-loading\"></a>\n<h2 id=\"lazy-loading-basics\">Lazy loading basics<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#lazy-loading-basics\"><i class=\"material-icons\">link</i></a></h2>\n<p>This section introduces the basic procedure for configuring a lazy-loaded route.\nFor a step-by-step example, see the <a href=\"guide/lazy-loading-ngmodules#step-by-step\">step-by-step setup</a> section on this page.</p>\n<p>To lazy load Angular modules, use <code>loadChildren</code> (instead of <code>component</code>) in your <code>AppRoutingModule</code> <code>routes</code> configuration as follows.</p>\n<code-example header=\"AppRoutingModule (excerpt)\">\n\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n {\n path: 'items',\n loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)\n }\n];\n\n</code-example>\n<p>In the lazy-loaded module's routing module, add a route for the component.</p>\n<code-example header=\"Routing module for lazy loaded module (excerpt)\">\n\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n {\n path: '',\n component: ItemsComponent\n }\n];\n\n</code-example>\n<p>Also be sure to remove the <code>ItemsModule</code> from the <code>AppModule</code>.\nFor step-by-step instructions on lazy loading modules, continue with the following sections of this page.</p>\n<a id=\"step-by-step\"></a>\n<h2 id=\"step-by-step-setup\">Step-by-step setup<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#step-by-step-setup\"><i class=\"material-icons\">link</i></a></h2>\n<p>There are two main steps to setting up a lazy-loaded feature module:</p>\n<ol>\n<li>Create the feature module with the CLI, using the <code>--route</code> flag.</li>\n<li>Configure the routes.</li>\n</ol>\n<h3 id=\"set-up-an-app\">Set up an app<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#set-up-an-app\"><i class=\"material-icons\">link</i></a></h3>\n<p>If you don’t already have an app, you can follow the steps below to\ncreate one with the CLI. If you already have an app, skip to\n<a href=\"guide/lazy-loading-ngmodules#config-routes\">Configure the routes</a>. Enter the following command\nwhere <code>customer-app</code> is the name of your app:</p>\n<code-example language=\"bash\">\nng new customer-app --routing\n</code-example>\n<p>This creates an app called <code>customer-app</code> and the <code>--routing</code> flag\ngenerates a file called <code>app-routing.module.ts</code>, which is one of\nthe files you need for setting up lazy loading for your feature module.\nNavigate into the project by issuing the command <code>cd customer-app</code>.</p>\n<div class=\"alert is-helpful\">\n<p>The <code>--routing</code> option requires Angular/CLI version 8.1 or higher.\nSee <a href=\"guide/updating\">Keeping Up to Date</a>.</p>\n</div>\n<h3 id=\"create-a-feature-module-with-routing\">Create a feature module with routing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#create-a-feature-module-with-routing\"><i class=\"material-icons\">link</i></a></h3>\n<p>Next, you’ll need a feature module with a component to route to.\nTo make one, enter the following command in the terminal, where <code>customers</code> is the name of the feature module. The path for loading the <code>customers</code> feature modules is also <code>customers</code> because it is specified with the <code>--route</code> option:</p>\n<code-example language=\"bash\">\nng generate module customers --route customers --module app.module\n</code-example>\n<p>This creates a <code>customers</code> folder having the new lazy-loadable feature module <code>CustomersModule</code> defined in the <code>customers.module.ts</code> file and the routing module <code>CustomersRoutingModule</code> defined in the <code>customers-routing.module.ts</code> file. The command automatically declares the <code>CustomersComponent</code> and imports <code>CustomersRoutingModule</code> inside the new feature module.</p>\n<p>Because the new module is meant to be lazy-loaded, the command does NOT add a reference to the new feature module in the application's root module file, <code>app.module.ts</code>.\nInstead, it adds the declared route, <code>customers</code> to the <code>routes</code> array declared in the module provided as the <code>--module</code> option.</p>\n<code-example header=\"src/app/app-routing.module.ts\" path=\"lazy-loading-ngmodules/src/app/app-routing.module.ts\" region=\"routes-customers\">\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n {\n path: 'customers',\n loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)\n }\n];\n\n</code-example>\n<p>Notice that the lazy-loading syntax uses <code>loadChildren</code> followed by a function that uses the browser's built-in <code>import('...')</code> syntax for dynamic imports.\nThe import path is the relative path to the module.</p>\n<div class=\"callout is-helpful\">\n<header>String-based lazy loading</header>\n<p>In Angular version 8, the string syntax for the <code>loadChildren</code> route specification <a href=\"https://angular.io/guide/deprecations#loadchildren-string-syntax\">was deprecated</a> in favor of the <code>import()</code> syntax. However, you can opt into using string-based lazy loading (<code>loadChildren: './path/to/module#Module'</code>) by including the lazy-loaded routes in your <code>tsconfig</code> file, which includes the lazy-loaded files in the compilation.</p>\n<p>By default the CLI will generate projects which stricter file inclusions intended to be used with the <code>import()</code> syntax.</p>\n</div>\n<h3 id=\"add-another-feature-module\">Add another feature module<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#add-another-feature-module\"><i class=\"material-icons\">link</i></a></h3>\n<p>Use the same command to create a second lazy-loaded feature module with routing, along with its stub component.</p>\n<code-example language=\"bash\">\nng generate module orders --route orders --module app.module\n</code-example>\n<p>This creates a new folder called <code>orders</code> containing the <code>OrdersModule</code> and <code>OrdersRoutingModule</code>, along with the new <code>OrdersComponent</code> source files.\nThe <code>orders</code> route, specified with the <code>--route</code> option, is added to the <code>routes</code> array inside the <code>app-routing.module.ts</code> file, using the lazy-loading syntax.</p>\n<code-example header=\"src/app/app-routing.module.ts\" path=\"lazy-loading-ngmodules/src/app/app-routing.module.ts\" region=\"routes-customers-orders\">\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n {\n path: 'customers',\n loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)\n },\n {\n path: 'orders',\n loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)\n }\n];\n\n</code-example>\n<h3 id=\"set-up-the-ui\">Set up the UI<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#set-up-the-ui\"><i class=\"material-icons\">link</i></a></h3>\n<p>Though you can type the URL into the address bar, a navigation UI is easier for the user and more common.\nReplace the default placeholder markup in <code>app.component.html</code> with a custom nav\nso you can easily navigate to your modules in the browser:</p>\n<code-example path=\"lazy-loading-ngmodules/src/app/app.component.html\" header=\"src/app/app.component.html\" region=\"app-component-template\">\n<h1>\n {{title}}\n</h1>\n\n<button <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/customers\">Customers</button>\n<button <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"/orders\">Orders</button>\n<button <a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>=\"\">Home</button>\n\n<<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>></<a href=\"api/router/RouterOutlet\" class=\"code-anchor\">router-outlet</a>>\n\n\n</code-example>\n<p>To see your app in the browser so far, enter the following command in the terminal window:</p>\n<code-example language=\"bash\">\nng serve\n</code-example>\n<p>Then go to <code>localhost:4200</code> where you should see “customer-app” and three buttons.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/lazy-loading-ngmodules/three-buttons.png\" width=\"300\" alt=\"three buttons in the browser\">\n</div>\n<p>These buttons work, because the CLI automatically added the routes to the feature modules to the <code>routes</code> array in <code>app.module.ts</code>.</p>\n<a id=\"config-routes\"></a>\n<h3 id=\"imports-and-route-configuration\">Imports and route configuration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#imports-and-route-configuration\"><i class=\"material-icons\">link</i></a></h3>\n<p>The CLI automatically added each feature module to the routes map at the application level.\nFinish this off by adding the default route. In the <code>app-routing.module.ts</code> file, update the <code>routes</code> array with the following:</p>\n<code-example path=\"lazy-loading-ngmodules/src/app/app-routing.module.ts\" id=\"app-routing.module.ts\" region=\"const-routes\" header=\"src/app/app-routing.module.ts\">\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n {\n path: 'customers',\n loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)\n },\n {\n path: 'orders',\n loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule)\n },\n {\n path: '',\n redirectTo: '',\n pathMatch: 'full'\n }\n];\n\n</code-example>\n<p>The first two paths are the routes to the <code>CustomersModule</code> and the <code>OrdersModule</code>.\nThe final entry defines a default route. The empty path matches everything that doesn't match an earlier path.</p>\n<h3 id=\"inside-the-feature-module\">Inside the feature module<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#inside-the-feature-module\"><i class=\"material-icons\">link</i></a></h3>\n<p>Next, take a look at the <code>customers.module.ts</code> file. If you’re using the CLI and following the steps outlined in this page, you don’t have to do anything here.</p>\n<code-example path=\"lazy-loading-ngmodules/src/app/customers/customers.module.ts\" id=\"customers.module.ts\" region=\"customers-module\" header=\"src/app/customers/customers.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a> } from '@angular/common';\nimport { CustomersRoutingModule } from './customers-routing.module';\nimport { CustomersComponent } from './customers.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [\n <a href=\"api/common/CommonModule\" class=\"code-anchor\">CommonModule</a>,\n CustomersRoutingModule\n ],\n declarations: [CustomersComponent]\n})\nexport class CustomersModule { }\n\n</code-example>\n<p>The <code>customers.module.ts</code> file imports the <code>customers-routing.module.ts</code> and <code>customers.component.ts</code> files. <code>CustomersRoutingModule</code> is listed in the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> <code>imports</code> array giving <code>CustomersModule</code> access to its own routing module. <code>CustomersComponent</code> is in the <code>declarations</code> array, which means <code>CustomersComponent</code> belongs to the <code>CustomersModule</code>.</p>\n<p>The <code>app-routing.module.ts</code> then imports the feature module, <code>customers.module.ts</code> using JavaScript's dynamic import.</p>\n<p>The feature-specific route definition file <code>customers-routing.module.ts</code> imports its own feature component defined in the <code>customers.component.ts</code> file, along with the other JavaScript import statements. It then maps the empty path to the <code>CustomersComponent</code>.</p>\n<code-example path=\"lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts\" id=\"customers-routing.module.ts\" region=\"customers-routing-module\" header=\"src/app/customers/customers-routing.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a>, <a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a> } from '@angular/router';\n\nimport { CustomersComponent } from './customers.component';\n\n\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n {\n path: '',\n component: CustomersComponent\n }\n];\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [RouterModule.forChild(routes)],\n exports: [<a href=\"api/router/RouterModule\" class=\"code-anchor\">RouterModule</a>]\n})\nexport class CustomersRoutingModule { }\n\n</code-example>\n<p>The <code>path</code> here is set to an empty string because the path in <code>AppRoutingModule</code> is already set to <code>customers</code>, so this route in the <code>CustomersRoutingModule</code>, is already within the <code>customers</code> context. Every route in this routing module is a child route.</p>\n<p>The other feature module's routing module is configured similarly.</p>\n<code-example path=\"lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts\" id=\"orders-routing.module.ts\" region=\"orders-routing-module-detail\" header=\"src/app/orders/orders-routing.module.ts (excerpt)\">\nimport { OrdersComponent } from './orders.component';\n\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n {\n path: '',\n component: OrdersComponent\n }\n];\n\n</code-example>\n<h3 id=\"verify-lazy-loading\">Verify lazy loading<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#verify-lazy-loading\"><i class=\"material-icons\">link</i></a></h3>\n<p>You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing <code>Cmd+Option+i</code> on a Mac or <code>Ctrl+Shift+j</code> on a PC and go to the Network Tab.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/lazy-loading-ngmodules/network-tab.png\" width=\"600\" alt=\"lazy loaded modules diagram\">\n</div>\n<p>Click on the Orders or Customers button. If you see a chunk appear, everything is wired up properly and the feature module is being lazy loaded. A chunk should appear for Orders and for Customers but will only appear once for each.</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/lazy-loading-ngmodules/chunk-arrow.png\" width=\"600\" alt=\"lazy loaded modules diagram\">\n</div>\n<p>To see it again, or to test after working in the project, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab:</p>\n<div class=\"lightbox\">\n <img src=\"generated/images/guide/lazy-loading-ngmodules/clear.gif\" width=\"200\" alt=\"lazy loaded modules diagram\">\n</div>\n<p>Then reload with <code>Cmd+r</code> or <code>Ctrl+r</code>, depending on your platform.</p>\n<h2 id=\"forroot-and-forchild\"><code>forRoot()</code> and <code>forChild()</code><a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#forroot-and-forchild\"><i class=\"material-icons\">link</i></a></h2>\n<p>You might have noticed that the CLI adds <code>RouterModule.forRoot(routes)</code> to the <code>AppRoutingModule</code> <code>imports</code> array.\nThis lets Angular know that the <code>AppRoutingModule</code> is a routing module and <code>forRoot()</code> specifies that this is the root routing module.\nIt configures all the routes you pass to it, gives you access to the router directives, and registers the <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> service.\nUse <code>forRoot()</code> only once in the application, inside the <code>AppRoutingModule</code>.</p>\n<p>The CLI also adds <code>RouterModule.forChild(routes)</code> to feature routing modules.\nThis way, Angular knows that the route list is only responsible for providing additional routes and is intended for feature modules.\nYou can use <code>forChild()</code> in multiple modules.</p>\n<p>The <code>forRoot()</code> method takes care of the <em>global</em> injector configuration for the Router.\nThe <code>forChild()</code> method has no injector configuration. It uses directives such as <code><a href=\"api/router/RouterOutlet\" class=\"code-anchor\">RouterOutlet</a></code> and <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">RouterLink</a></code>.\nFor more information, see the <a href=\"guide/singleton-services#forRoot\"><code>forRoot()</code> pattern</a> section of the <a href=\"guide/singleton-services\">Singleton Services</a> guide.</p>\n<a id=\"preloading\"></a>\n<h2 id=\"preloading\">Preloading<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#preloading\"><i class=\"material-icons\">link</i></a></h2>\n<p>Preloading improves UX by loading parts of your app in the background.\nYou can preload modules or component data.</p>\n<h3 id=\"preloading-modules\">Preloading modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#preloading-modules\"><i class=\"material-icons\">link</i></a></h3>\n<p>Preloading modules improves UX by loading parts of your app in the background so users don't have to wait for the elements to download when they activate a route.</p>\n<p>To enable preloading of all lazy loaded modules, import the <code><a href=\"api/router/PreloadAllModules\" class=\"code-anchor\">PreloadAllModules</a></code> token from the Angular <code>router</code>.</p>\n<code-example header=\"AppRoutingModule (excerpt)\">\n\nimport { <a href=\"api/router/PreloadAllModules\" class=\"code-anchor\">PreloadAllModules</a> } from '@angular/router';\n\n</code-example>\n<p>Still in the <code>AppRoutingModule</code>, specify your preloading strategy in <code>forRoot()</code>.</p>\n<code-example header=\"AppRoutingModule (excerpt)\">\n\nRouterModule.forRoot(\n appRoutes,\n {\n preloadingStrategy: <a href=\"api/router/PreloadAllModules\" class=\"code-anchor\">PreloadAllModules</a>\n }\n)\n\n</code-example>\n<h3 id=\"preloading-component-data\">Preloading component data<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#preloading-component-data\"><i class=\"material-icons\">link</i></a></h3>\n<p>To preload component data, you can use a <code>resolver</code>.\nResolvers improve UX by blocking the page load until all necessary data is available to fully display the page.</p>\n<h4 id=\"resolvers\">Resolvers<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#resolvers\"><i class=\"material-icons\">link</i></a></h4>\n<p>Create a resolver service.\nWith the CLI, the command to generate a service is as follows:</p>\n<code-example language=\"none\" class=\"code-shell\">\n ng generate service <service-name>\n</service-name></code-example>\n<p>In your service, import the following router members, implement <code><a href=\"api/router/Resolve\" class=\"code-anchor\">Resolve</a></code>, and inject the <code><a href=\"api/router/Router\" class=\"code-anchor\">Router</a></code> service:</p>\n<code-example header=\"Resolver service (excerpt)\">\n\nimport { <a href=\"api/router/Resolve\" class=\"code-anchor\">Resolve</a> } from '@angular/router';\n\n...\n\nexport class CrisisDetailResolverService implements <a href=\"api/router/Resolve\" class=\"code-anchor\">Resolve</a><> {\n resolve(route: <a href=\"api/router/ActivatedRouteSnapshot\" class=\"code-anchor\">ActivatedRouteSnapshot</a>, <a href=\"api/animations/state\" class=\"code-anchor\">state</a>: <a href=\"api/router/RouterStateSnapshot\" class=\"code-anchor\">RouterStateSnapshot</a>): Observable<> {\n // your logic goes here\n }\n}\n\n</code-example>\n<p>Import this resolver into your module's routing module.</p>\n<code-example header=\"Feature module's routing module (excerpt)\">\n\nimport { YourResolverService } from './your-resolver.service';\n\n</code-example>\n<p>Add a <code>resolve</code> object to the component's <code>route</code> configuration.</p>\n<code-example header=\"Feature module's routing module (excerpt)\">\n{\n path: '/your-path',\n component: YourComponent,\n resolve: {\n crisis: YourResolverService\n }\n}\n</code-example>\n<p>In the component, use an <code>Observable</code> to get the data from the <code><a href=\"api/router/ActivatedRoute\" class=\"code-anchor\">ActivatedRoute</a></code>.</p>\n<code-example header=\"Component (excerpt)\">\nngOnInit() {\n this.route.data\n .subscribe((your-parameters) => {\n // your data-specific code goes here\n });\n}\n</code-example>\n<p>For more information with a working example, see the <a href=\"guide/router-tutorial-toh#preloading-background-loading-of-feature-areas\">routing tutorial section on preloading</a>.</p>\n<h2 id=\"troubleshooting-lazy-loading-modules\">Troubleshooting lazy-loading modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#troubleshooting-lazy-loading-modules\"><i class=\"material-icons\">link</i></a></h2>\n<p>A common error when lazy-loading modules is importing common modules in multiple places within an application. You can test for this condition by first generating the module using the Angular CLI and including the <code>--route route-name</code> parameter, where <code>route-name</code> is the name of your module. Next, generate the module without the <code>--route</code> parameter. If the Angular CLI generates an error when you use the <code>--route</code> parameter, but runs correctly without it, you may have imported the same module in multiple places.</p>\n<p>Remember, many common Angular modules should be imported at the base of your application.</p>\n<p>For more information on Angular Modules, see <a href=\"guide/ngmodules\">NgModules</a>.</p>\n<h2 id=\"more-on-ngmodules-and-routing\">More on NgModules and routing<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/lazy-loading-ngmodules#more-on-ngmodules-and-routing\"><i class=\"material-icons\">link</i></a></h2>\n<p>You may also be interested in the following:</p>\n<ul>\n<li><a href=\"guide/router\">Routing and Navigation</a>.</li>\n<li><a href=\"guide/providers\">Providers</a>.</li>\n<li><a href=\"guide/module-types\">Types of Feature Modules</a>.</li>\n<li><a href=\"https://web.dev/route-level-code-splitting-in-angular/\">Route-level code-splitting in Angular</a></li>\n<li><a href=\"https://web.dev/route-preloading-in-angular/\">Route preloading strategies in Angular</a></li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/entry-components\n - guide/example-apps-list\n - guide/feature-modules\n - guide/module-types\n - guide/providers\n - guide/router\n - guide/singleton-services\n-->\n<!-- links from this doc:\n - api/animations/state\n - api/common/CommonModule\n - api/core/NgModule\n - api/router/ActivatedRoute\n - api/router/ActivatedRouteSnapshot\n - api/router/PreloadAllModules\n - api/router/Resolve\n - api/router/Router\n - api/router/RouterLink\n - api/router/RouterModule\n - api/router/RouterOutlet\n - api/router/RouterStateSnapshot\n - api/router/Routes\n - guide/lazy-loading-ngmodules#add-another-feature-module\n - guide/lazy-loading-ngmodules#config-routes\n - guide/lazy-loading-ngmodules#create-a-feature-module-with-routing\n - guide/lazy-loading-ngmodules#forroot-and-forchild\n - guide/lazy-loading-ngmodules#imports-and-route-configuration\n - guide/lazy-loading-ngmodules#inside-the-feature-module\n - guide/lazy-loading-ngmodules#lazy-loading-basics\n - guide/lazy-loading-ngmodules#lazy-loading-feature-modules\n - guide/lazy-loading-ngmodules#more-on-ngmodules-and-routing\n - guide/lazy-loading-ngmodules#preloading\n - guide/lazy-loading-ngmodules#preloading-component-data\n - guide/lazy-loading-ngmodules#preloading-modules\n - guide/lazy-loading-ngmodules#resolvers\n - guide/lazy-loading-ngmodules#set-up-an-app\n - guide/lazy-loading-ngmodules#set-up-the-ui\n - guide/lazy-loading-ngmodules#step-by-step\n - guide/lazy-loading-ngmodules#step-by-step-setup\n - guide/lazy-loading-ngmodules#troubleshooting-lazy-loading-modules\n - guide/lazy-loading-ngmodules#verify-lazy-loading\n - guide/module-types\n - guide/ngmodules\n - guide/providers\n - guide/router\n - guide/router-tutorial-toh#preloading-background-loading-of-feature-areas\n - guide/singleton-services\n - guide/singleton-services#forRoot\n - guide/updating\n - https://angular.io/guide/deprecations#loadchildren-string-syntax\n - https://github.com/angular/angular/edit/master/aio/content/guide/lazy-loading-ngmodules.md?message=docs%3A%20describe%20your%20change...\n - https://web.dev/route-level-code-splitting-in-angular/\n - https://web.dev/route-preloading-in-angular/\n-->"
|
||
} |