Merge branch 'rework-admin-ui'

packages/admin-ui-plugin/build.ts

@@ -1,6 +1,23 @@
 /* tslint:disable:no-console */
-import { compileAdminUiApp } from '@vendure/admin-ui/compiler/compile';
+import { execSync, spawn } from 'child_process';
+import fs from 'fs-extra';
 import path from 'path';
 
+const compiledUiDir = path.join(__dirname, 'lib/admin-ui');
 console.log('Building admin-ui from source...');
-compileAdminUiApp(path.join(__dirname, 'lib/admin-ui'), []);
+
+fs.remove(compiledUiDir);
+
+const buildProcess = spawn('yarn', ['run', 'build:app'], {
+    cwd: path.join(__dirname, '../admin-ui'),
+    shell: true,
+    stdio: 'inherit',
+});
+
+buildProcess.on('close', code => {
+    if (code === 0) {
+        fs.copySync(path.join(__dirname, '../admin-ui/dist'), compiledUiDir);
+    } else {
+        console.log('Could not build!');
+    }
+});

packages/admin-ui-plugin/package.json

@@ -26,7 +26,6 @@
     "typescript": "~3.5.3"
   },
   "dependencies": {
-    "@vendure/admin-ui": "^0.9.0",
     "fs-extra": "^8.0.1"
   }
 }

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

@@ -1,4 +1,4 @@
 import path from 'path';
 
-export const UI_PATH = path.join(__dirname, '../admin-ui');
+export const DEFAULT_APP_PATH = path.join(__dirname, '../admin-ui');
 export const loggerCtx = 'AdminUiPlugin';

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

@@ -1,6 +1,10 @@
-import { Watcher } from '@vendure/admin-ui/compiler/watch';
 import { DEFAULT_AUTH_TOKEN_HEADER_KEY } from '@vendure/common/lib/shared-constants';
