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