5 lines
8.8 KiB
JSON
5 lines
8.8 KiB
JSON
{
|
||
"id": "guide/entry-components",
|
||
"title": "Entry components",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/entry-components.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=\"entry-components\">Entry components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/entry-components#entry-components\"><i class=\"material-icons\">link</i></a></h1>\n<div class=\"alert is-helpful\">\n<p>Entry components have been deprecated with the <a href=\"https://angular.io/guide/ivy\">Ivy rendering engine</a>.\nFor more information, see <a href=\"https://angular.io/guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required\">entryComponents deprecation</a> in the <a href=\"https://angular.io/guide/deprecations\">Deprecated APIs and features</a>.</p>\n</div>\n<p>An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in an NgModule, or including it in a routing definition.</p>\n<div class=\"alert is-helpful\">\n<p> To contrast the two types of components, there are components which are included in the template, which are declarative. Additionally, there are components which you load imperatively; that is, entry components.</p>\n</div>\n<p>There are two main kinds of entry components:</p>\n<ul>\n<li>The bootstrapped root component.</li>\n<li>A component you specify in a route definition.</li>\n</ul>\n<h2 id=\"a-bootstrapped-entry-component\">A bootstrapped entry component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/entry-components#a-bootstrapped-entry-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>The following is an example of specifying a bootstrapped component,\n<code>AppComponent</code>, in a basic <code>app.module.ts</code>:</p>\n<code-example language=\"typescript\">\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n declarations: [\n AppComponent\n ],\n imports: [\n <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a>,\n <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</a>,\n <a href=\"api/common/http/HttpClientModule\" class=\"code-anchor\">HttpClientModule</a>,\n AppRoutingModule\n ],\n providers: [],\n bootstrap: [AppComponent] // bootstrapped entry component\n})\n</code-example>\n<p>A bootstrapped component is an entry component\nthat Angular loads into the DOM during the bootstrap process (application launch).\nOther entry components are loaded dynamically by other means, such as with the router.</p>\n<p>Angular loads a root <code>AppComponent</code> dynamically because it's listed by type in <code>@<a href=\"api/core/NgModule#bootstrap\" class=\"code-anchor\">NgModule.bootstrap</a></code>.</p>\n<div class=\"alert is-helpful\">\n<p>A component can also be bootstrapped imperatively in the module's <code>ngDoBootstrap()</code> method.\nThe <code>@<a href=\"api/core/NgModule#bootstrap\" class=\"code-anchor\">NgModule.bootstrap</a></code> property tells the compiler that this is an entry component and\nit should generate code to bootstrap the application with this component.</p>\n</div>\n<p>A bootstrapped component is necessarily an entry component because bootstrapping is an imperative process, thus it needs to have an entry component.</p>\n<h2 id=\"a-routed-entry-component\">A routed entry component<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/entry-components#a-routed-entry-component\"><i class=\"material-icons\">link</i></a></h2>\n<p>The second kind of entry component occurs in a route definition like\nthis:</p>\n<code-example language=\"typescript\">\nconst routes: <a href=\"api/router/Routes\" class=\"code-anchor\">Routes</a> = [\n {\n path: '',\n component: CustomerListComponent\n }\n];\n</code-example>\n<p>A route definition refers to a component by its type with <code>component: CustomerListComponent</code>.</p>\n<p>All router components must be entry components. Because this would require you to add the component in two places (router and <code>entryComponents</code>) the Compiler is smart enough to recognize that this is a router definition and automatically add the router component into <code>entryComponents</code>.</p>\n<h2 id=\"the-entrycomponents-array\">The <code>entryComponents</code> array<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/entry-components#the-entrycomponents-array\"><i class=\"material-icons\">link</i></a></h2>\n<div class=\"alert is-helpful\">\n<p> Since 9.0.0 with Ivy, the <code>entryComponents</code> property is no longer necessary. See <a href=\"guide/deprecations#entryComponents\">deprecations guide</a>.</p>\n</div>\n<p>Though the <code>@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator has an <code>entryComponents</code> array, most of the time\nyou won't have to explicitly set any entry components because Angular adds components listed in <code>@<a href=\"api/core/NgModule#bootstrap\" class=\"code-anchor\">NgModule.bootstrap</a></code> and those in route definitions to entry components automatically. Though these two mechanisms account for most entry components, if your app happens to bootstrap or dynamically load a component by type imperatively,\nyou must add it to <code>entryComponents</code> explicitly.</p>\n<h3 id=\"entrycomponents-and-the-compiler\"><code>entryComponents</code> and the compiler<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/entry-components#entrycomponents-and-the-compiler\"><i class=\"material-icons\">link</i></a></h3>\n<p>For production apps you want to load the smallest code possible.\nThe code should contain only the classes that you actually need and\nexclude components that are never used. For this reason, the Angular compiler only generates code for components which are reachable from the <code>entryComponents</code>; This means that adding more references to <code>@<a href=\"api/core/NgModule#declarations\" class=\"code-anchor\">NgModule.declarations</a></code> does not imply that they will necessarily be included in the final bundle.</p>\n<p>In fact, many libraries declare and export components you'll never use.\nFor example, a material design library will export all components because it doesn’t know which ones you will use. However, it is unlikely that you will use them all.\nFor the ones you don't reference, the tree shaker drops these components from the final code package.</p>\n<p>If a component isn't an <em>entry component</em> and isn't found in a template,\nthe tree shaker will throw it away. So, it's best to add only the components that are truly entry components to help keep your app\nas trim as possible.</p>\n<h2 id=\"more-on-angular-modules\">More on Angular modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/entry-components#more-on-angular-modules\"><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/module-types\">Types of NgModules</a></li>\n<li><a href=\"guide/lazy-loading-ngmodules\">Lazy Loading Modules with the Angular Router</a>.</li>\n<li><a href=\"guide/providers\">Providers</a>.</li>\n<li><a href=\"guide/ngmodule-faq\">NgModules FAQ</a>.</li>\n</ul>\n\n \n</div>\n\n<!-- links to this doc:\n - api/core/DoBootstrap\n - guide/ngmodule-api\n - guide/ngmodule-faq\n - guide/ngmodule-vs-jsmodule\n - guide/ngmodules\n-->\n<!-- links from this doc:\n - api/common/http/HttpClientModule\n - api/core/NgModule\n - api/core/NgModule#bootstrap\n - api/core/NgModule#declarations\n - api/forms/FormsModule\n - api/platform-browser/BrowserModule\n - api/router/Routes\n - guide/deprecations#entryComponents\n - guide/entry-components#a-bootstrapped-entry-component\n - guide/entry-components#a-routed-entry-component\n - guide/entry-components#entry-components\n - guide/entry-components#entrycomponents-and-the-compiler\n - guide/entry-components#more-on-angular-modules\n - guide/entry-components#the-entrycomponents-array\n - guide/lazy-loading-ngmodules\n - guide/module-types\n - guide/ngmodule-faq\n - guide/providers\n - https://angular.io/guide/deprecations\n - https://angular.io/guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required\n - https://angular.io/guide/ivy\n - https://github.com/angular/angular/edit/master/aio/content/guide/entry-components.md?message=docs%3A%20describe%20your%20change...\n-->"
|
||
} |