-import { AdminUiConfig, AdminUiExtension, Type } from '@vendure/common/lib/shared-types';
+import {
+    AdminUiAppConfig,
+    AdminUiAppDevModeConfig,
+    AdminUiConfig,
+    Type,
+} from '@vendure/common/lib/shared-types';
 import {
     AuthOptions,
     ConfigService,
@@ -17,8 +21,7 @@ import fs from 'fs-extra';
 import { Server } from 'http';
 import path from 'path';
 
-import { UI_PATH } from './constants';
-import { UiAppCompiler } from './ui-app-compiler.service';
+import { DEFAULT_APP_PATH, loggerCtx } from './constants';
 
 /**
  * @description
@@ -27,6 +30,11 @@ import { UiAppCompiler } from './ui-app-compiler.service';
  * @docsCategory AdminUiPlugin
  */
 export interface AdminUiOptions {
+    /**
+     * @description
+     * The port on which the server will listen. If not
+     */
+    port: number;
     /**
      * @description
      * The hostname of the server serving the static admin ui files.
@@ -36,9 +44,11 @@ export interface AdminUiOptions {
     hostname?: string;
     /**
      * @description
-     * The port on which the server will listen.
+     * By default, the AdminUiPlugin comes bundles with a pre-built version of the
+     * Admin UI. This option can be used to override this default build with a different
+     * version, e.g. one pre-compiled with one or more ui extensions.
      */
-    port: number;
+    app?: AdminUiAppConfig | AdminUiAppDevModeConfig;
     /**
      * @description
      * The hostname of the Vendure server which the admin ui will be making API calls
@@ -57,22 +67,6 @@ export interface AdminUiOptions {
      * @default 'auto'
      */
     apiPort?: number | 'auto';
-    /**
-     * @description
-     * An optional array of objects which configure extension Angular modules
-     * to be compiled into and made available by the AdminUi application.
-     */
-    extensions?: AdminUiExtension[];
-    /**
-     * @description
-     * Set to `true` in order to run the Admin UI in development mode (using the Angular CLI
-     * [ng serve](https://angular.io/cli/serve) command). When in watch mode, any changes to
-     * UI extension files will be watched and trigger a rebuild of the Admin UI with live
-     * reloading.
-     *
-     * @default false
-     */
-    watch?: boolean;
 }
 
 /**
@@ -106,15 +100,14 @@ export interface AdminUiOptions {
  */
 @VendurePlugin({
     imports: [PluginCommonModule],
-    providers: [UiAppCompiler],
+    providers: [],
     configuration: config => AdminUiPlugin.configure(config),
 })
 export class AdminUiPlugin implements OnVendureBootstrap, OnVendureClose {
     private static options: AdminUiOptions;
     private server: Server;
-    private watcher: Watcher | undefined;
 
-    constructor(private configService: ConfigService, private appCompiler: UiAppCompiler) {}
+    constructor(private configService: ConfigService) {}
 
     /**
      * @description
@@ -128,19 +121,29 @@ export class AdminUiPlugin implements OnVendureBootstrap, OnVendureClose {
     /** @internal */
     static async configure(config: RuntimeVendureConfig): Promise<RuntimeVendureConfig> {
         const route = 'admin';
+        const { app } = this.options;
+        const appWatchMode = this.isDevModeApp(app);
+        let port: number;
+        if (this.isDevModeApp(app)) {
+            port = app.port;
+        } else {
+            port = this.options.port;
+        }
         config.middleware.push({
             handler: createProxyHandler({
-                ...this.options,
+                hostname: this.options.hostname,
+                port,
                 route: 'admin',
                 label: 'Admin UI',
-                basePath: this.options.watch ? 'admin' : undefined,
+                basePath: appWatchMode ? 'admin' : undefined,
             }),
             route,
         });
-        if (this.options.watch) {
+        if (this.isDevModeApp(app)) {
             config.middleware.push({
                 handler: createProxyHandler({
-                    ...this.options,
+                    hostname: this.options.hostname,
+                    port,
                     route: 'sockjs-node',
                     label: 'Admin UI live reload',
                     basePath: 'sockjs-node',
@@ -154,36 +157,59 @@ export class AdminUiPlugin implements OnVendureBootstrap, OnVendureClose {
     /** @internal */
     async onVendureBootstrap() {
         const { adminApiPath, authOptions } = this.configService;
-        const { apiHost, apiPort, extensions, watch, port } = AdminUiPlugin.options;
-        let adminUiConfigPath: string;
+        const { apiHost, apiPort, port, app } = AdminUiPlugin.options;
+        const adminUiAppPath = AdminUiPlugin.isDevModeApp(app)
+            ? path.join(app.sourcePath, 'src')
+            : (app && app.path) || DEFAULT_APP_PATH;
+        const adminUiConfigPath = path.join(adminUiAppPath, 'vendure-ui-config.json');
+        const overwriteConfig = () =>
+            this.overwriteAdminUiConfig({
+                host: apiHost || 'auto',
+                port: apiPort || 'auto',
+                adminApiPath,
+                authOptions,
+                adminUiConfigPath,
+            });
 
-        if (watch) {
-            this.watcher = this.appCompiler.watchAdminUiApp(extensions, port);
-            adminUiConfigPath = path.join(__dirname, '../../../admin-ui/src', 'vendure-ui-config.json');
-        } else {
-            const adminUiPath = await this.appCompiler.compileAdminUiApp(extensions);
+        if (!AdminUiPlugin.isDevModeApp(app)) {
+            // If not in dev mode, start a static server for the compiled app
             const adminUiServer = express();
-            adminUiServer.use(express.static(UI_PATH));
+            adminUiServer.use(express.static(adminUiAppPath));
             adminUiServer.use((req, res) => {
-                res.sendFile(path.join(UI_PATH, 'index.html'));
+                res.sendFile(path.join(adminUiAppPath, 'index.html'));
             });
             this.server = adminUiServer.listen(AdminUiPlugin.options.port);
-            adminUiConfigPath = path.join(UI_PATH, 'vendure-ui-config.json');
+            if (app && typeof app.compile === 'function') {
+                Logger.info(`Compiling Admin UI app in production mode...`, loggerCtx);
+                app.compile()
+                    .then(overwriteConfig)
+                    .then(
+                        () => {
+                            Logger.info(`Admin UI successfully compiled`, loggerCtx);
+                        },
+                        (err: any) => {
+                            Logger.error(`Failed to compile: ${err}`, loggerCtx, err.stack);
+                        },
+                    );
+            } else {
+                await overwriteConfig();
+            }
+        } else {
+            Logger.info(`Compiling Admin UI app in development mode`, loggerCtx);
+            app.compile().then(
+                () => {
+                    Logger.info(`Admin UI compiling and watching for changes...`, loggerCtx);
+                },
+                (err: any) => {
+                    Logger.error(`Failed to compile: ${err}`, loggerCtx, err.stack);
+                },
+            );
+            await overwriteConfig();
         }
-        await this.overwriteAdminUiConfig({
-            host: apiHost || 'auto',
-            port: apiPort || 'auto',
-            adminApiPath,
-            authOptions,
-            adminUiConfigPath,
-        });
     }
 
     /** @internal */
     async onVendureClose(): Promise<void> {
-        if (this.watcher) {
-            this.watcher.close();
-        }
         if (this.server) {
             await new Promise(resolve => this.server.close(() => resolve()));
         }
@@ -201,10 +227,40 @@ export class AdminUiPlugin implements OnVendureBootstrap, OnVendureClose {
         adminUiConfigPath: string;
     }) {
         const { host, port, adminApiPath, authOptions, adminUiConfigPath } = options;
-        const adminUiConfig = await fs.readFile(adminUiConfigPath, 'utf-8');
+
+        /**
+         * It might be that the ui-devkit compiler has not yet copied the config
+         * file to the expected location (perticularly when running in watch mode),
+         * so polling is used to check multiple times with a delay.
+         */
+        async function pollForConfigFile() {
+            let configFileContent: string;
+            const maxRetries = 5;
+            const retryDelay = 200;
+            let attempts = 0;
+            return new Promise<string>(async function checkForFile(resolve, reject) {
+                if (attempts >= maxRetries) {
+                    reject();
+                }
+                try {
+                    Logger.verbose(`Checking for config file: ${adminUiConfigPath}`, loggerCtx);
+                    configFileContent = await fs.readFile(adminUiConfigPath, 'utf-8');
+                    resolve(configFileContent);
+                } catch (e) {
+                    attempts++;
+                    Logger.verbose(
+                        `Unable to locate config file: ${adminUiConfigPath} (attempt ${attempts})`,
+                        loggerCtx,
+                    );
+                    setTimeout(pollForConfigFile, retryDelay, resolve, reject);
+                }
+            });
+        }
+
+        const content = await pollForConfigFile();
         let config: AdminUiConfig;
         try {
-            config = JSON.parse(adminUiConfig);
+            config = JSON.parse(content);
         } catch (e) {
             throw new Error('[AdminUiPlugin] Could not parse vendure-ui-config.json file:\n' + e.message);
         }
@@ -214,5 +270,15 @@ export class AdminUiPlugin implements OnVendureBootstrap, OnVendureClose {
         config.tokenMethod = authOptions.tokenMethod || 'cookie';
         config.authTokenHeaderKey = authOptions.authTokenHeaderKey || DEFAULT_AUTH_TOKEN_HEADER_KEY;
         await fs.writeFile(adminUiConfigPath, JSON.stringify(config, null, 2));
+        Logger.verbose(`Applied configuration to vendure-ui-config.json file`, loggerCtx);
+    }
+
+    private static isDevModeApp(
+        app?: AdminUiAppConfig | AdminUiAppDevModeConfig,
+    ): app is AdminUiAppDevModeConfig {
+        if (!app) {
+            return false;
+        }
+        return !!(app as AdminUiAppDevModeConfig).sourcePath;
     }
 }

packages/admin-ui-plugin/src/ui-app-compiler.service.ts

@@ -1,105 +0,0 @@
-import { Injectable } from '@nestjs/common';
-import { compileAdminUiApp, watchAdminUiApp, Watcher } from '@vendure/admin-ui/compiler';
-import { AdminUiExtension } from '@vendure/common/lib/shared-types';
-import { Logger } from '@vendure/core';
-import crypto from 'crypto';
-import fs from 'fs-extra';
-import path from 'path';
-
-import { loggerCtx, UI_PATH } from './constants';
-
-@Injectable()
-export class UiAppCompiler {
-    private readonly hashfile = path.join(__dirname, 'modules-hash.txt');
-
-    watchAdminUiApp(extensions: AdminUiExtension[] | undefined, port: number): Watcher {
-        const extensionsWithId = this.normalizeExtensions(extensions);
-        Logger.info(`Starting Admin UI in Angular dev server on port ${port}`, loggerCtx);
-        return watchAdminUiApp(extensionsWithId, port);
-    }
-
-    async compileAdminUiApp(extensions: AdminUiExtension[] | undefined): Promise<void> {
-        const compiledAppExists = fs.existsSync(path.join(UI_PATH, 'index.html'));
-        const extensionsWithId = this.normalizeExtensions(extensions);
-
-        if (!compiledAppExists || this.extensionModulesHaveChanged(extensionsWithId)) {
-            Logger.info('Compiling Admin UI with extensions...', loggerCtx);
-            await compileAdminUiApp(path.join(__dirname, '../admin-ui'), extensionsWithId);
-            Logger.info('Completed compilation!', loggerCtx);
-        } else {
-            Logger.verbose('Extensions not changed since last run', loggerCtx);
-        }
-    }
-
-    /**
-     * Ensures each extension has an ID. If not defined by the user, a deterministic ID is generated
-     * from a hash of the extension config.
-     */
-    private normalizeExtensions(extensions?: AdminUiExtension[]): Array<Required<AdminUiExtension>> {
-        return (extensions || []).map(e => {
-            if (e.id) {
-                return e as Required<AdminUiExtension>;
-            }
-            const hash = crypto.createHash('sha256');
-            hash.update(JSON.stringify(e));
-            const id = hash.digest('hex');
-            return { staticAssets: [], ...e, id };
-        });
-    }
-
-    /**
-     * Checks whether the extensions configuration or any of the extension module files have been
-     * changed since the last run.
-     */
-    private extensionModulesHaveChanged(extensions: Array<Required<AdminUiExtension>>): boolean {
-        fs.ensureFileSync(this.hashfile);
-        const previousHash = fs.readFileSync(this.hashfile, 'utf-8');
-        if (!previousHash && (!extensions || extensions.length === 0)) {
-            // No extensions are configured and there is no last has,
-            // as when the plugin is newly installed. In this case,
-            // it would be unnecessary to recompile.
-            return false;
-        }
-        const currentHash = this.getExtensionModulesHash(extensions);
-
-        if (currentHash === previousHash) {
-            return false;
-        }
-        fs.writeFileSync(this.hashfile, currentHash, 'utf-8');
-        return true;
-    }
-
-    /**
-     * Generates a hash based on the extensions array as well as the modified time of each file
-     * in the ngModulesPaths.
-     */
-    private getExtensionModulesHash(extensions: Array<Required<AdminUiExtension>>): string {
-        let modifiedDates: string[] = [];
-        for (const extension of extensions) {
-            modifiedDates = [...modifiedDates, ...this.getAllModifiedDates(extension.extensionPath)];
-        }
-        const hash = crypto.createHash('sha256');
-        hash.update(modifiedDates.join('') + JSON.stringify(extensions));
-        return hash.digest('hex');
-    }
-
-    private getAllModifiedDates(dirPath: string): string[] {
-        const modifiedDates: string[] = [];
-        this.visitRecursive(dirPath, filePath => {
-            modifiedDates.push(fs.statSync(filePath).mtimeMs.toString());
-        });
-        return modifiedDates;
-    }
-
-    private visitRecursive(dirPath: string, visitor: (filePath: string) => void) {
-        const files = fs.readdirSync(dirPath);
-        for (const file of files) {
-            const fullPath = path.join(dirPath, file);
-            if (fs.statSync(fullPath).isDirectory()) {
-                this.visitRecursive(fullPath, visitor);
-            } else {
-                visitor(fullPath);
-            }
-        }
-    }
-}

packages/admin-ui/.gitignore

@@ -4,19 +4,12 @@
 /dist
 /tmp
 /out-tsc
+/package
+/src/lib/package.json
 
 # dependencies
 /node_modules
 
-# generated extension files
-/src/app/extensions/__static-assets__
-/src/app/extensions/modules
-/src/app/extensions/extensions.module.ts.generated
-/src/app/extensions/extensions.module.ts.temp
-
-# compiled compiler files
-/compiler
-
 # IDEs and editors
 /.idea
 .project

packages/admin-ui/.npmignore

@@ -3,5 +3,7 @@ yarn-error.log
 e2e
 dist
 *.spec.ts
-src/app/extensions/modules
-src/app/extensions/*.generated
+src/lib/extensions/modules
+src/lib/extensions/*.generated
+scripts
+/src

packages/admin-ui/README.md

@@ -6,9 +6,24 @@ It is an Angular application built with the Angular CLI.
 
 The UI is powered by the [Clarity Design System](https://vmware.github.io/clarity/).
 
-## Compiler
+## Structure
 
-The `/src/compiler` directory contains the code which is used to dynamically compile the Admin UI app with UI extensions. This code is used by the `@vendure/admin-ui-plugin`.
+### Library
+
+The Admin UI is structured as an Angular library conforming to the [ng-packagr format](https://github.com/ng-packagr/ng-packagr). This library is what is published to npm as `@vendure/admin-ui`. The libary consists
+of a set of modules which are accessible from consuming applications as sub-packages:
+
+* `@vendure/admin-ui/core`
+* `@vendure/admin-ui/catalog`
+* `@vendure/admin-ui/orders`
+
+etc. These library packages are located at [./src/lib](./src/lib)
+
+When built with `yarn build`, the output will be located in the `./package` sub directory. This is also the root of the published npm package.
+
+### Application
+
+In addition to the library, there is also a full application located at [./src/app](./src/app). This application is used both during development of the Admin UI, and also as the "default" Admin UI without any UI extensions, as provided as the default by the [admin-ui-plugin](../admin-ui-plugin).
 
 ## Localization
 

packages/admin-ui/angular.json

@@ -20,28 +20,19 @@
             "aot": true,
             "baseHref": "/admin/",
             "outputPath": "dist",
-            "index": "src/index.html",
+            "index": "src/lib/static/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": "src/lib/static/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/vendure-ui-config.json",
-              "src/assets",
-              "src/i18n-messages",
-              {
-                "glob": "**/*.*",
-                "input": "src/app/extensions/__static-assets__",
-                "output": "assets"
-              }
+              { "glob": "**/*", "input": "src/lib/static/", "output": "/" }
             ],
             "styles": [
-              "../../node_modules/@clr/icons/clr-icons.min.css",
-              "src/styles/styles.scss"
+              "src/lib/static/styles/styles.scss"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "./src/styles"
+                "./src/lib/static/styles"
               ]
             },
             "showCircularDependencies": false
@@ -68,81 +59,7 @@
               "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true
-            },
-            "plugin": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": true,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": false,
-              "styles": [
-                "../../@clr/icons/clr-icons.min.css",
-                "src/styles/styles.scss"
-              ]
-            },
-            "plugin-watch": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "aot": false,
-              "styles": [
-                "../../@clr/icons/clr-icons.min.css",
-                "src/styles/styles.scss"
-              ]
-            },
-            "plugin-dev": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": true,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "styles": [
-                "../../node_modules/@clr/icons/clr-icons.min.css",
-                "src/styles/styles.scss"
-              ]
-            },
-            "plugin-dev-watch": {
-              "budgets": [
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ],
-              "aot": false,
-              "styles": [
-                "../../node_modules/@clr/icons/clr-icons.min.css",
-                "src/styles/styles.scss"
-              ]
+              "buildOptimizer": false
             }
           }
         },
@@ -173,20 +90,20 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": "src/lib/static/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles/styles.scss"
+              "src/lib/static/styles/styles.scss"
             ],
             "scripts": [],
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              "src/lib/static/favicon.ico",
+              "src/lib/static/assets"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "./src/styles"
+                "./src/lib/static/styles"
               ]
             }
           }
@@ -231,6 +148,26 @@
           }
         }
       }
+    },
+    "vendure-admin-lib": {
+      "projectType": "library",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "vdr",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "./tsconfig.lib.json",
+            "project": "./src/lib/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "./tsconfig.lib.prod.json"
+            }
+          }
+        }
+      }
     }
   },
   "defaultProject": "vendure-admin",

packages/admin-ui/package.json

