From 19ed443c11f29adc0ef164336cbcab148663b8aa Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Mon, 9 Oct 2023 17:23:22 +0200 Subject: [PATCH] docs: Update guide to migrate ui extensions --- .../getting-started/index.md | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/docs/docs/guides/extending-the-admin-ui/getting-started/index.md b/docs/docs/guides/extending-the-admin-ui/getting-started/index.md index 285c972612..f083bc9915 100644 --- a/docs/docs/guides/extending-the-admin-ui/getting-started/index.md +++ b/docs/docs/guides/extending-the-admin-ui/getting-started/index.md @@ -478,7 +478,7 @@ export const config: VendureConfig = { If you have existing UI extensions written using the legacy API, you can migrate them to the new API as follows: -1. Convert all components to be [standalone components](https://angular.io/guide/standalone-components). Standalone components were introduced in recent versions of Angular and allow components to be defined without the need for a module. To convert an existing component, you need to set `standalone: true` and add an `imports` array containing any components, directives or pipes you are using in that component. Typically you can import `SharedModule` to get access to all the common Angular directives and pipes, as well as the shared Admin UI components. +1. Convert all components to be [standalone components](https://angular.io/guide/standalone-components). Standalone components were introduced in recent versions of Angular and allow components to be defined without the need for a module. To convert an existing component, you need to set `standalone: true` and add an `imports` array containing any components, directives or pipes you are using in that component. Typically, you can import `SharedModule` to get access to all the common Angular directives and pipes, as well as the shared Admin UI components. ```ts import { Component } from '@angular/core'; // highlight-next-line @@ -496,6 +496,18 @@ If you have existing UI extensions written using the legacy API, you can migrate greeting = 'Hello!'; } ``` -2. Remove any `NgModule` files, and replace lazy modules with `routes.ts`, and shared modules with `providers.ts` (see above). - +2. In templates for page components, remove the `` and `` components, as they are included by default now when using +the `registeRouteComponent()` function: + ```html + // highlight-start + + + + + // highlight-end + This content should remain + // highlight-next-line + + ``` +3. Remove any `NgModule` files, and replace lazy modules with `routes.ts`, and shared modules with `providers.ts` (see above).