feat(admin-ui): Allow custom ng compiler args to be passed to admin ui compiler (#1386)

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

@@ -9,7 +9,7 @@ import * as path from 'path';
 import { DEFAULT_BASE_HREF, MODULES_OUTPUT_DIR } from './constants';
 import { copyGlobalStyleFile, setupScaffold } from './scaffold';
 import { getAllTranslationFiles, mergeExtensionTranslations } from './translations';
-import { Extension, StaticAssetDefinition, UiExtensionCompilerOptions } from './types';
+import { Extension, StaticAssetDefinition, UiExtensionCompilerOptions, UiExtensionCompilerProcessArgument } from './types';
 import {
     copyStaticAsset,
     copyUiDevkit,
@@ -31,7 +31,7 @@ import {
 export function compileUiExtensions(
     options: UiExtensionCompilerOptions,
 ): AdminUiAppConfig | AdminUiAppDevModeConfig {
-    const { outputPath, baseHref, devMode, watchPort, extensions, command } = options;
+    const { outputPath, baseHref, devMode, watchPort, extensions, command, additionalProcessArguments } = options;
     const usingYarn = options.command && options.command === 'npm' ? false : shouldUseYarn();
     if (devMode) {
         return runWatchMode(
@@ -39,10 +39,17 @@ export function compileUiExtensions(
             baseHref || DEFAULT_BASE_HREF,
             watchPort || 4200,
             extensions,
-            usingYarn,
+            usingYarn, 
+            additionalProcessArguments
         );
     } else {
-        return runCompileMode(outputPath, baseHref || DEFAULT_BASE_HREF, extensions, usingYarn);
+        return runCompileMode(
+            outputPath, 
+            baseHref || DEFAULT_BASE_HREF, 
+            extensions, 
+            usingYarn, 
+            additionalProcessArguments
+        );
     }
 }
 
@@ -51,6 +58,7 @@ function runCompileMode(
     baseHref: string,
     extensions: Extension[],
     usingYarn: boolean,
+    args?: UiExtensionCompilerProcessArgument[]
 ): AdminUiAppConfig {
     const cmd = usingYarn ? 'yarn' : 'npm';
     const distPath = path.join(outputPath, 'dist');
@@ -58,7 +66,7 @@ function runCompileMode(
     const compile = () =>
         new Promise<void>(async (resolve, reject) => {
             await setupScaffold(outputPath, extensions);
-            const commandArgs = ['run', 'build', `--outputPath=${distPath}`, `--base-href=${baseHref}`];
+            const commandArgs = ['run', 'build', `--outputPath=${distPath}`, `--base-href=${baseHref}`, ...buildProcessArguments(args)];
             if (!usingYarn) {
                 // npm requires `--` before any command line args being passed to a script
                 commandArgs.splice(2, 0, '--');
@@ -91,6 +99,7 @@ function runWatchMode(
     port: number,
     extensions: Extension[],
     usingYarn: boolean,
+    args?: UiExtensionCompilerProcessArgument[]
 ): AdminUiAppDevModeConfig {
     const cmd = usingYarn ? 'yarn' : 'npm';
     const devkitPath = require.resolve('@vendure/ui-devkit');
@@ -107,7 +116,7 @@ function runWatchMode(
             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}`], {
+            buildProcess = spawn(cmd, ['run', 'start', `--port=${port}`, `--base-href=${baseHref}`, ...buildProcessArguments(args)], {
                 cwd: outputPath,
                 shell: true,
                 stdio: 'inherit',
@@ -238,6 +247,18 @@ function runWatchMode(
     return { sourcePath: outputPath, port, compile, route: baseHrefToRoute(baseHref) };
 }
 
+function buildProcessArguments(args?: UiExtensionCompilerProcessArgument[]): string[] {
+    return (args ?? []).map(arg => {
+        if (Array.isArray(arg)) {
+            const [key, value] = arg;
+
+            return `${key}=${value}`
+        }
+
+        return arg
+    })
+}
+
 function baseHrefToRoute(baseHref: string): string {
     return baseHref.replace(/^\//, '').replace(/\/$/, '');
 }

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

@@ -173,6 +173,14 @@ export interface AdminUiExtensionLazyModule {
     ngModuleName: string;
 }
 
+/**
+ * @description
+ * Argument to configure process (watch or compile)
+ * 
+ * @docsCategory UiDevkit
+ */
+export type UiExtensionCompilerProcessArgument = string | [string, any]
+
 /**
  * @description
  * Options to configure how the Admin UI should be compiled.
@@ -218,6 +226,7 @@ export interface UiExtensionCompilerOptions {
      * @default 4200 | undefined
      */
     watchPort?: number;
+    
     /**
      * @description
      * Internally, the Angular CLI will be invoked as an npm script. By default, the compiler will use Yarn
@@ -227,6 +236,20 @@ export interface UiExtensionCompilerOptions {
      * @since 1.5.0
      */
     command?: 'yarn' | 'npm';
+
+    /**
+     * @description
+     * Additional command-line arguments which will get passed to the [ng build](https://angular.io/cli/build) 
+     * command (or [ng serve](https://angular.io/cli/serve) if `devMode = true`).
+     * 
+     * @example
+     * ['--disable-host-check'] // to disable host check
+     * 
+     * @default undefined
+     * 
+     * @since 1.5.0
+     */
+    additionalProcessArguments?: UiExtensionCompilerProcessArgument[];
 }
 
 export type Translations = {