{"id":2970,"date":"2023-11-15T23:07:59","date_gmt":"2023-11-15T22:07:59","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2970"},"modified":"2023-11-15T23:31:00","modified_gmt":"2023-11-15T22:31:00","slug":"how-to-bootstrapping-standalone-components-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/11\/15\/how-to-bootstrapping-standalone-components-in-angular\/","title":{"rendered":"How to bootstrapping Standalone Components in Angular"},"content":{"rendered":"\n

The standalone component approach differs from using the NgModule<\/code> approach the moment we want to bootstrap.<\/p>\n\n\n\n

With NgModule<\/strong><\/code>, this is done via a bootstrapModule<\/strong><\/code> function exported from the @angular\/platform-browser-dynamic<\/strong><\/code> package:<\/p>\n\n\n\n

import { NgModule } from '@angular\/core';\nimport { platformBrowserDynamic } from '@angular\/platform-browser-dynamic';\n\n@NgModule({...})\nexport class AppModule {}\n\nplatformBrowserDynamic()\n  .bootstrapModule(AppModule)\n  .catch((err) => console.error(err));<\/code><\/pre>\n\n\n\n
With standalone components, there are a few changes. Instead of using the @angular\/platform-browser-dynamic<\/code> package, we\u2019ll refactor it to @angular\/platform-browser<\/code><\/strong> instead.<\/p>\n\n\n\n
This exposes to us a new function called bootstrapApplication<\/code>, which expects a @Component<\/code> instead of @NgModule<\/code>:<\/p>\n\n\n\n
import { Component } from '@angular\/core';\nimport { bootstrapApplication } from '@angular\/platform-browser';\n\n@Component({...})\nexport class AppComponent {}\n\nplatformBrowserDynamic()\n  .bootstrapApplication(AppComponent)\n  .catch((err) => console.error(err));<\/code><\/pre>\n\n\n\n
As this returns us a Promise<\/code> as well, we can also use it to catch any errors like with NgModule<\/code>.<\/p>\n\n\n\n
PS: <\/strong>Let us deep analyse  the function signature for bootstrapApplication<\/code><\/p>\n\n\n\n
bootstrapApplication(rootComponent: Type<unknown>, options?: ApplicationConfig | undefined): Promise<ApplicationRef><\/code><\/pre>\n\n\n\n
Here we expect a rootComponent<\/code>,<\/strong> which must be a standalone component. We\u2019ll see an error if the rootComponent is not  a standalone component, for that we\u2019ll need to add standalone: true<\/code> into the @Component<\/code> metadata.<\/p>\n\n\n\n
we\u2019ll also see the options?: ApplicationConfig | undefined<\/code> <\/em><\/strong>which is an interface<\/code> containing only a providers<\/code> property.<\/p>\n\n\n\n
This is where we can then pass any providers we want to make available in our components and children ( for example with the help of importProvidersFrom()<\/em><\/strong> method) . <\/p>\n\n\n\n
example:<\/em><\/strong><\/p>\n\n\n\n
bootstrapApplication(AppComponent, {\r\n  providers: [importProvidersFrom(HttpClientModule), AuthService],\r\n}).catch((err) => console.error(err));<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
The standalone component approach differs from using the NgModule approach the moment we want to bootstrap. With NgModule, this is done via a bootstrapModule function exported from the @angular\/platform-browser-dynamic package: With standalone components, there are a few changes. Instead of using the @angular\/platform-browser-dynamic package, we\u2019ll refactor it to @angular\/platform-browser instead. This exposes to us a new function called bootstrapApplication, which expects a @Component instead of @NgModule: As this returns us […]<\/p>\n","protected":false},"author":1,"featured_media":2038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[109,755,754],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2970"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2970"}],"version-history":[{"count":5,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2970\/revisions"}],"predecessor-version":[{"id":3005,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2970\/revisions\/3005"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2038"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}