Bläddra i källkod

feat(docs): Update docs with new Admin UI extensions API

Michael Bromley 6 år sedan
förälder
incheckning
f907dac6e5
1 ändrade filer med 25 tillägg och 21 borttagningar
  1. 25 21
      docs/content/docs/developer-guide/plugins/extending-the-admin-ui.md

+ 25 - 21
docs/content/docs/developer-guide/plugins/extending-the-admin-ui.md

@@ -21,7 +21,7 @@ Here is a very simple example to illustrate how a UI extension works:
 Below is an Angular module with a single component `GreeterComponent` which displays a greeting. A route is defined to load `GreeterComponent` at the route `/greet`.
 
 ```TypeScript
-// project/ui-extensions/greeter/greeter-extension.module.ts
+// project/ui-extensions/greeter-extension.module.ts
 
 import { Component, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -66,10 +66,12 @@ export const config: VendureConfig = {
             port: 5001,
             extensions: [
                 {
-                    type: 'lazy',
-                    ngModulePath: path.join(__dirname, 'ui-extensions/greeter'),
-                    ngModuleFileName: 'greeter-extension.module.ts',
-                    ngModuleName: 'GreeterModule',
+                    extensionPath: path.join(__dirname, 'ui-extensions'),
+                    ngModules: [{
+                        type: 'lazy',
+                        ngModuleFileName: 'greeter-extension.module.ts',
+                        ngModuleName: 'GreeterModule',
+                    }],
                 }
             ],
         })
@@ -107,7 +109,7 @@ Shared modules get imported into the main Admin UI `AppModule` and therefore are
 Once you have defined some custom views in a lazy extension module, you need some way for the administrator to access these views. For this you will use the `NavBuilderService` to define new navigation items. Let's add a new section to the Admin UI main nav bar containing a link to the lazy module from the simple example above:
 
 ```TypeScript
-// project/ui-extensions/shared/shared-extension.module.ts
+// project/ui-extensions/shared-extension.module.ts
 
 import { NgModule, APP_INITIALIZER } from '@angular/core';
 import { SharedModule, NavBuilderService } from '@vendure/admin-ui/src';
@@ -156,16 +158,16 @@ Next we must add this shared module to the AdminUiOptions:
             port: 3002,
             extensions: [
                 {
-                    type: 'lazy',
-                    ngModulePath: path.join(__dirname, 'ui-extensions/greeter'),
-                    ngModuleFileName: 'greeter-extension.module.ts',
-                    ngModuleName: 'GreeterModule',
-                },
-                {
-                    type: 'shared',
-                    ngModulePath: path.join(__dirname, 'ui-extensions/shared'),
-                    ngModuleFileName: 'shared-extension.module.ts',
-                    ngModuleName: 'SharedExtensionModule',
+                    extensionPath: path.join(__dirname, 'ui-extensions'),
+                    ngModules: [{
+                        type: 'lazy',
+                        ngModuleFileName: 'greeter-extension.module.ts',
+                        ngModuleName: 'GreeterModule',
+                    }, {
+                        type: 'shared',
+                        ngModuleFileName: 'shared-extension.module.ts',
+                        ngModuleName: 'SharedExtensionModule',
+                    }],
                 },
             ],
         }),
@@ -326,11 +328,13 @@ When you are developing your Admin UI extension, you can set the `watch` option
             port: 3002,
             extensions: [
                 {
-                    type: 'lazy',
-                    ngModulePath: path.join(__dirname, 'ui-extensions/greeter'),
-                    ngModuleFileName: 'greeter-extension.module.ts',
-                    ngModuleName: 'GreeterModule',
-                },
+                    extensionPath: path.join(__dirname, 'ui-extensions'),
+                    ngModules: [{
+                        type: 'lazy',
+                        ngModuleFileName: 'greeter-extension.module.ts',
+                        ngModuleName: 'GreeterModule',
+                    }],
+                }
             ],
             watch: true,
         }),