AdminUiExtension
AdminUiExtension
Defines extensions to the Admin UI application by specifying additional Angular NgModules which are compiled into the application.
See Extending the Admin UI for detailed instructions.
Signature
interface AdminUiExtension extends Partial<TranslationExtension>,
Partial<StaticAssetExtension>,
Partial<GlobalStylesExtension> {
id?: string;
extensionPath: string;
ngModules: Array<AdminUiExtensionSharedModule | AdminUiExtensionLazyModule>;
pathAlias?: string;
exclude?: string[];
}
Extends
- Partial<TranslationExtension>
- Partial<StaticAssetExtension>
- Partial<GlobalStylesExtension>
Members
id
string
extensionPath
string
ngModules
Array<AdminUiExtensionSharedModule | AdminUiExtensionLazyModule>
pathAlias
string
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
// packages/common-ui-module/src/ui/ui-shared.module.ts
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 {}
// packages/common-ui-module/src/index.ts
import path from 'path';
import { AdminUiExtension } from '@vendure/ui-devkit/compiler';
export const uiExtensions: AdminUiExtension = {
pathAlias: '@common-ui-module', // this is the important part
extensionPath: path.join(__dirname, 'ui'),
ngModules: [
{
type: 'shared' as const,
ngModuleFileName: 'ui-shared.module.ts',
ngModuleName: 'CommonSharedUiModule',
},
],
};
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@common-ui-module/*": ["packages/common-ui-module/src/ui/*"]
}
}
}
// packages/sample-plugin/src/ui/ui-extension.module.ts
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
// '@common-ui-module' is the value of "pathAlias" and 'ui-shared.module' is the file we want to reference inside "extensionPath"
import { CommonSharedUiModule, CommonUiComponent } from '@common-ui-module/ui-shared.module';
@NgModule({
imports: [
SharedModule,
CommonSharedUiModule,
RouterModule.forChild([
{
path: '',
pathMatch: 'full',
component: CommonUiComponent,
},
]),
],
})
export class SampleUiExtensionModule {}
exclude
string[]
Optional array specifying filenames or glob patterns that should
be skipped when copying the directory defined by extensionPath
.
Example
exclude: ['**/*.spec.ts']
TranslationExtension
Defines extensions to the Admin UI translations. Can be used as a stand-alone extension definition which only adds translations without adding new UI functionality, or as part of a full AdminUiExtension.
Signature
interface TranslationExtension {
translations: { [languageCode in LanguageCode]?: string };
}
Members
translations
{ [languageCode in LanguageCode]?: string }
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'),
}
StaticAssetExtension
Defines extensions which copy static assets to the custom Admin UI application source asset directory.
Signature
interface StaticAssetExtension {
staticAssets: StaticAssetDefinition[];
}
Members
staticAssets
StaticAssetDefinition[]
/static
directory.
GlobalStylesExtension
Defines extensions which add global styles to the custom Admin UI application.
Signature
interface GlobalStylesExtension {
globalStyles: string[] | string;
}
Members
globalStyles
string[] | string
SassVariableOverridesExtension
Defines an extension which allows overriding Clarity Design System’s Sass variables used in styles on the Admin UI.
Signature
interface SassVariableOverridesExtension {
sassVariableOverrides: string;
}
Members
sassVariableOverrides
string
StaticAssetDefinition
A static asset can be provided as a path to the asset, or as an object containing a path and a new name, which will cause the compiler to copy and then rename the asset.
Signature
type StaticAssetDefinition = string | { path: string; rename: string }
AdminUiExtensionSharedModule
Configuration defining a single NgModule with which to extend the Admin UI.
Signature
interface AdminUiExtensionSharedModule {
type: 'shared';
ngModuleFileName: string;
ngModuleName: string;
}
Members
type
'shared'
ngModuleFileName
string
ngModuleName
string
AdminUiExtensionLazyModule
Configuration defining a single NgModule with which to extend the Admin UI.
Signature
interface AdminUiExtensionLazyModule {
type: 'lazy';
route: string;
ngModuleFileName: string;
ngModuleName: string;
}
Members
type
'lazy'
/extensions/
route and should be used for
modules which define new views for the Admin UI.
route
string
'foo'
will cause the module to lazy-load when the /extensions/foo
route
is activated.
ngModuleFileName
string
ngModuleName
string