@@ -1,45 +1,42 @@
 {
   "name": "@vendure/admin-ui",
-  "version": "0.9.0",
+  "version": "0.9.11",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "yarn reset-extensions && ng build --prod && yarn build:compiler",
+    "start": "node scripts/set-version.js && ng serve",
+    "build:app": "ng build --prod",
+    "build": "node scripts/copy-package-json.js && node scripts/set-version.js && node scripts/build-public-api.js && ng build vendure-admin-lib --prod",
     "watch": "ng build --watch=true",
-    "build:compiler": "tsc -p tsconfig.compiler.json",
     "test": "ng test --watch=false --browsers=ChromeHeadlessCI --progress=false",
     "lint": "tslint --fix",
-    "reset-extensions": "rimraf ./src/app/extensions/modules && rimraf ./src/app/extensions/*.generated && rimraf ./src/app/extensions/*.temp",
-    "extract-translations": "ngx-translate-extract --input ./src --output ./src/i18n-messages/en.json --clean --sort --format namespaced-json --format-indentation \"  \" -m _",
-    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
+    "extract-translations": "ngx-translate-extract --input ./src/lib --output ./src/lib/static/i18n-messages/en.json --clean --sort --format namespaced-json --format-indentation \"  \" -m _",
+    "ngcc": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "package"
   },
   "dependencies": {
-    "@angular-devkit/build-angular": "~0.900.3",
-    "@angular/animations": "^9.0.2",
-    "@angular/cdk": "^9.0.1",
-    "@angular/cli": "^9.0.3",
-    "@angular/common": "^9.0.2",
-    "@angular/compiler": "^9.0.2",
-    "@angular/compiler-cli": "^9.0.2",
-    "@angular/core": "^9.0.2",
-    "@angular/forms": "^9.0.2",
-    "@angular/language-service": "^9.0.2",
-    "@angular/platform-browser": "^9.0.2",
-    "@angular/platform-browser-dynamic": "^9.0.2",
-    "@angular/router": "^9.0.2",
+    "@angular/animations": "9.0.6",
+    "@angular/cdk": "9.1.0",
+    "@angular/common": "9.0.6",
+    "@angular/core": "9.0.6",
+    "@angular/forms": "9.0.6",
+    "@angular/language-service": "9.0.6",
+    "@angular/platform-browser": "9.0.6",
+    "@angular/platform-browser-dynamic": "9.0.6",
+    "@angular/router": "9.0.6",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@clr/angular": "^3.0.0-rc.1",
-    "@clr/core": "^3.0.0-rc.1",
-    "@clr/icons": "^3.0.0-rc.1",
-    "@clr/ui": "^3.0.0-rc.1",
+    "@clr/angular": "^3.0.0",
+    "@clr/core": "^3.0.0",
+    "@clr/icons": "^3.0.0",
+    "@clr/ui": "^3.0.0",
     "@ng-select/ng-select": "^3.7.2",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
-    "@vendure/ui-devkit": "^0.9.0",
+    "@vendure/common": "^0.10.13",
+    "@vendure/ui-devkit": "^0.10.13",
     "@webcomponents/custom-elements": "^1.2.4",
     "apollo-angular": "^1.8.0",
     "apollo-cache-inmemory": "^1.6.5",
@@ -47,10 +44,8 @@
     "apollo-link": "^1.2.13",
     "apollo-link-context": "^1.0.19",
     "apollo-upload-client": "^12.1.0",
-    "chokidar": "^3.0.2",
     "core-js": "^3.1.3",
     "dayjs": "^1.8.20",
-    "fs-extra": "^8.1.0",
     "graphql": "^14.6.0",
     "graphql-tag": "^2.10.3",
     "messageformat": "2.2.0",
@@ -68,10 +63,14 @@
     "prosemirror-state": "^1.0.0",
     "rxjs": "^6.5.4",
     "tslib": "^1.10.0",
-    "typescript": "~3.7.5",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "~0.900.5",
+    "@angular-devkit/build-ng-packagr": "~0.900.5",
+    "@angular/cli": "^9.0.5",
+    "@angular/compiler": "^9.0.6",
+    "@angular/compiler-cli": "^9.0.6",
     "@biesbjerg/ngx-translate-extract": "^4.2.0",
     "@types/jasmine": "~3.3.16",
     "@types/jasminewd2": "~2.0.6",
@@ -81,6 +80,7 @@
     "@types/prosemirror-state": "^1.2.3",
     "@types/prosemirror-view": "^1.11.2",
     "codelyzer": "^5.1.2",
+    "fs-extra": "^8.1.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
@@ -89,9 +89,11 @@
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.2",
     "karma-mocha-reporter": "^2.2.5",
+    "ng-packagr": "^9.0.0",
     "protractor": "~5.4.2",
     "puppeteer": "^1.19.0",
     "rimraf": "^3.0.0",
-    "tslint": "^5.12.1"
+    "tslint": "^5.12.1",
+    "typescript": "~3.7.5"
   }
 }

packages/admin-ui/scripts/build-public-api.js

@@ -0,0 +1,65 @@
+// @ts-check
+const fs = require('fs');
+const path = require('path');
+// This script finds all app sources and then generates a "public-api.ts" file exporting their
+// contents. This is then used as the public API entrypoint for the Angular CLI's library
+// builder process.
+
+console.log('Generating public apis...');
+const SOURCES_DIR = path.join(__dirname, '/../src/lib');
+const APP_SOURCE_FILE_PATTERN = /\.ts$/;
+const EXCLUDED_PATTERN = /(public_api|spec|mock)\.ts$/;
+
+const MODULES = [
+    'catalog',
+    'core',
+    'customer',
+    'dashboard',
+    'login',
+    'marketing',
+    'order',
+    'settings',
+];
+
+for (const moduleDir of MODULES) {
+    const modulePath = path.join(SOURCES_DIR, moduleDir, 'src');
+
+    const files = [];
+    forMatchingFiles(modulePath, APP_SOURCE_FILE_PATTERN, filename => {
+        if (!EXCLUDED_PATTERN.test(filename)) {
+            const relativeFilename = '.' + filename.replace(modulePath, '')
+                .replace(/\\/g, '/')
+                .replace(/\.ts$/, '');
+            files.push(relativeFilename);
+        }
+    });
+    const header = `// This file was generated by the build-public-api.ts script\n`;
+    const fileContents = header + files.map(f => `export * from '${f}';`).join('\n') + '\n';
+    const publicApiFile = path.join(modulePath, 'public_api.ts');
+    fs.writeFileSync(publicApiFile, fileContents, 'utf8');
+    console.log(`Created ${publicApiFile}`);
+}
+
+/**
+ *
+ * @param startPath {string}
+ * @param filter {RegExp}
+ * @param callback {(filename: string) => void}
+ */
+function forMatchingFiles(startPath, filter, callback) {
+    if (!fs.existsSync(startPath)) {
+        console.log('Starting path does not exist ', startPath);
+        return;
+    }
+
+    const files = fs.readdirSync(startPath);
+    for (let i = 0; i < files.length; i++) {
+        const filename = path.join(startPath, files[i]);
+        const stat = fs.lstatSync(filename);
+        if (stat.isDirectory()) {
+            forMatchingFiles(filename, filter, callback); // recurse
+        } else if (filter.test(filename)) {
+            callback(filename);
+        }
+    }
+}

packages/admin-ui/scripts/copy-package-json.js

@@ -0,0 +1,10 @@
+const path = require('path');
+const fs = require('fs');
+// Copies the main package.json file into the lib directory so that
+// ng-packagr can use it when generating the library bundle
+console.log('Copying main package.json to library...');
+const packageJson = require('../package.json');
+const { name, version, license, dependencies } = packageJson;
+const subset = { name, version, license, dependencies };
+
+fs.writeFileSync(path.join(__dirname, '/../src/lib/package.json'), JSON.stringify(subset, null, 2), 'utf8');

packages/admin-ui/scripts/set-version.js

@@ -0,0 +1,18 @@
+const path = require('path');
+const fs = require('fs');
+const appVersion = require('../package.json').version;
+
+const versionFilePath = path.join(__dirname + '/../src/lib/core/src/common/version.ts');
+
+const src = `// Auto-generated by the set-version.js script.
+export const ADMIN_UI_VERSION = '${appVersion}';
+`;
+
+// ensure version module pulls value from package.json
+fs.writeFile(versionFilePath, src, { flat: 'w' }, function(err) {
+    if (err) {
+        return console.log(err);
+    }
+
+    console.log(`Updating application version ${appVersion}`);
+});

packages/admin-ui/src/app/app.module.ts

@@ -1,53 +1,12 @@
-import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
-import { HttpClient } from '@angular/common/http';
-import { Inject, Injectable, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { AppComponent, AppComponentModule } from '@vendure/admin-ui/core';
 
-import { AppComponent } from './app.component';
 import { routes } from './app.routes';
-import { getDefaultLanguage } from './common/utilities/get-default-language';
-import { CoreModule } from './core/core.module';
-import { CustomHttpTranslationLoader } from './core/providers/i18n/custom-http-loader';
-import { InjectableTranslateMessageFormatCompiler } from './core/providers/i18n/custom-message-format-compiler';
-import { I18nService } from './core/providers/i18n/i18n.service';
-import { DataService } from './data/providers/data.service';
-import { SharedExtensionsModule } from './extensions/shared-extensions.module';
-
-@Injectable()
-export class BaseHrefHolder {
-    constructor(@Inject(APP_BASE_HREF) public addBaseHref: string) {}
-}
-
-export function HttpLoaderFactory(http: HttpClient, location: PlatformLocation) {
-    // Dynamically get the baseHref, which is configured in the angular.json file
-    const baseHref = location.getBaseHrefFromDOM();
-    return new CustomHttpTranslationLoader(http, baseHref + 'i18n-messages/');
-}
 
 @NgModule({
-    declarations: [AppComponent],
-    imports: [
-        BrowserModule,
-        RouterModule.forRoot(routes, { useHash: false }),
-        TranslateModule.forRoot({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: HttpLoaderFactory,
-                deps: [HttpClient, PlatformLocation],
-            },
-            compiler: { provide: TranslateCompiler, useClass: InjectableTranslateMessageFormatCompiler },
-        }),
-        CoreModule,
-        SharedExtensionsModule,
-    ],
-    providers: [BaseHrefHolder],
+    declarations: [],
+    imports: [AppComponentModule, RouterModule.forRoot(routes, { useHash: false })],
     bootstrap: [AppComponent],
 })
-export class AppModule {
-    constructor(private dataService: DataService, private i18nService: I18nService) {
-        this.dataService.client.setUiLanguage(getDefaultLanguage());
-        this.i18nService.setDefaultLanguage(getDefaultLanguage());
-    }
-}
+export class AppModule {}

packages/admin-ui/src/app/app.routes.ts

@@ -1,11 +1,9 @@
 import { Route } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-
