Skip to main content

UiExtensionCompilerOptions

UiExtensionCompilerOptions​

@vendure/ui-devkittypes.ts

Options to configure how the Admin UI should be compiled.

Signature
interface UiExtensionCompilerOptions {
    outputPath: string;
    extensions: Extension[];
    ngCompilerPath?: string | undefined;
    devMode?: boolean;
    baseHref?: string;
    watchPort?: number;
    command?: UiExtensionBuildCommand;
    additionalProcessArguments?: UiExtensionCompilerProcessArgument[];
}

outputPath​

property
string

The directory into which the sources for the extended Admin UI will be copied.

extensions​

property
Extension[]

An array of objects which configure Angular modules and/or translations with which to extend the Admin UI.

ngCompilerPath​

property
v2.1.0
string | undefined

Allows you to manually specify the path to the Angular CLI compiler script. This can be useful in scenarios where for some reason the built-in start/build scripts are unable to locate the ng command.

This option should not usually be required.

Example

compileUiExtensions({
    ngCompilerPath: path.join(__dirname, '../../node_modules/@angular/cli/bin/ng.js'),
    outputPath: path.join(__dirname, '../admin-ui'),
    extensions: [
      // ...
    ],
})

devMode​

property
boolean
default:
false

Set to true in order to compile the Admin UI in development mode (using the Angular CLI ng serve command). When in dev mode, any changes to UI extension files will be watched and trigger a rebuild of the Admin UI with live reloading.

baseHref​

property
string
default:
'/admin/'

Allows the baseHref of the compiled Admin UI app to be set. This determines the prefix of the app, for example with the default value of '/admin/', the Admin UI app will be configured to be served from http://<host>/admin/.

Note: if you are using this in conjunction with the AdminUiPlugin then you should also set the route option to match this value.

Example

AdminUiPlugin.init({
  route: 'my-route',
  port: 5001,
  app: compileUiExtensions({
    baseHref: '/my-route/',
    outputPath: path.join(__dirname, './custom-admin-ui'),
    extensions: [],
    devMode: true,
  }),
}),

watchPort​

property
number
default:
4200 | undefined

In watch mode, allows the port of the dev server to be specified. Defaults to the Angular CLI default of 4200.

command​

property
v1.5.0
UiExtensionBuildCommand

Internally, the Angular CLI will be invoked as an npm script. By default, the compiler will use Yarn to run the script if it is detected, otherwise it will use npm. This setting allows you to explicitly set which command to use, including pnpm, rather than relying on the default behavior.

additionalProcessArguments​

property
v1.5.0
UiExtensionCompilerProcessArgument[]
default:
undefined

Additional command-line arguments which will get passed to the ng build command (or ng serve if devMode = true).

Example

['--disable-host-check'] // to disable host check