{"id":7007,"date":"2023-03-08T21:59:03","date_gmt":"2023-03-08T20:59:03","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=7007"},"modified":"2023-03-08T21:59:03","modified_gmt":"2023-03-08T20:59:03","slug":"tutorial-automatically-migrating-to-standalone-components-in-3-steps","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/","title":{"rendered":"Automatic Migration to Standalone Components in 3 Steps"},"content":{"rendered":"<div class=\"wp-post-series-box series-angulars-future-without-ngmodules wp-post-series-box--expandable\">\n\t\t\t<input id=\"collapsible-series-angulars-future-without-ngmodules69e15a06cd3ec\" class=\"wp-post-series-box__toggle_checkbox\" type=\"checkbox\">\n\t\n\t<label\n\t\tclass=\"wp-post-series-box__label\"\n\t\t\t\t\tfor=\"collapsible-series-angulars-future-without-ngmodules69e15a06cd3ec\"\n\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t<p class=\"wp-post-series-box__name wp-post-series-name\">\n\t\t\tThis is post 8 of 8 in the series <em>&ldquo;Angular&#039;s Future with Standalone Components&rdquo;<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t<div class=\"wp-post-series-box__posts\">\n\t\t\t<ol>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/angulars-future-without-ngmodules-lightweight-solutions-on-top-of-standalone-components\/\">Angular&#8217;s Future Without NgModules &#8211; Part 1: Lightweight Solutions Using Standalone Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/angulars-future-without-ngmodules-part-2-what-does-that-mean-for-our-architecture\/\">Angular&#8217;s Future Without NgModules &#8211; Part 2: What Does That Mean for Our Architecture?<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/4-ways-to-prepare-for-angulars-upcoming-standalone-components\/\">4 Ways to Prepare for Angular&#8217;s Upcoming Standalone Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/routing-and-lazy-loading-with-standalone-components\/\">Routing and Lazy Loading with Angular&#8217;s Standalone Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/angular-elements-web-components-with-standalone-components\/\">Angular Elements: Web Components with Standalone Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/the-refurbished-httpclient-in-angular-15-standalone-apis-and-functional-interceptors\/\">The Refurbished HttpClient in Angular 15 &#8211; Standalone APIs and Functional Interceptors<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><a href=\"https:\/\/www.angulararchitects.io\/en\/blog\/testing-angular-standalone-components\/\">Testing Angular Standalone Components<\/a><\/li>\n\t\t\t\t\t\t\t\t\t<li><span class=\"wp-post-series-box__current\">Automatic Migration to Standalone Components in 3 Steps<\/span><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n<p>While the new Standalone Components can be perfectly combined with traditional NgModule-based Angular code, people might want to fully migrate their projects to the new standalone world. Since Angular 15.2, there is a schematic that automates this task. In 3 steps it converts projects. After each step, we can check the current progress and manually take care of details the automatism could not cope with.<\/p>\n<p>In this short tutorial, I'm going to step through these 3 steps with you and migrate our demo app.<\/p>\n<p>If you want to play through these steps, you can find the NgModule-based initial situation of our tutorial here:<\/p>\n<p>\ud83d\udcc2 <a href=\"https:\/\/github.com\/manfredsteyer\/standalone-example-cli\"><a href=\"https:\/\/github.com\/manfredsteyer\/standalone-example-cli\">https:\/\/github.com\/manfredsteyer\/standalone-example-cli<\/a><\/a> <br \/>\n(<strong>Branch<\/strong> <code>ngmodules<\/code>)<\/p>\n<h2>A First Look at the Application to Migrate<\/h2>\n<p>After checking out the <code>ngmodules<\/code> branch (!) of the above-mentioned project, it might be a good idea to go through the source code a bit. You should recognize the following NgModules: <\/p>\n<ul>\n<li>AppModule<\/li>\n<li>SharedModule<\/li>\n<li>FlightBookingModule<\/li>\n<\/ul>\n<p>Also, start the application to get a first impression of it:<\/p>\n<pre><code class=\"language-bash\">ng serve -o<\/code><\/pre>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/app.png\" alt=\"\" \/><\/p>\n<h2>Step 1<\/h2>\n<p>Now, let's run the migration schematic available from Angular 15.2:<\/p>\n<pre><code class=\"language-bash\">ng g @angular\/core:standalone<\/code><\/pre>\n<p>When asked about the type of migration, we select the first option (because it's such a nice tradition to &quot;start at the beginning&quot; ...). <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/migration-step01.png\" alt=\"\" \/><\/p>\n<p>When asked about the path to migrate, we go with the default value by pressing enter:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/migration-step01a.png\" alt=\"\" \/><\/p>\n<p>This default value <code>.\/<\/code> points to the project's root. Hence, the whole project will be migrated at once. For small and medium-sized applications this should be fine. For bigger applications, however, it might be interesting to migrate the project gradually. <\/p>\n<p>After this first step, you should have a look at the source code and check if everything is fine. In the case of this example project, you don't need to bother. The schematics do a great job here!<\/p>\n<h2>Step 2<\/h2>\n<p>Now, let's run the schematic again for the second step:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/migration-step02.png\" alt=\"\" \/><\/p>\n<p>The output shows that the <code>SharedModule<\/code> was removed and the other modules have been updated. It's fine that the <code>AppModule<\/code> is still in place -- it will be removed in the 3rd step. However, all other NgModules should be gone by now. Unfortunately, the <code>FlightBookingModule<\/code> is still in place:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/app\/booking\/flight-booking.module.ts\n\n@NgModule({\n    imports: [\n        CommonModule,\n        FormsModule,\n        StoreModule.forFeature(bookingFeature),\n        EffectsModule.forFeature([BookingEffects]),\n        RouterModule.forChild(FLIGHT_BOOKING_ROUTES),\n        FlightCardComponent,\n        FlightSearchComponent,\n        FlightEditComponent,\n        PassengerSearchComponent\n    ],\n    exports: [],\n    providers: []\n})\nexport class FlightBookingModule { }<\/code><\/pre>\n<p>As this listing shows, the <code>FlightBookingModule<\/code> doesn't do much anymore. However, there are some calls to methods within the <code>imports<\/code> section. These methods are for setting up the router and the NGRX store. As they are quite library-specific, the automatism was not able to convert them into calls of equivalent Standalone APIs. So, we need to take care of this by hand.<\/p>\n<p><code>RouterModule.forChild<\/code> sets up some child routes that are loaded alongside the <code>FlightBookingModule<\/code>. However, in a standalone world, we don't need NgModules for setting up child routes anymore. Instead, the parent routing configuration can <strong>directly<\/strong> point to the child routes. Hence, let's switch to the file <code>app.routes.ts<\/code> and update the route triggering lazy loading:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/app\/app.routes.ts\n\n{\n    path: &#039;flight-booking&#039;,\n    canActivate: [() =&gt; inject(AuthService).isAuthenticated()],\n    loadChildren: () =&gt;\n        import(&#039;.\/booking\/flight-booking.routes&#039;)\n                .then(m =&gt; m.FLIGHT_BOOKING_ROUTES)\n},<\/code><\/pre>\n<p>Please note that the <code>import<\/code> now directly imports the flight booking routes. There is no indirection via the <code>FlightBookingModule<\/code> anymore. There is even the possibility of shortening this further: If the file <code>flight-booking.routes.ts<\/code> exports the routes as its <strong>default export<\/strong>, we can skip the subsequent <code>then<\/code> call:<\/p>\n<pre><code class=\"language-typescript\">{\n    path: &#039;flight-booking&#039;,\n    canActivate: [() =&gt; inject(AuthService).isAuthenticated()],\n    loadChildren: () =&gt;\n        import(&#039;.\/booking\/flight-booking.routes&#039;)\n},<\/code><\/pre>\n<p>To make sure, the NGRX store is initialized for this lazy application part, we can register the respective providers directly for the lazy child routes:<\/p>\n<pre><code class=\"language-typescript\">\/\/ src\/app\/booking\/flight-booking.routes.ts\nimport { importProvidersFrom, inject } from &#039;@angular\/core&#039;;\n[...]\n\nexport const FLIGHT_BOOKING_ROUTES: Routes = [\n  {\n    path: &#039;&#039;,\n    component: FlightBookingComponent,\n    canActivate: [() =&gt; inject(AuthService).isAuthenticated()],\n    providers: [\n      importProvidersFrom(StoreModule.forFeature(bookingFeature)),\n      importProvidersFrom(EffectsModule.forFeature([BookingEffects])),\n    ],\n    children: [\n        [...]\n    ],\n  },\n];<\/code><\/pre>\n<p>This new provider array sets up services that are only needed for the route at hand and its children. The function <code>importProvidersFrom<\/code> bridges over to the world of NgModules and allows retrieving their providers. <\/p>\n<p>Now, we can delete the <code>FlightBookingModule<\/code> (<code>src\/app\/booking\/flight-booking.module.ts<\/code>).<\/p>\n<h2>Step 3<\/h2>\n<p>Let's run our migration schematic for the 3rd time:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/migration-step03.png\" alt=\"\" \/><\/p>\n<p>This removes the <code>AppModule<\/code> and updates the file <code>main.ts<\/code> to directly bootstrap the <code>AppComponent<\/code>. After this step, the application should work as before:<\/p>\n<pre><code class=\"language-bash\">ng serve -o<\/code><\/pre>\n<h2>Bonus: Moving to Standalone APIs<\/h2>\n<p>When we look into the <code>main.ts<\/code>, we see that it still references several modules with <code>importProvidersFrom<\/code>:<\/p>\n<pre><code class=\"language-typescript\">bootstrapApplication(AppComponent, {\n  providers: [\n    importProvidersFrom(\n      BrowserModule,\n      LayoutModule,\n      LoggerModule.forRoot({\n        level: LogLevel.DEBUG,\n        appenders: [DefaultLogAppender],\n        formatter: (level, cat, msg) =&gt; [level, cat, msg].join(&#039;;&#039;),\n      }),\n      StoreModule.forRoot(reducer),\n      EffectsModule.forRoot(),\n      StoreDevtoolsModule.instrument(),\n      MatToolbarModule,\n      MatButtonModule,\n      MatSidenavModule,\n      MatIconModule,\n      MatListModule\n    ),\n    {\n      provide: HTTP_INTERCEPTORS,\n      useClass: LegacyInterceptor,\n      multi: true,\n    },\n    provideAnimations(),\n    provideHttpClient(withInterceptorsFromDi()),\n    provideRouter(APP_ROUTES, withPreloading(PreloadAllModules)),\n  ],\n});<\/code><\/pre>\n<p>Also, there is a traditional class-based <code>HttpInterceptor<\/code> registered and the <code>HttpClient<\/code> is made aware of this by calling <code>withInterceptorsFromDi<\/code>. By moving to Standalone APIs, this can be improved:<\/p>\n<pre><code class=\"language-typescript\">bootstrapApplication(AppComponent, {\n  providers: [\n\n    provideLogger({\n      level: LogLevel.DEBUG,\n      appenders: [DefaultLogAppender],\n      formatter: (level, cat, msg) =&gt; [level, cat, msg].join(&#039;;&#039;),\n    }),\n\n    provideStore(reducer),\n    provideEffects(),\n    provideStoreDevtools(),\n\n    provideAnimations(),\n\n    provideHttpClient(withInterceptors([authInterceptor])),\n    provideRouter(APP_ROUTES, withPreloading(PreloadAllModules)),\n\n    importProvidersFrom(\n      LayoutModule,\n      MatToolbarModule,\n      MatButtonModule,\n      MatSidenavModule,\n      MatIconModule,\n      MatListModule\n    ),\n\n  ],\n});<\/code><\/pre>\n<p>This modification takes care of the following aspects:<\/p>\n<ul>\n<li>Removing the import of the <code>BrowserModule<\/code> that doesn't need to be explicitly imported when bootstrapping a Standalone Component.<\/li>\n<li>Setting up the custom Logger library with <code>provideLogger<\/code>.<\/li>\n<li>Setting up the NGRX store with <code>provideStore<\/code>, <code>provideEffects<\/code>, and <code>provideStoreDevtools<\/code>.<\/li>\n<li>Replacing the traditional <code>HttpInterceptor<\/code> with a <a href=\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/the-refurbished-httpclient-in-angular-15-standalone-apis-and-functional-interceptors\/\">functional interceptor<\/a> that is now passed to <code>withInterceptors<\/code>. To make this step easier, the functional counterpart has already been part of the code base since the beginning.<\/li>\n<\/ul>\n<p>More information about <a href=\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/patterns-for-custom-standalone-apis-in-angular\/\">custom Standalone APIs<\/a> like provideLogger can be found <a href=\"https:\/\/www.angulararchitects.io\/en\/aktuelles\/patterns-for-custom-standalone-apis-in-angular\/\">here<\/a>.<\/p>\n<p>NGRX expects that its Standalone APIs are used fully or not at all. Hence, we also need to go back to the <code>flight-booking.routes.ts<\/code> and replace the call to <code>importProvidersFrom<\/code> with calls to <code>provideState<\/code> and <code>provideEffects<\/code>:<\/p>\n<pre><code class=\"language-typescript\">export const FLIGHT_BOOKING_ROUTES: Routes = [\n  {\n    path: &#039;&#039;,\n    component: FlightBookingComponent,\n    canActivate: [() =&gt; inject(AuthService).isAuthenticated()],\n    providers: [\n      provideState(bookingFeature),\n      provideEffects(BookingEffects)\n    ],\n    children: [\n        [...]\n    ],\n  },\n];<\/code><\/pre>\n<p>Please note that while we call <code>provideStore<\/code> in the <code>main.ts<\/code> to set up the store, we need to call <code>provideState<\/code> (!) in further parts of the application to set up additional feature slices for them. However, <code>provideEffects<\/code> can be called in both places to set up effects for the root level but also feature slices.<\/p>\n<p>After this modification, the application is migrated to Standalone Components and APIs. Run it via<\/p>\n<pre><code class=\"language-bash\">ng serve -o<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>The new schematics automate the migration to Standalone Components. In three steps, the whole application or just a part of it is moved over to the new lightweight way of working with Angular. After each step, we can check the performed modification and intervene.<\/p>\n<h2>More on Modern Angular?<\/h2>\n<p>Learn all about Standalone Components in our free eBook:<\/p>\n<\/p>\n<ul>\n<li>The mental model behind Standalone Components<\/li>\n<li>Migration scenarios and compatibility with existing code<\/li>\n<li>Standalone Components and the router and lazy loading<\/li>\n<li>Standalone Components and Web Components<\/li>\n<li>Standalone Components and DI and NGRX<\/li>\n<\/ul>\n<p>Please find our eBook here:<\/p>\n<p><a href=\"https:\/\/www.angulararchitects.io\/standalone-book\"><img decoding=\"async\" src=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2022\/10\/title-page-small.jpg\" alt=\"free ebook\"><\/a><\/p>\n<p>Feel free to <a href=\"https:\/\/www.angulararchitects.io\/standalone-book\">download it here<\/a> now!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since Angular 15.2, there is a schematic that automates the migration to Standalone Components.<\/p>\n","protected":false},"author":9,"featured_media":7001,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-unkategorisiert","post_series-angulars-future-without-ngmodules"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Automatic Migration to Standalone Components in 3 Steps - ANGULARarchitects<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatic Migration to Standalone Components in 3 Steps - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"Since Angular 15.2, there is a schematic that automates the migration to Standalone Components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-08T20:59:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/sm.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manfred Steyer, GDE\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/sm.png\" \/>\n<meta name=\"twitter:creator\" content=\"@daniel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer, GDE\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/\"},\"author\":{\"name\":\"Manfred Steyer, GDE\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\"},\"headline\":\"Automatic Migration to Standalone Components in 3 Steps\",\"datePublished\":\"2023-03-08T20:59:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/\"},\"wordCount\":931,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/shutterstock-717932599.jpg\",\"articleSection\":[\"Unkategorisiert\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/\",\"name\":\"Automatic Migration to Standalone Components in 3 Steps - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/shutterstock-717932599.jpg\",\"datePublished\":\"2023-03-08T20:59:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/shutterstock-717932599.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/shutterstock-717932599.jpg\",\"width\":1000,\"height\":666},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Automatic Migration to Standalone Components in 3 Steps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951\",\"name\":\"Manfred Steyer, GDE\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer, GDE\"},\"sameAs\":[\"https:\/\/x.com\/daniel\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Automatic Migration to Standalone Components in 3 Steps - ANGULARarchitects","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/","og_locale":"en_US","og_type":"article","og_title":"Automatic Migration to Standalone Components in 3 Steps - ANGULARarchitects","og_description":"Since Angular 15.2, there is a schematic that automates the migration to Standalone Components.","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/","og_site_name":"ANGULARarchitects","article_published_time":"2023-03-08T20:59:03+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/sm.png","type":"image\/png"}],"author":"Manfred Steyer, GDE","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/sm.png","twitter_creator":"@daniel","twitter_misc":{"Written by":"Manfred Steyer, GDE","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/"},"author":{"name":"Manfred Steyer, GDE","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951"},"headline":"Automatic Migration to Standalone Components in 3 Steps","datePublished":"2023-03-08T20:59:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/"},"wordCount":931,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/shutterstock-717932599.jpg","articleSection":["Unkategorisiert"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/","name":"Automatic Migration to Standalone Components in 3 Steps - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/shutterstock-717932599.jpg","datePublished":"2023-03-08T20:59:03+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/shutterstock-717932599.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/03\/shutterstock-717932599.jpg","width":1000,"height":666},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/tutorial-automatically-migrating-to-standalone-components-in-3-steps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"Automatic Migration to Standalone Components in 3 Steps"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/15628efa7af4475ffaaeeb26c5112951","name":"Manfred Steyer, GDE","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a0b59539674d8b71ea1c1f4764b11244b5f499203f1d11b40f37d8f3f90be033?s=96&d=mm&r=g","caption":"Manfred Steyer, GDE"},"sameAs":["https:\/\/x.com\/daniel"]}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/7007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=7007"}],"version-history":[{"count":0,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/7007\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/7001"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=7007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=7007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=7007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}