-import { AppShellComponent } from './core/components/app-shell/app-shell.component';
-import { AuthGuard } from './core/providers/guard/auth.guard';
+import { AppShellComponent, AuthGuard } from '@vendure/admin-ui/core';
 
 export const routes: Route[] = [
-    { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
+    { path: 'login', loadChildren: () => import('@vendure/admin-ui/login').then(m => m.LoginModule) },
     {
         path: '',
         canActivate: [AuthGuard],
@@ -17,32 +15,27 @@ export const routes: Route[] = [
             {
                 path: '',
                 pathMatch: 'full',
-                loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
+                loadChildren: () => import('@vendure/admin-ui/dashboard').then(m => m.DashboardModule),
             },
             {
                 path: 'catalog',
-                loadChildren: () => import('./catalog/catalog.module').then(m => m.CatalogModule),
+                loadChildren: () => import('@vendure/admin-ui/catalog').then(m => m.CatalogModule),
             },
             {
                 path: 'customer',
-                loadChildren: () => import('./customer/customer.module').then(m => m.CustomerModule),
+                loadChildren: () => import('@vendure/admin-ui/customer').then(m => m.CustomerModule),
             },
             {
                 path: 'orders',
-                loadChildren: () => import('./order/order.module').then(m => m.OrderModule),
+                loadChildren: () => import('@vendure/admin-ui/order').then(m => m.OrderModule),
             },
             {
                 path: 'marketing',
-                loadChildren: () => import('./marketing/marketing.module').then(m => m.MarketingModule),
+                loadChildren: () => import('@vendure/admin-ui/marketing').then(m => m.MarketingModule),
             },
             {
                 path: 'settings',
-                loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule),
-            },
-            {
-                path: 'extensions',
-                loadChildren: () =>
-                    import(`./extensions/lazy-extensions.module`).then(m => m.LazyExtensionsModule),
+                loadChildren: () => import('@vendure/admin-ui/settings').then(m => m.SettingsModule),
             },
         ],
     },

packages/admin-ui/src/app/core/core.module.ts

@@ -1,52 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { DataModule } from '../data/data.module';
-import { SharedModule } from '../shared/shared.module';
-
-import { AppShellComponent } from './components/app-shell/app-shell.component';
-import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
-import { ChannelSwitcherComponent } from './components/channel-switcher/channel-switcher.component';
-import { JobListComponent } from './components/job-list/job-list.component';
-import { MainNavComponent } from './components/main-nav/main-nav.component';
-import { NotificationComponent } from './components/notification/notification.component';
-import { OverlayHostComponent } from './components/overlay-host/overlay-host.component';
-import { UiLanguageSwitcherComponent } from './components/ui-language-switcher/ui-language-switcher.component';
-import { UserMenuComponent } from './components/user-menu/user-menu.component';
-import { AuthService } from './providers/auth/auth.service';
-import { CustomFieldComponentService } from './providers/custom-field-component/custom-field-component.service';
-import { AuthGuard } from './providers/guard/auth.guard';
-import { I18nService } from './providers/i18n/i18n.service';
-import { JobQueueService } from './providers/job-queue/job-queue.service';
-import { LocalStorageService } from './providers/local-storage/local-storage.service';
-import { NavBuilderService } from './providers/nav-builder/nav-builder.service';
-import { NotificationService } from './providers/notification/notification.service';
-import { OverlayHostService } from './providers/overlay-host/overlay-host.service';
-
-@NgModule({
-    imports: [DataModule, SharedModule, BrowserAnimationsModule],
-    exports: [SharedModule, OverlayHostComponent],
-    providers: [
-        LocalStorageService,
-        AuthGuard,
-        AuthService,
-        I18nService,
-        OverlayHostService,
-        NotificationService,
-        JobQueueService,
-        NavBuilderService,
-        CustomFieldComponentService,
-    ],
-    declarations: [
-        AppShellComponent,
-        UserMenuComponent,
-        MainNavComponent,
-        BreadcrumbComponent,
-        OverlayHostComponent,
-        NotificationComponent,
-        UiLanguageSwitcherComponent,
-        JobListComponent,
-        ChannelSwitcherComponent,
-    ],
-})
-export class CoreModule {}

packages/admin-ui/src/app/extensions/lazy-extensions.module.ts

@@ -1,15 +0,0 @@
-/** This file is generated by the createExtensionsModules() function in devkit/common.ts. Do not edit. */
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-/**
- * This is a placeholder module for UI extensions provided by the AdminUiPlugin `extensions` option.
- * When the {@link createExtensionsModules} function is executed, this module gets temporarily replaced
- * by a generated module which includes all of the configured extension modules.
- */
-@NgModule({
-    imports: [
-        CommonModule,
-    ],
-})
-export class LazyExtensionsModule {}

packages/admin-ui/src/app/extensions/shared-extensions.module.ts

@@ -1,15 +0,0 @@
-/** This file is generated by the createExtensionsModules() function in devkit/common.ts. Do not edit. */
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-/**
- * This is a placeholder module for UI extensions provided by the AdminUiPlugin `extensions` option.
- * When the {@link createExtensionsModules} function is executed, this module gets temporarily replaced
- * by a generated module which includes all of the configured extension modules.
- */
-@NgModule({
-    imports: [
-        CommonModule,
-    ],
-})
-export class SharedExtensionsModule {}

packages/admin-ui/src/app/login/components/login/login.component.scss

@@ -1,22 +0,0 @@
-@import "variables";
-
-.login-wrapper {
-    // funny url prefix is a work-around for an issue caused by setting the base href.
-    // See https://github.com/angular/angular-cli/issues/4782#issuecomment-423650190
-    background-image: url("~src/assets/dark-triangles.png");
-    background-repeat: repeat;
-    background-size: auto;
-    justify-content: center;
-}
-
-.title {
-    text-align: center;
-}
-
-.version {
-    flex: 1;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    color: $color-grey-300;
-}

packages/admin-ui/src/app/shared/shared-declarations.ts

@@ -1,76 +0,0 @@
-export {
-    ActionBarComponent,
-    ActionBarLeftComponent,
-    ActionBarRightComponent,
-} from './components/action-bar/action-bar.component';
-export { AffixedInputComponent } from './components/affixed-input/affixed-input.component';
-export { AssetFileInputComponent } from './components/asset-file-input/asset-file-input.component';
-export { AssetGalleryComponent } from './components/asset-gallery/asset-gallery.component';
-export { AssetPickerDialogComponent } from './components/asset-picker-dialog/asset-picker-dialog.component';
-export {
-    AssetPreviewDialogComponent,
-} from './components/asset-preview-dialog/asset-preview-dialog.component';
-export { AssetPreviewComponent } from './components/asset-preview/asset-preview.component';
-export { AssetPreviewPipe } from './pipes/asset-preview.pipe';
-export { PercentageSuffixInputComponent } from './components/affixed-input/percentage-suffix-input.component';
-export {
-    ChannelAssignmentControlComponent,
-} from './components/channel-assignment-control/channel-assignment-control.component';
-export { ChannelBadgeComponent } from './components/channel-badge/channel-badge.component';
-export { ChannelLabelPipe } from './pipes/channel-label.pipe';
-export { ChipComponent } from './components/chip/chip.component';
-export { ConfigurableInputComponent } from './components/configurable-input/configurable-input.component';
-export { CurrencyInputComponent } from './components/currency-input/currency-input.component';
-export {
-    CustomFieldControlComponent,
-} from './components/custom-field-control/custom-field-control.component';
-export { CustomFieldLabelPipe } from './pipes/custom-field-label.pipe';
-export { CustomerLabelComponent } from './components/customer-label/customer-label.component';
-export { DataTableColumnComponent } from './components/data-table/data-table-column.component';
-export { DataTableComponent } from './components/data-table/data-table.component';
-export { DropdownItemDirective } from './components/dropdown/dropdown-item.directive';
-export { DropdownMenuComponent } from './components/dropdown/dropdown-menu.component';
-export { DropdownTriggerDirective } from './components/dropdown/dropdown-trigger.directive';
-export { DropdownComponent } from './components/dropdown/dropdown.component';
-export { FacetValueChipComponent } from './components/facet-value-chip/facet-value-chip.component';
-export {
-    FacetValueSelectorComponent,
-} from './components/facet-value-selector/facet-value-selector.component';
-export { FocalPointControlComponent } from './components/focal-point-control/focal-point-control.component';
-export { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
-export { FormFieldComponent } from './components/form-field/form-field.component';
-export { FormItemComponent } from './components/form-item/form-item.component';
-export { FormattedAddressComponent } from './components/formatted-address/formatted-address.component';
-export { IfDefaultChannelActiveDirective } from './directives/if-default-channel-active.directive';
-export { IfMultichannelDirective } from './directives/if-multichannel.directive';
-export { IfPermissionsDirective } from './directives/if-permissions.directive';
-export {
-    ItemsPerPageControlsComponent,
-} from './components/items-per-page-controls/items-per-page-controls.component';
-export { LabeledDataComponent } from './components/labeled-data/labeled-data.component';
-export { LanguageSelectorComponent } from './components/language-selector/language-selector.component';
-export { DialogButtonsDirective } from './components/modal-dialog/dialog-buttons.directive';
-export { DialogComponentOutletComponent } from './components/modal-dialog/dialog-component-outlet.component';
-export { DialogTitleDirective } from './components/modal-dialog/dialog-title.directive';
-export { ExtensionHostComponent } from './components/extension-host/extension-host.component';
-export * from './components/extension-host/extension-host-config';
-export { ModalDialogComponent } from './components/modal-dialog/modal-dialog.component';
-export { ObjectTreeComponent } from './components/object-tree/object-tree.component';
-export { OrderStateLabelComponent } from './components/order-state-label/order-state-label.component';
-export { PaginationControlsComponent } from './components/pagination-controls/pagination-controls.component';
-export { RichTextEditorComponent } from './components/rich-text-editor/rich-text-editor.component';
-export {
-    ExternalImageDialogComponent,
-} from './components/rich-text-editor/external-image-dialog/external-image-dialog.component';
-export { LinkDialogComponent } from './components/rich-text-editor/link-dialog/link-dialog.component';
-export { SelectToggleComponent } from './components/select-toggle/select-toggle.component';
-export { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component';
-export { TableRowActionComponent } from './components/table-row-action/table-row-action.component';
-export { TitleInputComponent } from './components/title-input/title-input.component';
-export { EntityInfoComponent } from './components/entity-info/entity-info.component';
-export { DatetimePickerComponent } from './components/datetime-picker/datetime-picker.component';
-export { CurrencyNamePipe } from './pipes/currency-name.pipe';
-export { FileSizePipe } from './pipes/file-size.pipe';
-export { SentenceCasePipe } from './pipes/sentence-case.pipe';
-export { SortPipe } from './pipes/sort.pipe';
-export { StringToColorPipe } from './pipes/string-to-color.pipe';

packages/admin-ui/src/app/shared/shared.module.ts

@@ -1,177 +0,0 @@
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-import { ClarityModule } from '@clr/angular';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { TranslateModule } from '@ngx-translate/core';
-import { NgxPaginationModule } from 'ngx-pagination';
-
-import { ActionBarItemsComponent } from './components/action-bar-items/action-bar-items.component';
-import {
-    ActionBarComponent,
-    ActionBarLeftComponent,
-    ActionBarRightComponent,
-} from './components/action-bar/action-bar.component';
-import { DisabledDirective } from './directives/disabled.directive';
-import { HasPermissionPipe } from './pipes/has-permission.pipe';
-import { ModalService } from './providers/modal/modal.service';
-import { CanDeactivateDetailGuard } from './providers/routing/can-deactivate-detail-guard';
-import {
-    AffixedInputComponent,
-    AssetFileInputComponent,
-    AssetGalleryComponent,
-    AssetPickerDialogComponent,
-    AssetPreviewComponent,
-    AssetPreviewDialogComponent,
-    AssetPreviewPipe,
-    ChannelAssignmentControlComponent,
-    ChannelBadgeComponent,
-    ChannelLabelPipe,
-    ChipComponent,
-    ConfigurableInputComponent,
-    CurrencyInputComponent,
-    CurrencyNamePipe,
-    CustomerLabelComponent,
-    CustomFieldControlComponent,
-    CustomFieldLabelPipe,
-    DataTableColumnComponent,
-    DataTableComponent,
-    DatetimePickerComponent,
-    DialogButtonsDirective,
-    DialogComponentOutletComponent,
-    DialogTitleDirective,
-    DropdownComponent,
-    DropdownItemDirective,
-    DropdownMenuComponent,
-    DropdownTriggerDirective,
-    EntityInfoComponent,
-    ExtensionHostComponent,
-    ExternalImageDialogComponent,
-    FacetValueChipComponent,
-    FacetValueSelectorComponent,
-    FileSizePipe,
-    FocalPointControlComponent,
-    FormattedAddressComponent,
-    FormFieldComponent,
-    FormFieldControlDirective,
-    FormItemComponent,
-    IfDefaultChannelActiveDirective,
-    IfMultichannelDirective,
-    IfPermissionsDirective,
-    ItemsPerPageControlsComponent,
-    LabeledDataComponent,
-    LanguageSelectorComponent,
-    LinkDialogComponent,
-    ModalDialogComponent,
-    ObjectTreeComponent,
-    OrderStateLabelComponent,
-    PaginationControlsComponent,
-    PercentageSuffixInputComponent,
-    RichTextEditorComponent,
-    SelectToggleComponent,
-    SentenceCasePipe,
-    SimpleDialogComponent,
-    SortPipe,
-    StringToColorPipe,
-    TableRowActionComponent,
-    TitleInputComponent,
-} from './shared-declarations';
-
-const IMPORTS = [
-    ClarityModule,
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    RouterModule,
-    NgSelectModule,
-    NgxPaginationModule,
-    TranslateModule,
-    OverlayModule,
-    DragDropModule,
-];
-
-const DECLARATIONS = [
-    ActionBarComponent,
-    ActionBarLeftComponent,
-    ActionBarRightComponent,
-    AssetPreviewComponent,
-    AssetPreviewDialogComponent,
-    ConfigurableInputComponent,
-    AffixedInputComponent,
-    ChipComponent,
-    CurrencyInputComponent,
-    CurrencyNamePipe,
-    CustomerLabelComponent,
-    CustomFieldControlComponent,
-    DataTableComponent,
-    DataTableColumnComponent,
-    FacetValueSelectorComponent,
-    ItemsPerPageControlsComponent,
-    PaginationControlsComponent,
-    TableRowActionComponent,
-    FacetValueChipComponent,
-    FileSizePipe,
-    FormFieldComponent,
-    FormFieldControlDirective,
-    FormItemComponent,
-    ModalDialogComponent,
-    PercentageSuffixInputComponent,
-    DialogComponentOutletComponent,
-    DialogButtonsDirective,
-    DialogTitleDirective,
-    SelectToggleComponent,
-    LanguageSelectorComponent,
-    RichTextEditorComponent,
-    SimpleDialogComponent,
-    TitleInputComponent,
-    SentenceCasePipe,
-    DropdownComponent,
-    DropdownMenuComponent,
-    SortPipe,
-    DropdownTriggerDirective,
-    DropdownItemDirective,
-    OrderStateLabelComponent,
-    FormattedAddressComponent,
-    LabeledDataComponent,
-    StringToColorPipe,
-    ObjectTreeComponent,
-    IfPermissionsDirective,
-    IfMultichannelDirective,
-    HasPermissionPipe,
-    ActionBarItemsComponent,
-    DisabledDirective,
-    AssetFileInputComponent,
-    AssetGalleryComponent,
-    AssetPickerDialogComponent,
-    EntityInfoComponent,
-    DatetimePickerComponent,
-    ChannelBadgeComponent,
-    ChannelAssignmentControlComponent,
-    ChannelLabelPipe,
-    IfDefaultChannelActiveDirective,
-    ExtensionHostComponent,
-    CustomFieldLabelPipe,
-    FocalPointControlComponent,
-    AssetPreviewPipe,
-    LinkDialogComponent,
-    ExternalImageDialogComponent,
-];
-
-@NgModule({
-    imports: IMPORTS,
-    exports: [...IMPORTS, ...DECLARATIONS],
-    declarations: DECLARATIONS,
-    providers: [
-        // This needs to be shared, since lazy-loaded
-        // modules have their own entryComponents which
-        // are unknown to the CoreModule instance of ModalService.
-        // See https://github.com/angular/angular/issues/14324#issuecomment-305650763
-        ModalService,
-        CanDeactivateDetailGuard,
-    ],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class SharedModule {}

packages/admin-ui/src/compiler/common.ts

@@ -1,135 +0,0 @@
-import { AdminUiExtension, AdminUiExtensionModule } from '@vendure/common/lib/shared-types';
-import * as fs from 'fs-extra';
-import * as path from 'path';
-
-const EXTENSIONS_DIR = path.join(__dirname, '../src/app/extensions');
-const EXTENSIONS_MODULES_DIR = 'modules';
-const STATIC_ASSETS_OUTPUT_DIR = path.join(EXTENSIONS_DIR, '__static-assets__');
-const lazyExtensionsModuleFile = path.join(EXTENSIONS_DIR, 'lazy-extensions.module.ts');
-const sharedExtensionsModuleFile = path.join(EXTENSIONS_DIR, 'shared-extensions.module.ts');
-
-/**
- * Returns true if currently being executed from inside the Vendure monorepo.
- */
-export function isInVendureMonorepo(): boolean {
-    return fs.existsSync(path.join(__dirname, '../../dev-server'));
-}
-
-/**
- * Deletes the contents of the /modules directory, which contains the plugin
- * extension modules copied over during the last compilation.
- */
-export function deleteExistingExtensionModules() {
-    fs.removeSync(path.join(EXTENSIONS_DIR, EXTENSIONS_MODULES_DIR));
-    fs.removeSync(STATIC_ASSETS_OUTPUT_DIR);
-}
-
-/**
- * Copies all files from the extensionPaths of the configured extensions into the
- * admin-ui source tree.
- */
-export function copyExtensionModules(extensions: Array<Required<AdminUiExtension>>) {
-    for (const extension of extensions) {
-        const dirName = path.basename(path.dirname(extension.extensionPath));
-        const dest = getModuleOutputDir(extension);
-        fs.copySync(extension.extensionPath, dest);
-        if (Array.isArray(extension.staticAssets)) {
-            for (const asset of extension.staticAssets) {
-                copyStaticAsset(asset);
-            }
-        }
-    }
-}
-
-/**
- * Copy the @vendure/ui-devkit files to the static assets dir.
- */
-export function copyUiDevkit() {
-    const devkitDir = path.join(STATIC_ASSETS_OUTPUT_DIR, 'devkit');
-    fs.ensureDirSync(devkitDir);
-    fs.copySync(require.resolve('@vendure/ui-devkit'), path.join(devkitDir, 'ui-devkit.js'));
-}
-
-/**
- * Copies over any files defined by the extensions' `staticAssets` array to the shared
- * static assets directory. When the app is built by the ng cli, this assets directory is
- * the copied over to the final static assets location (i.e. http://domain/admin/assets/)
- */
-export function copyStaticAsset(staticAssetPath: string) {
-    const stats = fs.statSync(staticAssetPath);
-    if (stats.isDirectory()) {
-        const assetDirname = path.basename(staticAssetPath);
-        fs.copySync(staticAssetPath, path.join(STATIC_ASSETS_OUTPUT_DIR, assetDirname));
-    } else {
-        fs.copySync(staticAssetPath, STATIC_ASSETS_OUTPUT_DIR);
-    }
-}
-
-export function getModuleOutputDir(extension: Required<AdminUiExtension>): string {
-    return path.join(EXTENSIONS_DIR, EXTENSIONS_MODULES_DIR, extension.id);
-}
-
-export function createExtensionsModules(extensions: Array<Required<AdminUiExtension>>) {
-    const removeTsExtension = (filename: string): string => filename.replace(/\.ts$/, '');
-    const importPath = (id: string, fileName: string): string =>
-        `./${EXTENSIONS_MODULES_DIR}/${id}/${removeTsExtension(fileName)}`;
-
-    for (const type of ['lazy', 'shared'] as const) {
-        const modulesOfType = extensions
-            .reduce(
-                (modules, e) => [...modules, ...e.ngModules.map(m => ({ id: e.id, module: m }))],
-                [] as Array<{ id: string; module: AdminUiExtensionModule }>,
-            )
-            .filter(m => m.module.type === type)
-            .map(e => ({
-                className: e.module.ngModuleName,
-                path: importPath(e.id, e.module.ngModuleFileName),
-            }));
-        const source = generateExtensionModuleTsSource(type, modulesOfType);
-        const filePath = type === 'lazy' ? lazyExtensionsModuleFile : sharedExtensionsModuleFile;
-        fs.writeFileSync(filePath, source, 'utf-8');
-    }
-}
-
-export function restoreOriginalExtensionsModule() {
-    restoreExtensionsModules();
-}
-
-/**
- * Restores the placeholder ExtensionsModule file from a template.
- */
-export function restoreExtensionsModules() {
-    for (const type of ['lazy', 'shared'] as const) {
-        const source = generateExtensionModuleTsSource(type, []);
-        const filePath = type === 'lazy' ? lazyExtensionsModuleFile : sharedExtensionsModuleFile;
-        fs.writeFileSync(filePath, source, 'utf-8');
-    }
-}
-
-function generateExtensionModuleTsSource(
-    type: 'shared' | 'lazy',
-    modules: Array<{ className: string; path: string }>,
-): string {
-    return `/** This file is generated by the createExtensionsModules() function in devkit/common.ts. Do not edit. */
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-${
-    modules.length === 0
-        ? ''
-        : '\n' + modules.map(e => `import { ${e.className} } from '${e.path}';`).join('\n')
-}
-/**
- * This is a placeholder module for UI extensions provided by the AdminUiPlugin \`extensions\` option.
- * When the {@link createExtensionsModules} function is executed, this module gets temporarily replaced
- * by a generated module which includes all of the configured extension modules.
- */
-@NgModule({
-    imports: [
-        CommonModule,${
-            modules.length === 0 ? '' : '\n' + modules.map(e => '        ' + e.className + ',').join('\n')
-        }
-    ],
-})
-export class ${type === 'lazy' ? 'Lazy' : 'Shared'}ExtensionsModule {}
-`;
-}

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

@@ -1,50 +0,0 @@
-import { AdminUiExtension } from '@vendure/common/lib/shared-types';
-import { spawn } from 'child_process';
-import * as path from 'path';
-
-import {
-    copyExtensionModules,
-    copyUiDevkit,
-    createExtensionsModules,
-    deleteExistingExtensionModules,
-    isInVendureMonorepo,
-    restoreOriginalExtensionsModule,
-} from './common';
-
-/**
- * Builds the admin-ui app using the Angular CLI `ng build --prod` command.
- */
-export function compileAdminUiApp(outputPath: string, extensions: Array<Required<AdminUiExtension>>) {
-    const cwd = path.join(__dirname, '..');
-    const relativeOutputPath = path.relative(cwd, outputPath);
-    return new Promise((resolve, reject) => {
-        restoreOriginalExtensionsModule();
-        deleteExistingExtensionModules();
-        copyExtensionModules(extensions);
-        copyUiDevkit();
-        createExtensionsModules(extensions);
-
-        const config = isInVendureMonorepo() ? 'plugin-dev' : 'plugin';
-        const buildProcess = spawn(
-            'yarn',
-            ['ng', 'build', `-c=${config}`, `--outputPath=${relativeOutputPath}`],
-            {
-                cwd,
-                shell: true,
-                stdio: 'inherit',
-            },
-        );
-        buildProcess.on('close', code => {
-            if (code === 0) {
-                resolve();
-            } else {
-                reject(code);
-            }
-        });
-        buildProcess.on('error', err => {
-            reject(err);
-        });
-    }).finally(() => {
-        restoreOriginalExtensionsModule();
-    });
-}

packages/admin-ui/src/compiler/watch.ts

@@ -1,94 +0,0 @@
-import { AdminUiExtension } from '@vendure/common/lib/shared-types';
-import { spawn } from 'child_process';
-import { FSWatcher, watch } from 'chokidar';
-import * as fs from 'fs-extra';
-import * as path from 'path';
-
-import {
-    copyExtensionModules,
-    copyStaticAsset,
-    copyUiDevkit,
-    createExtensionsModules,
-    deleteExistingExtensionModules,
-    getModuleOutputDir,
-    isInVendureMonorepo,
-    restoreExtensionsModules,
-    restoreOriginalExtensionsModule,
-} from './common';
-
-export type Watcher = {
-    close: () => void;
-};
-
-/**
- * Starts the admin ui app in watch mode using the Angular CLI `ng serve` command. Also watches
- * the individual files of any configured extensions and copies them upon change, triggering a
- * rebuild of the Angular app.
- */
-export function watchAdminUiApp(extensions: Array<Required<AdminUiExtension>>, port: number): Watcher {
-    const cwd = path.join(__dirname, '..');
-    restoreExtensionsModules();
-    deleteExistingExtensionModules();
-    copyExtensionModules(extensions);
-    copyUiDevkit();
-    createExtensionsModules(extensions);
-
-    const config = isInVendureMonorepo() ? 'plugin-dev' : 'plugin';
-    const buildProcess = spawn('yarn', ['ng', 'serve', `-c=${config}`, `--port=${port}`, `--poll=1000`], {
-        cwd,
-        shell: true,
-        stdio: 'inherit',
-    });
-    const devkitPath = require.resolve('@vendure/ui-devkit');
-
-    let watcher: FSWatcher | undefined;
-    for (const extension of extensions) {
-        if (!watcher) {
-            watcher = watch(extension.extensionPath, {
-                depth: 4,
-                ignored: '**/node_modules/',
-            });
-        } else {
-            watcher.add(extension.extensionPath);
-        }
-    }
-
-    if (watcher) {
-        // watch the ui-devkit package files too
-        watcher.add(devkitPath);
-    }
-
-    if (watcher) {
-        watcher.on('change', filePath => {
-            const extension = extensions.find(e => filePath.includes(e.extensionPath));
-            if (extension) {
-                if (extension.staticAssets) {
-                    for (const assetPath of extension.staticAssets) {
-                        if (filePath.includes(assetPath)) {
-                            copyStaticAsset(assetPath);
-                            return;
-                        }
-                    }
-                }
-                const outputDir = getModuleOutputDir(extension);
-                const filePart = path.relative(extension.extensionPath, filePath);
-                const dest = path.join(outputDir, filePart);
-                fs.copyFile(filePath, dest);
-            }
-            if (filePath.includes(devkitPath)) {
-                copyUiDevkit();
-            }
-        });
-    }
-
-    const close = () => {
-        if (watcher) {
-            watcher.close();
-        }
-        buildProcess.kill();
-        restoreOriginalExtensionsModule();
-    };
-
-    process.on('SIGINT', close);
-    return { close };
-}

packages/admin-ui/src/environments/environment.prod.ts

@@ -1,5 +1,3 @@
-declare function require(path: string): any;
 export const environment = {
     production: true,
-    version: require('../../../core/package.json').version,
 };

packages/admin-ui/src/environments/environment.ts

@@ -1,10 +1,8 @@
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
-declare function require(path: string): any;
 export const environment = {
     production: false,
-    version: require('../../../core/package.json').version,
 };
 
 /*

packages/admin-ui/src/index.ts

@@ -1,19 +0,0 @@
-// This is the "public API" of the admin-ui package, used by plugins which want to define
-// extensions to the admin UI and need to import components (services, modules etc) from the admin-ui.
-
-export { JobQueueService } from './app/core/providers/job-queue/job-queue.service';
-export { LocalStorageService } from './app/core/providers/local-storage/local-storage.service';
-export { NotificationService } from './app/core/providers/notification/notification.service';
-export { DataModule } from './app/data/data.module';
-export { DataService } from './app/data/providers/data.service';
-export { ServerConfigService } from './app/data/server-config';
-export * from './app/shared/providers/modal/modal.service';
-export { SharedModule } from './app/shared/shared.module';
-export { NavBuilderService } from './app/core/providers/nav-builder/nav-builder.service';
-export { BaseListComponent } from './app/common/base-list.component';
-export { BaseDetailComponent } from './app/common/base-detail.component';
-export { BaseEntityResolver } from './app/common/base-entity-resolver';
-export * from './app/core/providers/nav-builder/nav-builder-types';
-export * from './app/core/providers/custom-field-component/custom-field-component.service';
-export * from './app/shared/shared-declarations';
-export * from './app/shared/providers/routing/can-deactivate-detail-guard';

packages/admin-ui/src/lib/catalog/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "lib": {
+    "styleIncludePaths": [
+      "../static/styles"
+    ]
+  }
+}

packages/admin-ui/src/app/catalog/catalog.module.ts → packages/admin-ui/src/lib/catalog/src/catalog.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-
-import { SharedModule } from '../shared/shared.module';
+import { SharedModule } from '@vendure/admin-ui/core';
 
 import { catalogRoutes } from './catalog.routes';
 import { ApplyFacetDialogComponent } from './components/apply-facet-dialog/apply-facet-dialog.component';
@@ -26,12 +25,6 @@ import { ProductVariantsListComponent } from './components/product-variants-list
 import { ProductVariantsTableComponent } from './components/product-variants-table/product-variants-table.component';
 import { UpdateProductOptionDialogComponent } from './components/update-product-option-dialog/update-product-option-dialog.component';
 import { VariantPriceDetailComponent } from './components/variant-price-detail/variant-price-detail.component';
-import { ProductDetailService } from './providers/product-detail.service';
-import { AssetResolver } from './providers/routing/asset-resolver';
-import { CollectionResolver } from './providers/routing/collection-resolver';
-import { FacetResolver } from './providers/routing/facet-resolver';
-import { ProductResolver } from './providers/routing/product-resolver';
-import { ProductVariantsResolver } from './providers/routing/product-variants-resolver';
 
 @NgModule({
     imports: [SharedModule, RouterModule.forChild(catalogRoutes)],
@@ -60,13 +53,5 @@ import { ProductVariantsResolver } from './providers/routing/product-variants-re
         AssignProductsToChannelDialogComponent,
         AssetDetailComponent,
     ],
-    providers: [
-        ProductResolver,
-        FacetResolver,
-        CollectionResolver,
-        ProductDetailService,
-        ProductVariantsResolver,
-        AssetResolver,
-    ],
 })
 export class CatalogModule {}

packages/admin-ui/src/app/catalog/catalog.routes.ts → packages/admin-ui/src/lib/catalog/src/catalog.routes.ts

@@ -1,19 +1,15 @@
 import { Route } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { createResolveData } from '../common/base-entity-resolver';
-import { detailBreadcrumb } from '../common/detail-breadcrumb';
 import {
     Asset,
+    CanDeactivateDetailGuard,
     Collection,
+    createResolveData,
+    detailBreadcrumb,
     FacetWithValues,
-    OrderDetail,
     ProductWithVariants,
-} from '../common/generated-types';
-import { BreadcrumbValue } from '../core/components/breadcrumb/breadcrumb.component';
-import { CanDeactivateDetailGuard } from '../shared/providers/routing/can-deactivate-detail-guard';
+} from '@vendure/admin-ui/core';
+import { map } from 'rxjs/operators';
 
 import { AssetDetailComponent } from './components/asset-detail/asset-detail.component';
 import { AssetListComponent } from './components/asset-list/asset-list.component';

packages/admin-ui/src/app/catalog/components/apply-facet-dialog/apply-facet-dialog.component.ts → packages/admin-ui/src/lib/catalog/src/components/apply-facet-dialog/apply-facet-dialog.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
-import { FacetValue, FacetWithValues } from '../../../common/generated-types';
-import { Dialog } from '../../../shared/providers/modal/modal.service';
+import { FacetValue, FacetWithValues } from '@vendure/admin-ui/core';
+import { Dialog } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-apply-facet-dialog',

packages/admin-ui/src/app/catalog/components/asset-detail/asset-detail.component.ts → packages/admin-ui/src/lib/catalog/src/components/asset-detail/asset-detail.component.ts

@@ -2,12 +2,8 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-
-import { BaseDetailComponent } from '../../../common/base-detail.component';
-import { Asset, LanguageCode } from '../../../common/generated-types';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { ServerConfigService } from '../../../data/server-config';
+import { Asset, BaseDetailComponent, LanguageCode } from '@vendure/admin-ui/core';
+import { DataService, NotificationService, ServerConfigService } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-asset-detail',

packages/admin-ui/src/app/catalog/components/asset-list/asset-list.component.html → packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html

@@ -18,7 +18,7 @@
 </vdr-action-bar>
 
 <vdr-asset-gallery
-    [assets]="items$ | async | paginate: (paginationConfig$ | async) || {}"
+    [assets]="(items$ | async)! | paginate: (paginationConfig$ | async) || {}"
     [multiSelect]="true"
 ></vdr-asset-gallery>
 

packages/admin-ui/src/app/catalog/components/asset-list/asset-list.component.ts → packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.ts

@@ -2,15 +2,11 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { BaseListComponent, DataService, GetAssetList, NotificationService } from '@vendure/admin-ui/core';
+import { SortOrder } from '@vendure/common/lib/generated-shop-types';
 import { PaginationInstance } from 'ngx-pagination';
 import { combineLatest, Observable } from 'rxjs';
 import { debounceTime, map, takeUntil } from 'rxjs/operators';
-import { SortOrder } from 'shared/generated-shop-types';
-
-import { BaseListComponent } from '../../../common/base-list.component';
-import { GetAssetList } from '../../../common/generated-types';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
 
 @Component({
     selector: 'vdr-asset-list',

packages/admin-ui/src/app/catalog/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.ts → packages/admin-ui/src/lib/catalog/src/components/assign-products-to-channel-dialog/assign-products-to-channel-dialog.component.ts

@@ -4,10 +4,10 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { combineLatest, from, Observable } from 'rxjs';
 import { map, startWith, switchMap } from 'rxjs/operators';
 
-import { GetChannels, ProductVariantFragment } from '../../../common/generated-types';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { Dialog } from '../../../shared/providers/modal/modal.service';
+import { GetChannels, ProductVariantFragment } from '@vendure/admin-ui/core';
+import { NotificationService } from '@vendure/admin-ui/core';
+import { DataService } from '@vendure/admin-ui/core';
+import { Dialog } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-assign-products-to-channel-dialog',

packages/admin-ui/src/app/catalog/components/collection-contents/collection-contents.component.ts → packages/admin-ui/src/lib/catalog/src/components/collection-contents/collection-contents.component.ts

@@ -22,8 +22,8 @@ import {
     tap,
 } from 'rxjs/operators';
 
-import { GetCollectionContents } from '../../../common/generated-types';
-import { DataService } from '../../../data/providers/data.service';
+import { GetCollectionContents } from '@vendure/admin-ui/core';
+import { DataService } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-collection-contents',

packages/admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts → packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts

@@ -1,35 +1,28 @@
-import {
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    OnDestroy,
-    OnInit,
-    ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { combineLatest, Observable } from 'rxjs';
-import { mergeMap, shareReplay, take } from 'rxjs/operators';
-
-import { BaseDetailComponent } from '../../../common/base-detail.component';
 import {
+    BaseDetailComponent,
     Collection,
     ConfigurableOperation,
     ConfigurableOperationDefinition,
     ConfigurableOperationInput,
     CreateCollectionInput,
+    createUpdatedTranslatable,
     CustomFieldConfig,
+    DataService,
     FacetWithValues,
     GetActiveChannel,
     LanguageCode,
+    ModalService,
+    NotificationService,
+    ServerConfigService,
     UpdateCollectionInput,
-} from '../../../common/generated-types';
-import { createUpdatedTranslatable } from '../../../common/utilities/create-updated-translatable';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { ServerConfigService } from '../../../data/server-config';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
+} from '@vendure/admin-ui/core';
+import { combineLatest, Observable } from 'rxjs';
+import { mergeMap, shareReplay, take } from 'rxjs/operators';
+
 import { CollectionContentsComponent } from '../collection-contents/collection-contents.component';
 
 @Component({

packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.ts → packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.ts

@@ -1,14 +1,11 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { GetCollectionList } from '@vendure/admin-ui/core';
+import { DataService, ModalService, NotificationService, QueryResult } from '@vendure/admin-ui/core';
 import { combineLatest, EMPTY, Observable } from 'rxjs';
 import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
 
-import { Collection, GetCollectionList } from '../../../common/generated-types';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { QueryResult } from '../../../data/query-result';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
 import { RearrangeEvent } from '../collection-tree/collection-tree.component';
 
 @Component({

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts → packages/admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree-node.component.ts

@@ -3,8 +3,8 @@ import { ChangeDetectionStrategy, Component, Input, OnInit, Optional, SkipSelf }
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 
-import { Permission } from '../../../common/generated-types';
-import { DataService } from '../../../data/providers/data.service';
+import { Permission } from '@vendure/admin-ui/core';
+import { DataService } from '@vendure/admin-ui/core';
 
 import { RootNode, TreeNode } from './array-to-tree';
 import { CollectionPartial, CollectionTreeComponent } from './collection-tree.component';

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree.component.ts → packages/admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree.component.ts

@@ -9,7 +9,7 @@ import {
     SimpleChanges,
 } from '@angular/core';
 
-import { Collection } from '../../../common/generated-types';
+import { Collection } from '@vendure/admin-ui/core';
 
 import { arrayToTree, HasParent, RootNode } from './array-to-tree';
 

packages/admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.ts → packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.ts

@@ -2,27 +2,26 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { combineLatest, EMPTY, forkJoin, Observable } from 'rxjs';
-import { map, mergeMap, switchMap, take } from 'rxjs/operators';
-import { normalizeString } from 'shared/normalize-string';
-import { notNullOrUndefined } from 'shared/shared-utils';
-
-import { BaseDetailComponent } from '../../../common/base-detail.component';
 import {
+    BaseDetailComponent,
     CreateFacetInput,
     CreateFacetValueInput,
+    createUpdatedTranslatable,
     CustomFieldConfig,
+    DataService,
     DeletionResult,
     FacetWithValues,
     LanguageCode,
+    ModalService,
+    NotificationService,
+    ServerConfigService,
     UpdateFacetInput,
     UpdateFacetValueInput,
-} from '../../../common/generated-types';
-import { createUpdatedTranslatable } from '../../../common/utilities/create-updated-translatable';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { ServerConfigService } from '../../../data/server-config';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
+} from '@vendure/admin-ui/core';
+import { normalizeString } from '@vendure/common/lib/normalize-string';
+import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+import { combineLatest, EMPTY, forkJoin, Observable } from 'rxjs';
+import { map, mergeMap, switchMap, take } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-facet-detail',

packages/admin-ui/src/app/catalog/components/facet-list/facet-list.component.ts → packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.ts

@@ -4,11 +4,11 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { EMPTY } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 
-import { BaseListComponent } from '../../../common/base-list.component';
-import { DeletionResult, GetFacetList } from '../../../common/generated-types';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
+import { BaseListComponent } from '@vendure/admin-ui/core';
+import { DeletionResult, GetFacetList } from '@vendure/admin-ui/core';
+import { NotificationService } from '@vendure/admin-ui/core';
+import { DataService } from '@vendure/admin-ui/core';
+import { ModalService } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-facet-list',

packages/admin-ui/src/app/catalog/components/generate-product-variants/generate-product-variants.component.ts → packages/admin-ui/src/lib/catalog/src/components/generate-product-variants/generate-product-variants.component.ts

@@ -1,8 +1,8 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { generateAllCombinations } from 'shared/shared-utils';
+import { generateAllCombinations } from '@vendure/common/lib/shared-utils';
 
-import { CurrencyCode } from '../../../common/generated-types';
-import { DataService } from '../../../data/providers/data.service';
+import { CurrencyCode } from '@vendure/admin-ui/core';
+import { DataService } from '@vendure/admin-ui/core';
 import { OptionValueInputComponent } from '../option-value-input/option-value-input.component';
 
 const DEFAULT_VARIANT_CODE = '__DEFAULT_VARIANT__';

packages/admin-ui/src/app/catalog/components/option-value-input/option-value-input.component.ts → packages/admin-ui/src/lib/catalog/src/components/option-value-input/option-value-input.component.ts

@@ -9,7 +9,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { unique } from 'shared/unique';
+import { unique } from '@vendure/common/lib/unique';
 
 export const OPTION_VALUE_INPUT_VALUE_ACCESSOR: Provider = {
     provide: NG_VALUE_ACCESSOR,

packages/admin-ui/src/app/catalog/components/product-assets/product-assets.component.html → packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.html

@@ -50,14 +50,14 @@
             #dl
             [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
-            (cdkDropListDropped)="dropListDropped($event)"
+            (cdkDropListDropped)="dropListDropped()"
         ></div>
         <div
             *ngFor="let asset of assets"
             cdkDropList
             [cdkDropListDisabled]="!('UpdateCatalog' | hasPermission)"
             [cdkDropListEnterPredicate]="dropListEnterPredicate"
-            (cdkDropListDropped)="dropListDropped($event)"
+            (cdkDropListDropped)="dropListDropped()"
         >
             <vdr-dropdown cdkDrag (cdkDragMoved)="dragMoved($event)">
                 <div

packages/admin-ui/src/app/catalog/components/product-assets/product-assets.component.ts → packages/admin-ui/src/lib/catalog/src/components/product-assets/product-assets.component.ts

@@ -11,12 +11,8 @@ import {
     Output,
     ViewChild,
 } from '@angular/core';
-import { unique } from 'shared/unique';
-
-import { Asset } from '../../../common/generated-types';
-import { AssetPickerDialogComponent } from '../../../shared/components/asset-picker-dialog/asset-picker-dialog.component';
-import { AssetPreviewDialogComponent } from '../../../shared/components/asset-preview-dialog/asset-preview-dialog.component';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
+import { Asset, AssetPickerDialogComponent, AssetPreviewDialogComponent, ModalService } from '@vendure/admin-ui/core';
+import { unique } from '@vendure/common/lib/unique';
 
 export interface AssetChange {
     assetIds: string[];
@@ -199,7 +195,7 @@ export class ProductAssetsComponent implements AfterViewInit {
             drag.element.nativeElement.offsetTop,
         );
         return false;
-    };
+    }
 
     /** Determines the point of the page that was touched by the user. */
     getPointerPositionOnPage(event: MouseEvent | TouchEvent) {

packages/admin-ui/src/app/catalog/components/product-detail/product-detail.component.ts → packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts

@@ -3,27 +3,14 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { combineLatest, EMPTY, merge, Observable } from 'rxjs';
-import {
-    distinctUntilChanged,
-    map,
-    mergeMap,
-    switchMap,
-    take,
-    takeUntil,
-    withLatestFrom,
-} from 'rxjs/operators';
-import { normalizeString } from 'shared/normalize-string';
-import { DEFAULT_CHANNEL_CODE } from 'shared/shared-constants';
-import { notNullOrUndefined } from 'shared/shared-utils';
-import { unique } from 'shared/unique';
-import { IGNORE_CAN_DEACTIVATE_GUARD } from 'src/app/shared/providers/routing/can-deactivate-detail-guard';
-
-import { BaseDetailComponent } from '../../../common/base-detail.component';
 import {
+    BaseDetailComponent,
     CreateProductInput,
+    createUpdatedTranslatable,
     CustomFieldConfig,
     FacetWithValues,
+    flattenFacetValues,
+    IGNORE_CAN_DEACTIVATE_GUARD,
     LanguageCode,
     ProductWithVariants,
     TaxCategory,
@@ -32,13 +19,15 @@ import {
     UpdateProductOptionInput,
     UpdateProductVariantInput,
     UpdateProductVariantsMutation,
-} from '../../../common/generated-types';
-import { createUpdatedTranslatable } from '../../../common/utilities/create-updated-translatable';
-import { flattenFacetValues } from '../../../common/utilities/flatten-facet-values';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { ServerConfigService } from '../../../data/server-config';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
+} from '@vendure/admin-ui/core';
+import { DataService, ModalService, NotificationService, ServerConfigService } from '@vendure/admin-ui/core';
+import { normalizeString } from '@vendure/common/lib/normalize-string';
+import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
+import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+import { unique } from '@vendure/common/lib/unique';
+import { combineLatest, EMPTY, merge, Observable } from 'rxjs';
+import { distinctUntilChanged, map, mergeMap, switchMap, take, takeUntil, withLatestFrom } from 'rxjs/operators';
+
 import { ProductDetailService } from '../../providers/product-detail.service';
 import { ApplyFacetDialogComponent } from '../apply-facet-dialog/apply-facet-dialog.component';
 import { AssignProductsToChannelDialogComponent } from '../assign-products-to-channel-dialog/assign-products-to-channel-dialog.component';

packages/admin-ui/src/app/catalog/components/product-list/product-list.component.ts → packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.ts

@@ -1,15 +1,15 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { JobState, SearchInput, SearchProducts } from '@vendure/admin-ui/core';
+import { BaseListComponent } from '@vendure/admin-ui/core';
+import { JobQueueService } from '@vendure/admin-ui/core';
+import { NotificationService } from '@vendure/admin-ui/core';
+import { DataService } from '@vendure/admin-ui/core';
+import { ModalService } from '@vendure/admin-ui/core';
 import { EMPTY, Observable, of } from 'rxjs';
 import { delay, map, switchMap, take, takeUntil, withLatestFrom } from 'rxjs/operators';
 
-import { BaseListComponent } from '../../../common/base-list.component';
-import { JobState, SearchInput, SearchProducts } from '../../../common/generated-types';
-import { JobQueueService } from '../../../core/providers/job-queue/job-queue.service';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
 import { ProductSearchInputComponent } from '../product-search-input/product-search-input.component';
 
 @Component({

packages/admin-ui/src/app/catalog/components/product-search-input/product-search-input.component.html → packages/admin-ui/src/lib/catalog/src/components/product-search-input/product-search-input.component.html

@@ -12,11 +12,11 @@
     <ng-template ng-header-tmp>
         <div
             class="search-header"
-            *ngIf="selectComponent.filterValue"
+            *ngIf="selectComponent.searchTerm"
             [class.selected]="isSearchHeaderSelected()"
             (click)="selectComponent.selectTag()"
         >
-            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.filterValue }}
+            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}
         </div>
     </ng-template>
     <ng-template ng-label-tmp let-item="item" let-clear="clear">

packages/admin-ui/src/app/catalog/components/product-search-input/product-search-input.component.ts → packages/admin-ui/src/lib/catalog/src/components/product-search-input/product-search-input.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { NgSelectComponent, SELECTION_MODEL_FACTORY } from '@ng-select/ng-select';
-import { notNullOrUndefined } from 'shared/shared-utils';
+import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 
-import { SearchProducts } from '../../../common/generated-types';
+import { SearchProducts } from '@vendure/admin-ui/core';
 
 import { ProductSearchSelectionModelFactory } from './product-search-selection-model';
 

packages/admin-ui/src/app/catalog/components/product-variants-editor/product-variants-editor.component.ts → packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.ts

@@ -1,12 +1,10 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { EMPTY, forkJoin, Observable, of } from 'rxjs';
-import { filter, map, mergeMap, switchMap, take } from 'rxjs/operators';
-import { normalizeString } from 'shared/normalize-string';
-import { generateAllCombinations, notNullOrUndefined } from 'shared/shared-utils';
-
-import { DeactivateAware } from '../../../common/deactivate-aware';
+import { DeactivateAware } from '@vendure/admin-ui/core';
+import { NotificationService } from '@vendure/admin-ui/core';
+import { ModalService } from '@vendure/admin-ui/core';
+import { getDefaultLanguage } from '@vendure/admin-ui/core';
 import {
     CreateProductOptionGroup,
     CreateProductOptionInput,
@@ -14,11 +12,13 @@ import {
     GetProductVariantOptions,
     LanguageCode,
     ProductOptionGroupFragment,
-} from '../../../common/generated-types';
-import { getDefaultLanguage } from '../../../common/utilities/get-default-language';
-import { NotificationService } from '../../../core/providers/notification/notification.service';
-import { DataService } from '../../../data/providers/data.service';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
+} from '@vendure/admin-ui/core';
+import { DataService } from '@vendure/admin-ui/core';
+import { normalizeString } from '@vendure/common/lib/normalize-string';
+import { generateAllCombinations, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+import { EMPTY, forkJoin, Observable, of } from 'rxjs';
+import { filter, map, mergeMap, switchMap, take } from 'rxjs/operators';
+
 import { ProductDetailService } from '../../providers/product-detail.service';
 
 export interface VariantInfo {
@@ -60,7 +60,7 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     }>;
     variantFormValues: { [id: string]: VariantInfo } = {};
     product: GetProductVariantOptions.Product;
-    private currencyCode: CurrencyCode;
+    currencyCode: CurrencyCode;
     private languageCode: LanguageCode;
 
     constructor(

packages/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html → packages/admin-ui/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.html

@@ -2,7 +2,7 @@
     <div
         class="variant-container card"
         *ngFor="let variant of variants; let i = index"
-        [class.disabled]="!formArray.get([i, 'enabled']).value"
+        [class.disabled]="!formArray.get([i, 'enabled'])!.value"
     >
         <ng-container [formGroup]="formArray.at(i)">
             <div class="card-block header-row">

packages/admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.ts → packages/admin-ui/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.ts

@@ -11,8 +11,8 @@ import {
     SimpleChanges,
 } from '@angular/core';
 import { FormArray } from '@angular/forms';
+import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { Subscription } from 'rxjs';
-import { notNullOrUndefined } from 'shared/shared-utils';
 
 import {
     CustomFieldConfig,
@@ -22,9 +22,9 @@ import {
     ProductWithVariants,
     TaxCategory,
     UpdateProductOptionInput,
-} from '../../../common/generated-types';
-import { flattenFacetValues } from '../../../common/utilities/flatten-facet-values';
-import { ModalService } from '../../../shared/providers/modal/modal.service';
+} from '@vendure/admin-ui/core';
+import { flattenFacetValues } from '@vendure/admin-ui/core';
+import { ModalService } from '@vendure/admin-ui/core';
 import { AssetChange } from '../product-assets/product-assets.component';
 import { VariantFormValue } from '../product-detail/product-detail.component';
 import { UpdateProductOptionDialogComponent } from '../update-product-option-dialog/update-product-option-dialog.component';

packages/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.html → packages/admin-ui/src/lib/catalog/src/components/product-variants-table/product-variants-table.component.html

@@ -10,7 +10,7 @@
     <vdr-dt-column>{{ 'common.enabled' | translate }}</vdr-dt-column>
     <ng-template let-variant="item" let-i="index">
         <ng-container [formGroup]="formArray.at(i)">
-            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <div class="card-img">
                     <div class="featured-asset">
                         <img
@@ -23,7 +23,7 @@
                     </div>
                 </div>
             </td>
-            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-input-container>
                     <input
                         clrInput
@@ -34,7 +34,7 @@
                     />
                 </clr-input-container>
             </td>
-            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-input-container>
                     <input
                         clrInput
@@ -48,13 +48,13 @@
             <ng-container *ngFor="let option of variant.options | sort: 'groupId'">
                 <td
                     class="left align-middle"
-                    [class.disabled]="!formArray.get([i, 'enabled']).value"
+                    [class.disabled]="!formArray.get([i, 'enabled'])!.value"
                     [style.color]="optionGroupName(option.groupId) | stringToColor"
                 >
                     {{ option.name }}
                 </td>
             </ng-container>
-            <td class="left align-middle price" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle price" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-input-container>
                     <vdr-currency-input
                         clrInput
@@ -64,7 +64,7 @@
                     ></vdr-currency-input>
                 </clr-input-container>
             </td>
-            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-input-container>
                     <input
                         clrInput
@@ -76,7 +76,7 @@
                     />
                 </clr-input-container>
             </td>
-            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled']).value">
+            <td class="left align-middle stock" [class.disabled]="!formArray.get([i, 'enabled'])!.value">
                 <clr-toggle-wrapper>
                     <input
                         type="checkbox"

packages/admin-ui/src/app/catalog/components/product-variants-table/product-variants-table.component.ts → packages/admin-ui/src/lib/catalog/src/components/product-variants-table/product-variants-table.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { FormArray } from '@angular/forms';
 
-import { ProductWithVariants } from '../../../common/generated-types';
+import { ProductWithVariants } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-product-variants-table',

packages/admin-ui/src/app/catalog/components/update-product-option-dialog/update-product-option-dialog.component.ts → packages/admin-ui/src/lib/catalog/src/components/update-product-option-dialog/update-product-option-dialog.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { normalizeString } from 'shared/normalize-string';
-
-import { ProductVariant, UpdateProductOptionInput } from '../../../common/generated-types';
-import { createUpdatedTranslatable } from '../../../common/utilities/create-updated-translatable';
-import { Dialog } from '../../../shared/providers/modal/modal.service';
+import { ProductVariant, UpdateProductOptionInput } from '@vendure/admin-ui/core';
+import { createUpdatedTranslatable } from '@vendure/admin-ui/core';
+import { Dialog } from '@vendure/admin-ui/core';
+import { normalizeString } from '@vendure/common/lib/normalize-string';
 
 @Component({
     selector: 'vdr-update-product-option-dialog',

packages/admin-ui/src/app/catalog/components/variant-price-detail/variant-price-detail.component.ts → packages/admin-ui/src/lib/catalog/src/components/variant-price-detail/variant-price-detail.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleCha
 import { BehaviorSubject, combineLatest, Observable, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { DataService } from '../../../data/providers/data.service';
+import { DataService } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-variant-price-detail',