fix(ui-devkit): Fix baseHref configuration

Fixes #1794. We now directly modify the angular.json file

packages/admin-ui-plugin/src/plugin.ts

@@ -37,6 +37,10 @@ export interface AdminUiPluginOptions {
     /**
      * @description
      * The route to the Admin UI.
+     *
+     * Note: If you are using the {@link compileUiExtensions} function to compile a custom version of the Admin UI, then
+     * the route should match the `baseHref` option passed to that function. The default value of `baseHref` is `/admin/`,
+     * so it only needs to be changed if you set this `route` option to something other than `"admin"`.
      */
     route: string;
     /**

packages/ui-devkit/src/compiler/compile.ts

@@ -7,7 +7,7 @@ import * as fs from 'fs-extra';
 import * as path from 'path';
 
 import { DEFAULT_BASE_HREF, MODULES_OUTPUT_DIR } from './constants';
-import { copyGlobalStyleFile, setupScaffold } from './scaffold';
+import { copyGlobalStyleFile, setBaseHref, setupScaffold } from './scaffold';
 import { getAllTranslationFiles, mergeExtensionTranslations } from './translations';
 import {
     Extension,
@@ -72,7 +72,8 @@ function runCompileMode(
     const compile = () =>
         new Promise<void>(async (resolve, reject) => {
             await setupScaffold(outputPath, extensions);
-            const commandArgs = ['run', 'build', `--base-href=${baseHref}`, ...buildProcessArguments(args)];
+            await setBaseHref(outputPath, baseHref);
+            const commandArgs = ['run', 'build', ...buildProcessArguments(args)];
             if (!usingYarn) {
                 // npm requires `--` before any command line args being passed to a script
                 commandArgs.splice(2, 0, '--');
@@ -117,20 +118,17 @@ function runWatchMode(
     const compile = () =>
         new Promise<void>(async (resolve, reject) => {
             await setupScaffold(outputPath, extensions);
+            await setBaseHref(outputPath, baseHref);
             const adminUiExtensions = extensions.filter(isAdminUiExtension);
             const normalizedExtensions = normalizeExtensions(adminUiExtensions);
             const globalStylesExtensions = extensions.filter(isGlobalStylesExtension);
             const staticAssetExtensions = extensions.filter(isStaticAssetExtension);
             const allTranslationFiles = getAllTranslationFiles(extensions.filter(isTranslationExtension));
-            buildProcess = spawn(
-                cmd,
-                ['run', 'start', `--port=${port}`, `--base-href=${baseHref}`, ...buildProcessArguments(args)],
-                {
-                    cwd: outputPath,
-                    shell: true,
-                    stdio: 'inherit',
-                },
-            );
+            buildProcess = spawn(cmd, ['run', 'start', `--port=${port}`, ...buildProcessArguments(args)], {
+                cwd: outputPath,
+                shell: true,
+                stdio: 'inherit',
+            });
 
             buildProcess.on('close', code => {
                 if (code !== 0) {

packages/ui-devkit/src/compiler/scaffold.ts

@@ -258,6 +258,13 @@ function copyAdminUiSource(outputPath: string, modulePathMapping: Record<string,
     fs.copySync(adminUiSrc, outputSrc);
 }
 
+export async function setBaseHref(outputPath: string, baseHref: string) {
+    const angularJsonFilePath = path.join(outputPath, '/angular.json');
+    const angularJson = await fs.readJSON(angularJsonFilePath, 'utf-8');
+    angularJson.projects['vendure-admin'].architect.build.options.baseHref = baseHref;
+    await fs.writeJSON(angularJsonFilePath, angularJson, { spaces: 2 });
+}
+
 /**
  * Adds module path mapping to the bundled tsconfig.json file if defined as a UI extension.
  */

packages/ui-devkit/src/compiler/types.ts

@@ -332,6 +332,23 @@ export interface UiExtensionCompilerOptions {
      * 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 {@link AdminUiPlugin} then you should
+     * also set the `route` option to match this value.
+     *
+     * @example
+     * ```TypeScript
+     * AdminUiPlugin.init({
+     *   route: 'my-route',
+     *   port: 5001,
+     *   app: compileUiExtensions({
+     *     baseHref: '/my-route/',
+     *     outputPath: path.join(__dirname, './custom-admin-ui'),
+     *     extensions: [],
+     *     devMode: true,
+     *   }),
+     * }),
+     * ```
+     *
      * @default '/admin/'
      */
     baseHref?: string;