AdminUiExtension

id

An optional ID for the extension module. Only used internally for generating import paths to your module. If not specified, a unique hash will be used as the id.

extensionPath

The path to the directory containing the extension module(s). The entire contents of this directory will be copied into the Admin UI app, including all TypeScript source files, html templates, scss style sheets etc.

ngModules

One or more Angular modules which extend the default Admin UI.

providers

Defines the paths to a file that exports an array of shared providers such as nav menu items, custom form inputs, custom detail components, action bar items, custom history entry components.

routes

Defines routes that will be lazy-loaded at the /extensions/ route. The filePath should point to a file relative to the extensionPath which exports an array of Angular route definitions.

pathAlias

An optional alias for the module so it can be referenced by other UI extension modules.

By default, Angular modules declared in an AdminUiExtension do not have access to code outside the directory defined by the extensionPath. A scenario in which that can be useful though is in a monorepo codebase where a common NgModule is shared across different plugins, each defined in its own package. An example can be found below - note that the main tsconfig.json also maps the target module but using a path relative to the project's root folder. The UI module is not part of the main TypeScript build task as explained in Extending the Admin UI but having paths properly configured helps with usual IDE code editing features such as code completion and quick navigation, as well as linting.

Example

import { NgModule } from '@angular/core';import { SharedModule } from '@vendure/admin-ui/core';import { CommonUiComponent } from './components/common-ui/common-ui.component';export { CommonUiComponent };@NgModule({ imports: [SharedModule], exports: [CommonUiComponent], declarations: [CommonUiComponent],})export class CommonSharedUiModule {}

import path from 'path';import { AdminUiExtension } from '@vendure/ui-devkit/compiler';export const uiExtensions: AdminUiExtension = {  pathAlias: '@common-ui-module',     // this is the important part // [!code highlight]  extensionPath: path.join(__dirname, 'ui'),  ngModules: [    {      type: 'shared' as const,      ngModuleFileName: 'ui-shared.module.ts',      ngModuleName: 'CommonSharedUiModule',    },  ],};

{  "compilerOptions": {    "baseUrl": ".",    "paths": {      "@common-ui-module/*": ["packages/common-ui-module/src/ui/*"]    }  }}

import { NgModule } from '@angular/core';import { SharedModule } from '@vendure/admin-ui/core';// the import below works both in the context of the custom Admin UI app as well as the main project // [!code highlight]// '@common-ui-module' is the value of "pathAlias" and 'ui-shared.module' is the file we want to reference inside "extensionPath" // [!code highlight]import { CommonSharedUiModule, CommonUiComponent } from '@common-ui-module/ui-shared.module'; // [!code highlight]@NgModule({  imports: [    SharedModule,    CommonSharedUiModule,    RouterModule.forChild([      {        path: '',        pathMatch: 'full',        component: CommonUiComponent,      },    ]),  ],})export class SampleUiExtensionModule {}

exclude

Optional array specifying filenames or glob patterns that should be skipped when copying the directory defined by extensionPath.

Example

exclude: ['**/*.spec.ts']

translations

Optional object defining any translation files for the Admin UI. The value should be an object with the key as a 2-character ISO 639-1 language code, and the value being a glob for any relevant translation files in JSON format.

Example

translations: {  en: path.join(__dirname, 'translations/*.en.json'),  de: path.join(__dirname, 'translations/*.de.json'),}

staticAssets

Optional array of paths to static assets which will be copied over to the Admin UI app's /static directory.

globalStyles

Specifies a path (or array of paths) to global style files (css or Sass) which will be incorporated into the Admin UI app global stylesheet.

sassVariableOverrides

Specifies a path to a Sass style file containing variable declarations, which will take precedence over default values defined in Clarity.

route

The name of the route. This will be used as the path in the URL.

filePath

The path to the file which exports an array of Angular route definitions.

prefix

All extensions will be mounted under the /extensions/ route. This option allows you to specify a custom prefix rather than /extensions/. For example, setting this to custom would cause the extension to be mounted at /custom/<route> instead.

A common use case for this is to mount the extension at the root of the Admin UI, by setting this to an empty string. This is useful when the extension is intended to replace the default Admin UI, rather than extend it.

type

Shared modules are directly imported into the main AppModule of the Admin UI and should be used to declare custom form components and define custom navigation items.

ngModuleFileName

The name of the file containing the extension module class.

ngModuleName

The name of the extension module class.

type

Lazy modules are lazy-loaded at the /extensions/ route and should be used for modules which define new views for the Admin UI.

route

The route specifies the route at which the module will be lazy-loaded. E.g. a value of 'foo' will cause the module to lazy-load when the /extensions/foo route is activated.

ngModuleFileName

The name of the file containing the extension module class.

ngModuleName

The name of the extension module class.