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
|
|||
|
|
}
|