fix(admin-ui): Get entity default language from active Channel

Relates to #296. Previously it relied on the default _display_ language, which is a related but different concern.

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

@@ -19,10 +19,10 @@ export class AssetDetailComponent extends BaseDetailComponent<Asset.Fragment> im
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private notificationService: NotificationService,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
     }
 
     ngOnInit() {
@@ -53,7 +53,7 @@ export class AssetDetailComponent extends BaseDetailComponent<Asset.Fragment> im
                 () => {
                     this.notificationService.success(_('common.notify-update-success'), { entity: 'Asset' });
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Asset',
                     });

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

@@ -1,4 +1,11 @@
-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';
@@ -47,12 +54,12 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
         private modalService: ModalService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.customFields = this.getCustomFieldConfig('Collection');
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
@@ -69,15 +76,15 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
         this.init();
         this.facets$ = this.dataService.facet
             .getFacets(9999999, 0)
-            .mapSingle(data => data.facets.items)
+            .mapSingle((data) => data.facets.items)
             .pipe(shareReplay(1));
 
-        this.dataService.collection.getCollectionFilters().single$.subscribe(res => {
+        this.dataService.collection.getCollectionFilters().single$.subscribe((res) => {
             this.allFilters = res.collectionFilters;
         });
         this.activeChannel$ = this.dataService.settings
             .getActiveChannel()
-            .mapStream(data => data.activeChannel);
+            .mapStream((data) => data.activeChannel);
     }
 
     ngOnDestroy() {
@@ -85,7 +92,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
     }
 
     getFilterDefinition(filter: ConfigurableOperation): ConfigurableOperationDefinition | undefined {
-        return this.allFilters.find(f => f.code === filter.code);
+        return this.allFilters.find((f) => f.code === filter.code);
     }
 
     customFieldIsSet(name: string): boolean {
@@ -98,7 +105,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
 
     addFilter(collectionFilter: ConfigurableOperation) {
         const filtersArray = this.detailForm.get('filters') as FormArray;
-        const index = filtersArray.value.findIndex(o => o.code === collectionFilter.code);
+        const index = filtersArray.value.findIndex((o) => o.code === collectionFilter.code);
         if (index === -1) {
             const argsHash = collectionFilter.args.reduce(
                 (output, arg) => ({
@@ -119,7 +126,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
 
     removeFilter(collectionFilter: ConfigurableOperation) {
         const filtersArray = this.detailForm.get('filters') as FormArray;
-        const index = filtersArray.value.findIndex(o => o.code === collectionFilter.code);
+        const index = filtersArray.value.findIndex((o) => o.code === collectionFilter.code);
         if (index !== -1) {
             filtersArray.removeAt(index);
             this.filters.splice(index, 1);
@@ -147,7 +154,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-create-success'), {
                         entity: 'Collection',
                     });
@@ -156,7 +163,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
                     this.changeDetector.markForCheck();
                     this.router.navigate(['../', data.createCollection.id], { relativeTo: this.route });
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-create-error'), {
                         entity: 'Collection',
                     });
@@ -187,7 +194,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
                     });
                     this.contentsComponent.refresh();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Collection',
                     });
@@ -203,7 +210,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
      * Sets the values of the form on changes to the category or current language.
      */
     protected setFormValues(entity: Collection.Fragment, languageCode: LanguageCode) {
-        const currentTranslation = entity.translations.find(t => t.languageCode === languageCode);
+        const currentTranslation = entity.translations.find((t) => t.languageCode === languageCode);
 
         this.detailForm.patchValue({
             name: currentTranslation ? currentTranslation.name : '',
@@ -211,7 +218,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
             visible: !entity.isPrivate,
         });
 
-        entity.filters.forEach(f => this.addFilter(f));
+        entity.filters.forEach((f) => this.addFilter(f));
 
         if (this.customFields.length) {
             const customFieldsGroup = this.detailForm.get(['customFields']) as FormGroup;

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

@@ -41,12 +41,12 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
         private modalService: ModalService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.customFields = this.getCustomFieldConfig('Facet');
         this.customValueFields = this.getCustomFieldConfig('FacetValue');
         this.detailForm = this.formBuilder.group({
@@ -132,13 +132,13 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-create-success'), { entity: 'Facet' });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                     this.router.navigate(['../', data.createFacet.id], { relativeTo: this.route });
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-create-error'), {
                         entity: 'Facet',
                     });
@@ -167,8 +167,8 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                     const valuesArray = this.detailForm.get('values');
                     if (valuesArray && valuesArray.dirty) {
                         const newValues: CreateFacetValueInput[] = (valuesArray as FormArray).controls
-                            .filter(c => !c.value.id)
-                            .map(c => ({
+                            .filter((c) => !c.value.id)
+                            .map((c) => ({
                                 facetId: facet.id,
                                 code: c.value.code,
                                 translations: [{ name: c.value.name, languageCode }],
@@ -199,7 +199,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                     this.changeDetector.markForCheck();
                     this.notificationService.success(_('common.notify-update-success'), { entity: 'Facet' });
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Facet',
                     });
@@ -219,16 +219,16 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
         }
         this.showModalAndDelete(facetValueId)
             .pipe(
-                switchMap(response => {
+                switchMap((response) => {
                     if (response.result === DeletionResult.DELETED) {
                         return [true];
                     } else {
                         return this.showModalAndDelete(facetValueId, response.message || '').pipe(
-                            map(r => r.result === DeletionResult.DELETED),
+                            map((r) => r.result === DeletionResult.DELETED),
                         );
                     }
                 }),
-                switchMap(deleted => (deleted ? this.dataService.facet.getFacet(this.id).single$ : [])),
+                switchMap((deleted) => (deleted ? this.dataService.facet.getFacet(this.id).single$ : [])),
             )
             .subscribe(
                 () => {
@@ -236,7 +236,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                         entity: 'FacetValue',
                     });
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-delete-error'), {
                         entity: 'FacetValue',
                     });
@@ -255,10 +255,10 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                 ],
             })
             .pipe(
-                switchMap(result =>
+                switchMap((result) =>
                     result ? this.dataService.facet.deleteFacetValues([facetValueId], !!message) : EMPTY,
                 ),
-                map(result => result.deleteFacetValues[0]),
+                map((result) => result.deleteFacetValues[0]),
             );
     }
 
@@ -266,7 +266,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
      * Sets the values of the form on changes to the facet or current language.
      */
     protected setFormValues(facet: FacetWithValues.Fragment, languageCode: LanguageCode) {
-        const currentTranslation = facet.translations.find(t => t.languageCode === languageCode);
+        const currentTranslation = facet.translations.find((t) => t.languageCode === languageCode);
 
         this.detailForm.patchValue({
             facet: {
@@ -297,7 +297,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
         this.values = facet.values;
         facet.values.forEach((value, i) => {
             const valueTranslation =
-                value.translations && value.translations.find(t => t.languageCode === languageCode);
+                value.translations && value.translations.find((t) => t.languageCode === languageCode);
             const group = {
                 id: value.id,
                 code: value.code,
@@ -370,8 +370,8 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
             return formRow && formRow.dirty && formRow.value.id;
         });
         const dirtyValueValues = valuesFormArray.controls
-            .filter(c => c.dirty && c.value.id)
-            .map(c => c.value);
+            .filter((c) => c.dirty && c.value.id)
+            .map((c) => c.value);
 
         if (dirtyValues.length !== dirtyValueValues.length) {
             throw new Error(_(`error.facet-value-form-values-do-not-match`));

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

@@ -26,7 +26,15 @@ 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 {
+    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';
@@ -86,11 +94,11 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
         private formBuilder: FormBuilder,
         private modalService: ModalService,
         private notificationService: NotificationService,
-        private dataService: DataService,
+        protected dataService: DataService,
         private location: Location,
         private changeDetector: ChangeDetectorRef,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.customFields = this.getCustomFieldConfig('Product');
         this.customVariantFields = this.getCustomFieldConfig('ProductVariant');
         this.detailForm = this.formBuilder.group({
@@ -111,21 +119,21 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
     ngOnInit() {
         this.init();
         this.product$ = this.entity$;
-        this.variants$ = this.product$.pipe(map(product => product.variants));
+        this.variants$ = this.product$.pipe(map((product) => product.variants));
         this.taxCategories$ = this.productDetailService.getTaxCategories().pipe(takeUntil(this.destroy$));
-        this.activeTab$ = this.route.paramMap.pipe(map(qpm => qpm.get('tab') as any));
+        this.activeTab$ = this.route.paramMap.pipe(map((qpm) => qpm.get('tab') as any));
 
         // FacetValues are provided initially by the nested array of the
         // Product entity, but once a fetch to get all Facets is made (as when
         // opening the FacetValue selector modal), then these additional values
         // are concatenated onto the initial array.
         this.facets$ = this.productDetailService.getFacets();
-        const productFacetValues$ = this.product$.pipe(map(product => product.facetValues));
+        const productFacetValues$ = this.product$.pipe(map((product) => product.facetValues));
         const allFacetValues$ = this.facets$.pipe(map(flattenFacetValues));
         const productGroup = this.getProductFormGroup();
 
         const formFacetValueIdChanges$ = productGroup.valueChanges.pipe(
-            map(val => val.facetValueIds as string[]),
+            map((val) => val.facetValueIds as string[]),
             distinctUntilChanged(),
         );
         const formChangeFacetValues$ = combineLatest(
@@ -135,12 +143,12 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
         ).pipe(
             map(([ids, productFacetValues, allFacetValues]) => {
                 const combined = [...productFacetValues, ...allFacetValues];
-                return ids.map(id => combined.find(fv => fv.id === id)).filter(notNullOrUndefined);
+                return ids.map((id) => combined.find((fv) => fv.id === id)).filter(notNullOrUndefined);
             }),
         );
 
         this.facetValues$ = merge(productFacetValues$, formChangeFacetValues$);
-        this.productChannels$ = this.product$.pipe(map(p => p.channels));
+        this.productChannels$ = this.product$.pipe(map((p) => p.channels));
     }
 
     ngOnDestroy() {
@@ -181,7 +189,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                 ],
             })
             .pipe(
-                switchMap(response =>
+                switchMap((response) =>
                     response
                         ? this.dataService.product.removeProductsFromChannel({
                               channelId,
@@ -194,7 +202,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                 () => {
                     this.notificationService.success(_('catalog.notify-remove-product-from-channel-success'));
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('catalog.notify-remove-product-from-channel-error'));
                 },
             );
@@ -220,7 +228,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
      * If creating a new product, automatically generate the slug based on the product name.
      */
     updateSlug(nameValue: string) {
-        this.isNew$.pipe(take(1)).subscribe(isNew => {
+        this.isNew$.pipe(take(1)).subscribe((isNew) => {
             if (isNew) {
                 const slugControl = this.detailForm.get(['product', 'slug']);
                 if (slugControl && slugControl.pristine) {
@@ -231,7 +239,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
     }
 
     selectProductFacetValue() {
-        this.displayFacetValueModal().subscribe(facetValueIds => {
+        this.displayFacetValueModal().subscribe((facetValueIds) => {
             if (facetValueIds) {
                 const productGroup = this.getProductFormGroup();
                 const currentFacetValueIds = productGroup.value.facetValueIds;
@@ -250,7 +258,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                     entity: 'ProductOption',
                 });
             },
-            err => {
+            (err) => {
                 this.notificationService.error(_('common.notify-update-error'), {
                     entity: 'ProductOption',
                 });
@@ -262,7 +270,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
         const productGroup = this.getProductFormGroup();
         const currentFacetValueIds = productGroup.value.facetValueIds;
         productGroup.patchValue({
-            facetValueIds: currentFacetValueIds.filter(id => id !== facetValueId),
+            facetValueIds: currentFacetValueIds.filter((id) => id !== facetValueId),
         });
         productGroup.markAsDirty();
     }
@@ -276,9 +284,9 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
             .subscribe(([facetValueIds, variants]) => {
                 if (facetValueIds) {
                     for (const variantId of selectedVariantIds) {
-                        const index = variants.findIndex(v => v.id === variantId);
+                        const index = variants.findIndex((v) => v.id === variantId);
                         const variant = variants[index];
-                        const existingFacetValueIds = variant ? variant.facetValues.map(fv => fv.id) : [];
+                        const existingFacetValueIds = variant ? variant.facetValues.map((fv) => fv.id) : [];
                         const variantFormGroup = this.detailForm.get(['variants', index]);
                         if (variantFormGroup) {
                             variantFormGroup.patchValue({
@@ -295,7 +303,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
     variantsToCreateAreValid(): boolean {
         return (
             0 < this.createVariantsConfig.variants.length &&
-            this.createVariantsConfig.variants.every(v => {
+            this.createVariantsConfig.variants.every((v) => {
                 return v.sku !== '';
             })
         );
@@ -303,13 +311,13 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
 
     private displayFacetValueModal(): Observable<string[] | undefined> {
         return this.productDetailService.getFacets().pipe(
-            mergeMap(facets =>
+            mergeMap((facets) =>
                 this.modalService.fromComponent(ApplyFacetDialogComponent, {
                     size: 'md',
                     locals: { facets },
                 }),
             ),
-            map(facetValues => facetValues && facetValues.map(v => v.id)),
+            map((facetValues) => facetValues && facetValues.map((v) => v.id)),
         );
     }
 
@@ -344,7 +352,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                     this.detailForm.markAsPristine();
                     this.router.navigate(['../', productId], { relativeTo: this.route });
                 },
-                err => {
+                (err) => {
                     // tslint:disable-next-line:no-console
                     console.error(err);
                     this.notificationService.error(_('common.notify-create-error'), {
@@ -383,7 +391,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                 }),
             )
             .subscribe(
-                result => {
+                (result) => {
                     this.updateSlugAfterSave(result);
                     this.detailForm.markAsPristine();
                     this.assetChanges = {};
@@ -393,7 +401,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
                     });
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Product',
                     });
@@ -409,14 +417,14 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
      * Sets the values of the form on changes to the product or current language.
      */
     protected setFormValues(product: ProductWithVariants.Fragment, languageCode: LanguageCode) {
-        const currentTranslation = product.translations.find(t => t.languageCode === languageCode);
+        const currentTranslation = product.translations.find((t) => t.languageCode === languageCode);
         this.detailForm.patchValue({
             product: {
                 enabled: product.enabled,
                 name: currentTranslation ? currentTranslation.name : '',
                 slug: currentTranslation ? currentTranslation.slug : '',
                 description: currentTranslation ? currentTranslation.description : '',
-                facetValueIds: product.facetValues.map(fv => fv.id),
+                facetValueIds: product.facetValues.map((fv) => fv.id),
             },
         });
 
@@ -438,8 +446,8 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
 
         const variantsFormArray = this.detailForm.get('variants') as FormArray;
         product.variants.forEach((variant, i) => {
-            const variantTranslation = variant.translations.find(t => t.languageCode === languageCode);
-            const facetValueIds = variant.facetValues.map(fv => fv.id);
+            const variantTranslation = variant.translations.find((t) => t.languageCode === languageCode);
+            const facetValueIds = variant.facetValues.map((fv) => fv.id);
             const group: VariantFormValue = {
                 enabled: variant.enabled,
                 sku: variant.sku,
@@ -529,7 +537,7 @@ export class ProductDetailComponent extends BaseDetailComponent<ProductWithVaria
             const formRow = variantsFormArray.get(i.toString());
             return formRow && formRow.dirty;
         });
-        const dirtyVariantValues = variantsFormArray.controls.filter(c => c.dirty).map(c => c.value);
+        const dirtyVariantValues = variantsFormArray.controls.filter((c) => c.dirty).map((c) => c.value);
 
         if (dirtyVariants.length !== dirtyVariantValues.length) {
             throw new Error(_(`error.product-variant-form-values-do-not-match`));

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

@@ -4,7 +4,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 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 { getDefaultUiLanguage } from '@vendure/admin-ui/core';
 import {
     CreateProductOptionGroup,
     CreateProductOptionInput,
@@ -74,8 +74,8 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     ngOnInit() {
         this.initOptionsAndVariants();
         this.languageCode =
-            (this.route.snapshot.paramMap.get('lang') as LanguageCode) || getDefaultLanguage();
-        this.dataService.settings.getActiveChannel().single$.subscribe(data => {
+            (this.route.snapshot.paramMap.get('lang') as LanguageCode) || getDefaultUiLanguage();
+        this.dataService.settings.getActiveChannel().single$.subscribe((data) => {
             this.currencyCode = data.activeChannel.currencyCode;
         });
     }
@@ -90,13 +90,13 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     }
 
     getVariantsToAdd() {
-        return Object.values(this.variantFormValues).filter(v => !v.existing && v.enabled);
+        return Object.values(this.variantFormValues).filter((v) => !v.existing && v.enabled);
     }
 
     getVariantName(variant: GeneratedVariant) {
         return variant.options.length === 0
             ? _('catalog.default-variant')
-            : variant.options.map(o => o.name).join(' ');
+            : variant.options.map((o) => o.name).join(' ');
     }
 
     addOption() {
@@ -108,23 +108,23 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     }
 
     generateVariants() {
-        const groups = this.optionGroups.map(g => g.values);
+        const groups = this.optionGroups.map((g) => g.values);
         const previousVariants = this.variants;
         this.variants = groups.length
             ? generateAllCombinations(groups).map((options, i) => ({
                   isDefault: this.product.variants.length === 1 && i === 0,
-                  id: options.map(o => o.name).join('|'),
+                  id: options.map((o) => o.name).join('|'),
                   options,
               }))
             : [{ isDefault: true, id: DEFAULT_VARIANT_CODE, options: [] }];
 
-        this.variants.forEach(variant => {
+        this.variants.forEach((variant) => {
             if (!this.variantFormValues[variant.id]) {
                 const prototype = this.getVariantPrototype(variant, previousVariants);
                 this.variantFormValues[variant.id] = {
                     enabled: false,
                     existing: false,
-                    options: variant.options.map(o => o.name),
+                    options: variant.options.map((o) => o.name),
                     price: prototype.price,
                     sku: prototype.sku,
                     stock: prototype.stock,
@@ -144,11 +144,11 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
         if (variant.isDefault) {
             return this.variantFormValues[DEFAULT_VARIANT_CODE];
         }
-        const variantsWithSimilarOptions = previousVariants.filter(v =>
-            variant.options.map(o => o.name).filter(name => v.options.map(o => o.name).includes(name)),
+        const variantsWithSimilarOptions = previousVariants.filter((v) =>
+            variant.options.map((o) => o.name).filter((name) => v.options.map((o) => o.name).includes(name)),
         );
         if (variantsWithSimilarOptions.length) {
-            return this.variantFormValues[variantsWithSimilarOptions[0].options.map(o => o.name).join('|')];
+            return this.variantFormValues[variantsWithSimilarOptions[0].options.map((o) => o.name).join('|')];
         }
         return {
             sku: '',
@@ -167,7 +167,7 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
                 ],
             })
             .pipe(
-                switchMap(response =>
+                switchMap((response) =>
                     response ? this.productDetailService.deleteProductVariant(id, this.product.id) : EMPTY,
                 ),
                 switchMap(() => this.reFetchProduct(null)),
@@ -179,7 +179,7 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
                     });
                     this.initOptionsAndVariants();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-delete-error'), {
                         entity: 'ProductVariant',
                     });
@@ -189,8 +189,8 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
 
     save() {
         const newOptionGroups = this.optionGroups
-            .filter(og => og.isNew)
-            .map(og => ({
+            .filter((og) => og.isNew)
+            .map((og) => ({
                 name: og.name,
                 values: [],
             }));
@@ -200,15 +200,15 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
                 mergeMap(() =>
                     this.productDetailService.createProductOptionGroups(newOptionGroups, this.languageCode),
                 ),
-                mergeMap(createdOptionGroups => this.addOptionGroupsToProduct(createdOptionGroups)),
-                mergeMap(createdOptionGroups => this.addNewOptionsToGroups(createdOptionGroups)),
-                mergeMap(groupsIds => this.fetchOptionGroups(groupsIds)),
-                mergeMap(groups => this.createNewProductVariants(groups)),
-                mergeMap(res => this.deleteDefaultVariant(res.createProductVariants)),
-                mergeMap(variants => this.reFetchProduct(variants)),
+                mergeMap((createdOptionGroups) => this.addOptionGroupsToProduct(createdOptionGroups)),
+                mergeMap((createdOptionGroups) => this.addNewOptionsToGroups(createdOptionGroups)),
+                mergeMap((groupsIds) => this.fetchOptionGroups(groupsIds)),
+                mergeMap((groups) => this.createNewProductVariants(groups)),
+                mergeMap((res) => this.deleteDefaultVariant(res.createProductVariants)),
+                mergeMap((variants) => this.reFetchProduct(variants)),
             )
             .subscribe({
-                next: variants => {
+                next: (variants) => {
                     this.formValueChanged = false;
                     this.notificationService.success(_('catalog.created-new-variants-success'), {
                         count: variants.length,
@@ -230,7 +230,7 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
                     ],
                 })
                 .pipe(
-                    mergeMap(res => {
+                    mergeMap((res) => {
                         return res === true ? of(true) : EMPTY;
                     }),
                 );
@@ -244,7 +244,7 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     ): Observable<CreateProductOptionGroup.CreateProductOptionGroup[]> {
         if (createdOptionGroups.length) {
             return forkJoin(
-                createdOptionGroups.map(optionGroup => {
+                createdOptionGroups.map((optionGroup) => {
                     return this.dataService.product.addOptionGroupToProduct({
                         productId: this.product.id,
                         optionGroupId: optionGroup.id,
@@ -260,15 +260,15 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
         createdOptionGroups: CreateProductOptionGroup.CreateProductOptionGroup[],
     ): Observable<string[]> {
         const newOptions: CreateProductOptionInput[] = this.optionGroups
-            .map(og => {
-                const createdGroup = createdOptionGroups.find(cog => cog.name === og.name);
+            .map((og) => {
+                const createdGroup = createdOptionGroups.find((cog) => cog.name === og.name);
                 const productOptionGroupId = createdGroup ? createdGroup.id : og.id;
                 if (!productOptionGroupId) {
                     throw new Error('Could not get a productOptionGroupId');
                 }
                 return og.values
-                    .filter(v => !v.locked)
-                    .map(v => ({
+                    .filter((v) => !v.locked)
+                    .map((v) => ({
                         productOptionGroupId,
                         code: normalizeString(v.name, '-'),
                         translations: [{ name: v.name, languageCode: this.languageCode }],
@@ -277,12 +277,12 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
             .reduce((flat, options) => [...flat, ...options], []);
 
         const allGroupIds = [
-            ...createdOptionGroups.map(g => g.id),
-            ...this.optionGroups.map(g => g.id).filter(notNullOrUndefined),
+            ...createdOptionGroups.map((g) => g.id),
+            ...this.optionGroups.map((g) => g.id).filter(notNullOrUndefined),
         ];
 
         if (newOptions.length) {
-            return forkJoin(newOptions.map(input => this.dataService.product.addOptionToGroup(input))).pipe(
+            return forkJoin(newOptions.map((input) => this.dataService.product.addOptionToGroup(input))).pipe(
                 map(() => allGroupIds),
             );
         } else {
@@ -292,10 +292,10 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
 
     private fetchOptionGroups(groupsIds: string[]): Observable<ProductOptionGroupFragment[]> {
         return forkJoin(
-            groupsIds.map(id =>
+            groupsIds.map((id) =>
                 this.dataService.product
                     .getProductOptionGroup(id)
-                    .mapSingle(data => data.productOptionGroup)
+                    .mapSingle((data) => data.productOptionGroup)
                     .pipe(filter(notNullOrUndefined)),
             ),
         );
@@ -304,18 +304,18 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     private createNewProductVariants(groups: ProductOptionGroupFragment[]) {
         const options = groups
             .filter(notNullOrUndefined)
-            .map(og => og.options)
+            .map((og) => og.options)
             .reduce((flat, o) => [...flat, ...o], []);
         const variants = Object.values(this.variantFormValues)
-            .filter(v => v.enabled && !v.existing)
-            .map(v => ({
+            .filter((v) => v.enabled && !v.existing)
+            .map((v) => ({
                 price: v.price,
                 sku: v.sku,
                 stock: v.stock,
                 optionIds: v.options
-                    .map(name => options.find(o => o.name === name))
+                    .map((name) => options.find((o) => o.name === name))
                     .filter(notNullOrUndefined)
-                    .map(o => o.id),
+                    .map((o) => o.id),
             }));
         return this.productDetailService.createProductVariants(
             this.product,
@@ -350,17 +350,17 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
     private initOptionsAndVariants() {
         this.route.data
             .pipe(
-                switchMap(data => data.entity as Observable<GetProductVariantOptions.Product>),
+                switchMap((data) => data.entity as Observable<GetProductVariantOptions.Product>),
                 take(1),
             )
-            .subscribe(product => {
+            .subscribe((product) => {
                 this.product = product;
-                this.optionGroups = product.optionGroups.map(og => {
+                this.optionGroups = product.optionGroups.map((og) => {
                     return {
                         id: og.id,
                         isNew: false,
                         name: og.name,
-                        values: og.options.map(o => ({
+                        values: og.options.map((o) => ({
                             id: o.id,
                             name: o.name,
                             locked: true,
@@ -376,14 +376,14 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
         variants: GetProductVariantOptions.Variants[],
     ): { [id: string]: VariantInfo } {
         return variants.reduce((all, v) => {
-            const id = v.options.length ? v.options.map(o => o.name).join('|') : DEFAULT_VARIANT_CODE;
+            const id = v.options.length ? v.options.map((o) => o.name).join('|') : DEFAULT_VARIANT_CODE;
             return {
                 ...all,
                 [id]: {
                     productVariantId: v.id,
                     enabled: true,
                     existing: true,
-                    options: v.options.map(o => o.name),
+                    options: v.options.map((o) => o.name),
                     sku: v.sku,
                     price: v.price,
                     stock: v.stockOnHand,

packages/admin-ui/src/lib/catalog/src/providers/routing/collection-resolver.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { BaseEntityResolver } from '@vendure/admin-ui/core';
 import { Collection, ProductWithVariants } from '@vendure/admin-ui/core';
-import { getDefaultLanguage } from '@vendure/admin-ui/core';
+import { getDefaultUiLanguage } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 
 @Injectable({
@@ -17,7 +17,7 @@ export class CollectionResolver extends BaseEntityResolver<Collection.Fragment>
                 id: '',
                 createdAt: '',
                 updatedAt: '',
-                languageCode: getDefaultLanguage(),
+                languageCode: getDefaultUiLanguage(),
                 name: '',
                 isPrivate: false,
                 description: '',
@@ -28,7 +28,7 @@ export class CollectionResolver extends BaseEntityResolver<Collection.Fragment>
                 parent: {} as any,
                 children: null,
             },
-            id => dataService.collection.getCollection(id).mapStream(data => data.collection),
+            (id) => dataService.collection.getCollection(id).mapStream((data) => data.collection),
         );
     }
 }

packages/admin-ui/src/lib/catalog/src/providers/routing/facet-resolver.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { BaseEntityResolver } from '@vendure/admin-ui/core';
 import { FacetWithValues } from '@vendure/admin-ui/core';
-import { getDefaultLanguage } from '@vendure/admin-ui/core';
+import { getDefaultUiLanguage } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 
 @Injectable({
@@ -18,13 +18,13 @@ export class FacetResolver extends BaseEntityResolver<FacetWithValues.Fragment>
                 createdAt: '',
                 updatedAt: '',
                 isPrivate: false,
-                languageCode: getDefaultLanguage(),
+                languageCode: getDefaultUiLanguage(),
                 name: '',
                 code: '',
                 translations: [],
                 values: [],
             },
-            id => dataService.facet.getFacet(id).mapStream(data => data.facet),
+            (id) => dataService.facet.getFacet(id).mapStream((data) => data.facet),
         );
     }
 }

packages/admin-ui/src/lib/catalog/src/providers/routing/product-resolver.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { BaseEntityResolver } from '@vendure/admin-ui/core';
 import { ProductWithVariants } from '@vendure/admin-ui/core';
-import { getDefaultLanguage } from '@vendure/admin-ui/core';
+import { getDefaultUiLanguage } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 
 @Injectable({
@@ -18,7 +18,7 @@ export class ProductResolver extends BaseEntityResolver<ProductWithVariants.Frag
                 createdAt: '',
                 updatedAt: '',
                 enabled: true,
-                languageCode: getDefaultLanguage(),
+                languageCode: getDefaultUiLanguage(),
                 name: '',
                 slug: '',
                 featuredAsset: null,
@@ -30,11 +30,11 @@ export class ProductResolver extends BaseEntityResolver<ProductWithVariants.Frag
                 variants: [],
                 channels: [],
             },
-            id =>
+            (id) =>
                 dataService.product
                     .getProduct(id)
                     .refetchOnChannelChange()
-                    .mapStream(data => data.product),
+                    .mapStream((data) => data.product),
         );
     }
 }

packages/admin-ui/src/lib/core/src/common/base-detail.component.ts

@@ -1,13 +1,14 @@
 import { FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { combineLatest, Observable, Subject } from 'rxjs';
+import { combineLatest, Observable, of, Subject } from 'rxjs';
 import { distinctUntilChanged, map, shareReplay, switchMap, takeUntil, tap } from 'rxjs/operators';
 
+import { DataService } from '../data/providers/data.service';
 import { ServerConfigService } from '../data/server-config';
 
 import { DeactivateAware } from './deactivate-aware';
 import { CustomFieldConfig, CustomFields, LanguageCode } from './generated-types';
-import { getDefaultLanguage } from './utilities/get-default-language';
+import { getDefaultUiLanguage } from './utilities/get-default-ui-language';
 
 export abstract class BaseDetailComponent<Entity extends { id: string; updatedAt?: string }>
     implements DeactivateAware {
@@ -23,21 +24,30 @@ export abstract class BaseDetailComponent<Entity extends { id: string; updatedAt
         protected route: ActivatedRoute,
         protected router: Router,
         protected serverConfigService: ServerConfigService,
+        protected dataService: DataService,
     ) {}
 
     init() {
         this.entity$ = this.route.data.pipe(
-            switchMap(data => (data.entity as Observable<Entity>).pipe(takeUntil(this.destroy$))),
-            tap(entity => (this.id = entity.id)),
+            switchMap((data) => (data.entity as Observable<Entity>).pipe(takeUntil(this.destroy$))),
+            tap((entity) => (this.id = entity.id)),
             shareReplay(1),
         );
         this.isNew$ = this.entity$.pipe(
-            map(entity => entity.id === ''),
+            map((entity) => entity.id === ''),
             shareReplay(1),
         );
         this.languageCode$ = this.route.paramMap.pipe(
-            map(paramMap => paramMap.get('lang')),
-            map(lang => (!lang ? getDefaultLanguage() : (lang as LanguageCode))),
+            map((paramMap) => paramMap.get('lang')),
+            switchMap((lang) => {
+                if (lang) {
+                    return of(lang as LanguageCode);
+                } else {
+                    return this.dataService.settings
+                        .getActiveChannel()
+                        .mapSingle((data) => data.activeChannel.defaultLanguageCode);
+                }
+            }),
             distinctUntilChanged(),
             shareReplay(1),
         );

packages/admin-ui/src/lib/core/src/common/utilities/get-default-language.ts → packages/admin-ui/src/lib/core/src/common/utilities/get-default-ui-language.ts

@@ -1,6 +1,6 @@
 import { getAppConfig } from '../../app.config';
 import { LanguageCode } from '../generated-types';
 
-export function getDefaultLanguage(): LanguageCode {
+export function getDefaultUiLanguage(): LanguageCode {
     return getAppConfig().defaultLanguage;
 }

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

@@ -7,7 +7,7 @@ import { TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-transl
 import { MESSAGE_FORMAT_CONFIG, MessageFormatConfig } from 'ngx-translate-messageformat-compiler';
 
 import { getAppConfig } from './app.config';
-import { getDefaultLanguage } from './common/utilities/get-default-language';
+import { getDefaultUiLanguage } from './common/utilities/get-default-ui-language';
 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';
@@ -59,14 +59,14 @@ export class CoreModule {
     }
 
     private initUiLanguages() {
-        const defaultLanguage = getDefaultLanguage();
+        const defaultLanguage = getDefaultUiLanguage();
         const lastLanguage = this.localStorageService.get('uiLanguageCode');
         const availableLanguages = getAppConfig().availableLanguages;
 
         if (!availableLanguages.includes(defaultLanguage)) {
             throw new Error(
                 `The defaultLanguage "${defaultLanguage}" must be one of the availableLanguages [${availableLanguages
-                    .map(l => `"${l}"`)
+                    .map((l) => `"${l}"`)
                     .join(', ')}]`,
             );
         }
@@ -94,8 +94,8 @@ export function HttpLoaderFactory(http: HttpClient, location: PlatformLocation)
  */
 export function getLocales(): MessageFormatConfig {
     const locales = getAppConfig().availableLanguages;
-    const defaultLanguage = getDefaultLanguage();
-    const localesWithoutDefault = locales.filter(l => l !== defaultLanguage);
+    const defaultLanguage = getDefaultUiLanguage();
+    const localesWithoutDefault = locales.filter((l) => l !== defaultLanguage);
     return {
         locales: [defaultLanguage, ...localesWithoutDefault],
     };

packages/admin-ui/src/lib/core/src/data/client-state/client-defaults.ts

@@ -1,9 +1,9 @@
 import { GetNetworkStatus, GetUiState, GetUserStatus } from '../../common/generated-types';
-import { getDefaultLanguage } from '../../common/utilities/get-default-language';
+import { getDefaultUiLanguage } from '../../common/utilities/get-default-ui-language';
 import { LocalStorageService } from '../../providers/local-storage/local-storage.service';
 
 export function getClientDefaults(localStorageService: LocalStorageService) {
-    const currentLanguage = localStorageService.get('uiLanguageCode') || getDefaultLanguage();
+    const currentLanguage = localStorageService.get('uiLanguageCode') || getDefaultUiLanguage();
     return {
         networkStatus: {
             inFlightRequests: 0,

packages/admin-ui/src/lib/core/src/data/providers/facet-data.service.ts

@@ -14,7 +14,6 @@ import {
     UpdateFacetValueInput,
     UpdateFacetValues,
 } from '../../common/generated-types';
-import { getDefaultLanguage } from '../../common/utilities/get-default-language';
 import {
     CREATE_FACET,
     CREATE_FACET_VALUES,

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -14,7 +14,7 @@ export * from './common/language-translation-strings';
 export * from './common/utilities/create-updated-translatable';
 export * from './common/utilities/flatten-facet-values';
 export * from './common/utilities/get-default-config-arg-value';
-export * from './common/utilities/get-default-language';
+export * from './common/utilities/get-default-ui-language';
 export * from './common/utilities/interpolate-description';
 export * from './common/utilities/string-to-color';
 export * from './common/version';

packages/admin-ui/src/lib/customer/src/components/customer-detail/customer-detail.component.ts

@@ -2,10 +2,6 @@ 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 { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
-import { forkJoin, Observable, Subject } from 'rxjs';
-import { filter, map, merge, mergeMap, shareReplay, take } from 'rxjs/operators';
-
 import { BaseDetailComponent } from '@vendure/admin-ui/core';
 import {
     CreateAddressInput,
@@ -20,6 +16,9 @@ import {
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
+import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
+import { forkJoin, Observable, Subject } from 'rxjs';
+import { filter, map, merge, mergeMap, shareReplay, take } from 'rxjs/operators';
 
 type CustomerWithOrders = NonNullable<GetCustomerQuery['customer']>;
 
@@ -49,10 +48,10 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
         private formBuilder: FormBuilder,
-        private dataService: DataService,
+        protected dataService: DataService,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
 
         this.customFields = this.getCustomFieldConfig('Customer');
         this.detailForm = this.formBuilder.group({
@@ -75,12 +74,12 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
         this.init();
         this.availableCountries$ = this.dataService.settings
             .getAvailableCountries()
-            .mapSingle(result => result.countries.items)
+            .mapSingle((result) => result.countries.items)
             .pipe(shareReplay(1));
 
         const customerWithUpdates$ = this.entity$.pipe(merge(this.orderListUpdates$));
-        this.orders$ = customerWithUpdates$.pipe(map(customer => customer.orders.items));
-        this.ordersCount$ = this.entity$.pipe(map(customer => customer.orders.totalItems));
+        this.orders$ = customerWithUpdates$.pipe(map((customer) => customer.orders.items));
+        this.ordersCount$ = this.entity$.pipe(map((customer) => customer.orders.totalItems));
     }
 
     ngOnDestroy() {
@@ -148,7 +147,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
             lastName: formValue.lastName,
         };
         this.dataService.customer.createCustomer(customer, formValue.password).subscribe(
-            data => {
+            (data) => {
                 this.notificationService.success(_('common.notify-create-success'), {
                     entity: 'Customer',
                 });
@@ -165,7 +164,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                 this.changeDetector.markForCheck();
                 this.router.navigate(['../', data.createCustomer.id], { relativeTo: this.route });
             },
-            err => {
+            (err) => {
                 this.notificationService.error(_('common.notify-create-error'), {
                     entity: 'Customer',
                 });
@@ -228,7 +227,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'Customer',
                     });
@@ -236,7 +235,7 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                     this.addressDefaultsUpdated = false;
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Customer',
                     });
@@ -296,9 +295,9 @@ export class CustomerDetailComponent extends BaseDetailComponent<CustomerWithOrd
                 skip: (this.currentOrdersPage - 1) * this.ordersPerPage,
             })
             .single$.pipe(
-                map(data => data.customer),
+                map((data) => data.customer),
                 filter(notNullOrUndefined),
             )
-            .subscribe(result => this.orderListUpdates$.next(result));
+            .subscribe((result) => this.orderListUpdates$.next(result));
     }
 }

packages/admin-ui/src/lib/marketing/src/components/promotion-detail/promotion-detail.component.ts

@@ -44,11 +44,11 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
             enabled: true,
@@ -65,17 +65,17 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
         this.init();
         this.facets$ = this.dataService.facet
             .getFacets(9999999, 0)
-            .mapSingle(data => data.facets.items)
+            .mapSingle((data) => data.facets.items)
             .pipe(shareReplay(1));
 
         this.promotion$ = this.entity$;
-        this.dataService.promotion.getPromotionActionsAndConditions().single$.subscribe(data => {
+        this.dataService.promotion.getPromotionActionsAndConditions().single$.subscribe((data) => {
             this.allActions = data.promotionActions;
             this.allConditions = data.promotionConditions;
         });
         this.activeChannel$ = this.dataService.settings
             .getActiveChannel()
-            .mapStream(data => data.activeChannel);
+            .mapStream((data) => data.activeChannel);
 
         // When creating a new Promotion, the initial bindings do not work
         // unless explicitly re-running the change detector. Don't know why.
@@ -87,19 +87,19 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
     }
 
     getAvailableConditions(): ConfigurableOperationDefinition[] {
-        return this.allConditions.filter(o => !this.conditions.find(c => c.code === o.code));
+        return this.allConditions.filter((o) => !this.conditions.find((c) => c.code === o.code));
     }
 
     getConditionDefinition(condition: ConfigurableOperation): ConfigurableOperationDefinition | undefined {
-        return this.allConditions.find(c => c.code === condition.code);
+        return this.allConditions.find((c) => c.code === condition.code);
     }
 
     getAvailableActions(): ConfigurableOperationDefinition[] {
-        return this.allActions.filter(o => !this.actions.find(a => a.code === o.code));
+        return this.allActions.filter((o) => !this.actions.find((a) => a.code === o.code));
     }
 
     getActionDefinition(action: ConfigurableOperation): ConfigurableOperationDefinition | undefined {
-        return this.allActions.find(c => c.code === action.code);
+        return this.allActions.find((c) => c.code === action.code);
     }
 
     saveButtonEnabled(): boolean {
@@ -151,13 +151,13 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
             actions: this.mapOperationsToInputs(this.actions, formValue.actions),
         };
         this.dataService.promotion.createPromotion(input).subscribe(
-            data => {
+            (data) => {
                 this.notificationService.success(_('common.notify-create-success'), { entity: 'Promotion' });
                 this.detailForm.markAsPristine();
                 this.changeDetector.markForCheck();
                 this.router.navigate(['../', data.createPromotion.id], { relativeTo: this.route });
             },
-            err => {
+            (err) => {
                 this.notificationService.error(_('common.notify-create-error'), {
                     entity: 'Promotion',
                 });
@@ -173,7 +173,7 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
         this.promotion$
             .pipe(
                 take(1),
-                mergeMap(promotion => {
+                mergeMap((promotion) => {
                     const input: UpdatePromotionInput = {
                         id: promotion.id,
                         name: formValue.name,
@@ -189,14 +189,14 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'Promotion',
                     });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Promotion',
                     });
@@ -216,10 +216,10 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
             startsAt: entity.startsAt,
             endsAt: entity.endsAt,
         });
-        entity.conditions.forEach(o => {
+        entity.conditions.forEach((o) => {
             this.addOperation('conditions', o);
         });
-        entity.actions.forEach(o => this.addOperation('actions', o));
+        entity.actions.forEach((o) => this.addOperation('actions', o));
     }
 
     /**
@@ -247,7 +247,7 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
     private addOperation(key: 'conditions' | 'actions', operation: ConfigurableOperation) {
         const operationsArray = this.formArrayOf(key);
         const collection = key === 'conditions' ? this.conditions : this.actions;
-        const index = operationsArray.value.findIndex(o => o.code === operation.code);
+        const index = operationsArray.value.findIndex((o) => o.code === operation.code);
         if (index === -1) {
             const argsHash = operation.args.reduce(
                 (output, arg) => ({
@@ -272,7 +272,7 @@ export class PromotionDetailComponent extends BaseDetailComponent<Promotion.Frag
     private removeOperation(key: 'conditions' | 'actions', operation: ConfigurableOperation) {
         const operationsArray = this.formArrayOf(key);
         const collection = key === 'conditions' ? this.conditions : this.actions;
-        const index = operationsArray.value.findIndex(o => o.code === operation.code);
+        const index = operationsArray.value.findIndex((o) => o.code === operation.code);
         if (index !== -1) {
             operationsArray.removeAt(index);
             collection.splice(index, 1);

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts

@@ -43,11 +43,11 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private notificationService: NotificationService,
         private modalService: ModalService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
     }
 
     get visibileOrderLineCustomFields(): CustomFieldConfig[] {

packages/admin-ui/src/lib/settings/src/components/admin-detail/admin-detail.component.ts

@@ -2,9 +2,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { Observable } from 'rxjs';
-import { mergeMap, take } from 'rxjs/operators';
-
 import { BaseDetailComponent } from '@vendure/admin-ui/core';
 import {
     Administrator,
@@ -19,6 +16,8 @@ import {
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
+import { Observable } from 'rxjs';
+import { mergeMap, take } from 'rxjs/operators';
 
 export interface PermissionsByChannel {
     channelId: string;
@@ -50,11 +49,11 @@ export class AdminDetailComponent extends BaseDetailComponent<GetAdministrator.A
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.detailForm = this.formBuilder.group({
             emailAddress: ['', Validators.required],
             firstName: ['', Validators.required],
@@ -67,7 +66,7 @@ export class AdminDetailComponent extends BaseDetailComponent<GetAdministrator.A
     ngOnInit() {
         this.init();
         this.administrator$ = this.entity$;
-        this.allRoles$ = this.dataService.administrator.getRoles(99999).mapStream(item => item.roles.items);
+        this.allRoles$ = this.dataService.administrator.getRoles(99999).mapStream((item) => item.roles.items);
         this.dataService.client.userStatus().single$.subscribe(({ userStatus }) => {
             if (!userStatus.permissions.includes(Permission.UpdateAdministrator)) {
                 const rolesSelect = this.detailForm.get('roles');
@@ -108,10 +107,10 @@ export class AdminDetailComponent extends BaseDetailComponent<GetAdministrator.A
             firstName: formValue.firstName,
             lastName: formValue.lastName,
             password: formValue.password,
-            roleIds: formValue.roles.map(role => role.id),
+            roleIds: formValue.roles.map((role) => role.id),
         };
         this.dataService.administrator.createAdministrator(administrator).subscribe(
-            data => {
+            (data) => {
                 this.notificationService.success(_('common.notify-create-success'), {
                     entity: 'Administrator',
                 });
@@ -119,7 +118,7 @@ export class AdminDetailComponent extends BaseDetailComponent<GetAdministrator.A
                 this.changeDetector.markForCheck();
                 this.router.navigate(['../', data.createAdministrator.id], { relativeTo: this.route });
             },
-            err => {
+            (err) => {
                 this.notificationService.error(_('common.notify-create-error'), {
                     entity: 'Administrator',
                 });
@@ -139,20 +138,20 @@ export class AdminDetailComponent extends BaseDetailComponent<GetAdministrator.A
                         firstName: formValue.firstName,
                         lastName: formValue.lastName,
                         password: formValue.password,
-                        roleIds: formValue.roles.map(role => role.id),
+                        roleIds: formValue.roles.map((role) => role.id),
                     };
                     return this.dataService.administrator.updateAdministrator(administrator);
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'Administrator',
                     });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Administrator',
                     });
@@ -190,7 +189,7 @@ export class AdminDetailComponent extends BaseDetailComponent<GetAdministrator.A
                     const channelPermissions = channelIdPermissionsMap.get(channel.id);
                     const permissionSet = channelPermissions || new Set<Permission>();
 
-                    role.permissions.forEach(p => permissionSet.add(p));
+                    role.permissions.forEach((p) => permissionSet.add(p));
                     channelIdPermissionsMap.set(channel.id, permissionSet);
                     channelIdCodeMap.set(channel.id, channel.code);
                 }

packages/admin-ui/src/lib/settings/src/components/channel-detail/channel-detail.component.ts

@@ -2,10 +2,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
-import { Observable } from 'rxjs';
-import { map, mergeMap, take } from 'rxjs/operators';
-
 import { BaseDetailComponent } from '@vendure/admin-ui/core';
 import {
     Channel,
@@ -19,6 +15,9 @@ import { getDefaultLanguage } from '@vendure/admin-ui/core';
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
+import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
+import { Observable } from 'rxjs';
+import { map, mergeMap, take } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-channel-detail',
@@ -37,11 +36,11 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.detailForm = this.formBuilder.group({
             code: ['', Validators.required],
             token: ['', Validators.required],
@@ -54,7 +53,7 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
 
     ngOnInit() {
         this.init();
-        this.zones$ = this.dataService.settings.getZones().mapSingle(data => data.zones);
+        this.zones$ = this.dataService.settings.getZones().mapSingle((data) => data.zones);
     }
 
     ngOnDestroy() {
@@ -96,7 +95,7 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
                 ),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-create-success'), {
                         entity: 'Channel',
                     });
@@ -104,7 +103,7 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
                     this.changeDetector.markForCheck();
                     this.router.navigate(['../', data.id], { relativeTo: this.route });
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-create-error'), {
                         entity: 'Channel',
                     });
@@ -120,7 +119,7 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
         this.entity$
             .pipe(
                 take(1),
-                mergeMap(channel => {
+                mergeMap((channel) => {
                     const input = {
                         id: channel.id,
                         code: formValue.code,
@@ -140,7 +139,7 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Channel',
                     });
@@ -169,10 +168,7 @@ export class ChannelDetailComponent extends BaseDetailComponent<Channel.Fragment
     }
 
     private generateToken(): string {
-        const randomString = () =>
-            Math.random()
-                .toString(36)
-                .substr(3, 10);
+        const randomString = () => Math.random().toString(36).substr(3, 10);
         return `${randomString()}${randomString()}`;
     }
 }

packages/admin-ui/src/lib/settings/src/components/country-detail/country-detail.component.ts

@@ -2,20 +2,14 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { 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, take } from 'rxjs/operators';
-
 import { BaseDetailComponent } from '@vendure/admin-ui/core';
-import {
-    Country,
-    CreateCountryInput,
-    LanguageCode,
-    UpdateCountryInput,
-} from '@vendure/admin-ui/core';
+import { Country, CreateCountryInput, LanguageCode, UpdateCountryInput } from '@vendure/admin-ui/core';
 import { createUpdatedTranslatable } from '@vendure/admin-ui/core';
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
+import { combineLatest, Observable } from 'rxjs';
+import { mergeMap, take } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-country-detail',
@@ -32,11 +26,11 @@ export class CountryDetailComponent extends BaseDetailComponent<Country.Fragment
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.detailForm = this.formBuilder.group({
             code: ['', Validators.required],
             name: ['', Validators.required],
@@ -75,7 +69,7 @@ export class CountryDetailComponent extends BaseDetailComponent<Country.Fragment
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-create-success'), {
                         entity: 'Country',
                     });
@@ -83,7 +77,7 @@ export class CountryDetailComponent extends BaseDetailComponent<Country.Fragment
                     this.changeDetector.markForCheck();
                     this.router.navigate(['../', data.createCountry.id], { relativeTo: this.route });
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-create-error'), {
                         entity: 'Country',
                     });
@@ -106,14 +100,14 @@ export class CountryDetailComponent extends BaseDetailComponent<Country.Fragment
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'Country',
                     });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Country',
                     });
@@ -122,7 +116,7 @@ export class CountryDetailComponent extends BaseDetailComponent<Country.Fragment
     }
 
     protected setFormValues(country: Country, languageCode: LanguageCode): void {
-        const currentTranslation = country.translations.find(t => t.languageCode === languageCode);
+        const currentTranslation = country.translations.find((t) => t.languageCode === languageCode);
 
         this.detailForm.patchValue({
             code: country.code,

packages/admin-ui/src/lib/settings/src/components/global-settings/global-settings.component.ts

@@ -2,13 +2,12 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { switchMap } from 'rxjs/operators';
-
 import { BaseDetailComponent } from '@vendure/admin-ui/core';
 import { CustomFieldConfig, GlobalSettings, LanguageCode, Permission } from '@vendure/admin-ui/core';
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
+import { switchMap } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-global-settings',
@@ -26,11 +25,11 @@ export class GlobalSettingsComponent extends BaseDetailComponent<GlobalSettings>
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.customFields = this.getCustomFieldConfig('GlobalSettings');
         this.detailForm = this.formBuilder.group({
             availableLanguages: [''],
@@ -73,7 +72,7 @@ export class GlobalSettingsComponent extends BaseDetailComponent<GlobalSettings>
                         entity: 'Settings',
                     });
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Settings',
                     });

packages/admin-ui/src/lib/settings/src/components/payment-method-detail/payment-method-detail.component.ts

@@ -2,14 +2,13 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { ConfigArgSubset, ConfigArgType } from '@vendure/common/lib/shared-types';
-import { mergeMap, take } from 'rxjs/operators';
-
 import { BaseDetailComponent } from '@vendure/admin-ui/core';
 import { ConfigArg, PaymentMethod, UpdatePaymentMethodInput } from '@vendure/admin-ui/core';
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
+import { ConfigArgSubset, ConfigArgType } from '@vendure/common/lib/shared-types';
+import { mergeMap, take } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-payment-method-detail',
@@ -26,11 +25,11 @@ export class PaymentMethodDetailComponent extends BaseDetailComponent<PaymentMet
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.detailForm = this.formBuilder.group({
             code: ['', Validators.required],
             enabled: [true, Validators.required],
@@ -70,14 +69,14 @@ export class PaymentMethodDetailComponent extends BaseDetailComponent<PaymentMet
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'PaymentMethod',
                     });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'PaymentMethod',
                     });

packages/admin-ui/src/lib/settings/src/components/role-detail/role-detail.component.ts

@@ -2,21 +2,14 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { normalizeString } from '@vendure/common/lib/normalize-string';
-import { Observable } from 'rxjs';
-import { mergeMap, take } from 'rxjs/operators';
-
 import { BaseDetailComponent } from '@vendure/admin-ui/core';
-import {
-    CreateRoleInput,
-    LanguageCode,
-    Permission,
-    Role,
-    UpdateRoleInput,
-} from '@vendure/admin-ui/core';
+import { CreateRoleInput, LanguageCode, Permission, Role, UpdateRoleInput } from '@vendure/admin-ui/core';
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
+import { normalizeString } from '@vendure/common/lib/normalize-string';
+import { Observable } from 'rxjs';
+import { mergeMap, take } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-role-detail',
@@ -34,11 +27,11 @@ export class RoleDetailComponent extends BaseDetailComponent<Role> implements On
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.permissions = Object.keys(Permission).reduce(
             (result, key) => ({ ...result, [key]: false }),
             {} as { [K in Permission]: boolean },
@@ -80,14 +73,14 @@ export class RoleDetailComponent extends BaseDetailComponent<Role> implements On
             channelIds: formValue.channelIds,
         };
         this.dataService.administrator.createRole(role).subscribe(
-            data => {
+            (data) => {
                 this.notificationService.success(_('common.notify-create-success'), { entity: 'Role' });
                 this.detailForm.markAsPristine();
                 this.changeDetector.markForCheck();
                 this.permissionsChanged = false;
                 this.router.navigate(['../', data.createRole.id], { relativeTo: this.route });
             },
-            err => {
+            (err) => {
                 this.notificationService.error(_('common.notify-create-error'), {
                     entity: 'Role',
                 });
@@ -112,13 +105,13 @@ export class RoleDetailComponent extends BaseDetailComponent<Role> implements On
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), { entity: 'Role' });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                     this.permissionsChanged = false;
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'Role',
                     });
@@ -130,7 +123,7 @@ export class RoleDetailComponent extends BaseDetailComponent<Role> implements On
         this.detailForm.patchValue({
             description: role.description,
             code: role.code,
-            channelIds: role.channels.map(c => c.id),
+            channelIds: role.channels.map((c) => c.id),
         });
         for (const permission of Object.keys(this.permissions)) {
             this.permissions[permission] = role.permissions.includes(permission as Permission);
@@ -138,6 +131,6 @@ export class RoleDetailComponent extends BaseDetailComponent<Role> implements On
     }
 
     private getSelectedPermissions(): Permission[] {
-        return Object.keys(this.permissions).filter(p => this.permissions[p]) as Permission[];
+        return Object.keys(this.permissions).filter((p) => this.permissions[p]) as Permission[];
     }
 }

packages/admin-ui/src/lib/settings/src/components/shipping-method-detail/shipping-method-detail.component.ts

@@ -52,11 +52,11 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.detailForm = this.formBuilder.group({
             code: ['', Validators.required],
             description: ['', Validators.required],
@@ -75,16 +75,16 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
             this.calculators = data.shippingCalculators;
             this.changeDetector.markForCheck();
             this.selectedCheckerDefinition = data.shippingEligibilityCheckers.find(
-                c => c.code === (entity.checker && entity.checker.code),
+                (c) => c.code === (entity.checker && entity.checker.code),
             );
             this.selectedCalculatorDefinition = data.shippingCalculators.find(
-                c => c.code === (entity.calculator && entity.calculator.code),
+                (c) => c.code === (entity.calculator && entity.calculator.code),
             );
         });
 
         this.activeChannel$ = this.dataService.settings
             .getActiveChannel()
-            .mapStream(data => data.activeChannel);
+            .mapStream((data) => data.activeChannel);
 
         this.testResult$ = this.fetchTestResult$.pipe(
             switchMap(([address, lines]) => {
@@ -94,7 +94,7 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
                 const formValue = this.detailForm.value;
                 const input: TestShippingMethodInput = {
                     shippingAddress: { ...address, streetLine1: 'test' },
-                    lines: lines.map(l => ({ productVariantId: l.id, quantity: l.quantity })),
+                    lines: lines.map((l) => ({ productVariantId: l.id, quantity: l.quantity })),
                     checker: this.toAdjustmentOperationInput(this.selectedChecker, formValue.checker),
                     calculator: this.toAdjustmentOperationInput(
                         this.selectedCalculator,
@@ -103,7 +103,7 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
                 };
                 return this.dataService.shippingMethod
                     .testShippingMethod(input)
-                    .mapSingle(result => result.testShippingMethod);
+                    .mapSingle((result) => result.testShippingMethod);
             }),
         );
 
@@ -153,7 +153,7 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
     private configurableDefinitionToInstance(def: ConfigurableOperationDefinition): ConfigurableOperation {
         return {
             ...def,
-            args: def.args.map(arg => {
+            args: def.args.map((arg) => {
                 return {
                     ...arg,
                     value: getDefaultConfigArgValue(arg),
@@ -174,7 +174,7 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
             calculator: this.toAdjustmentOperationInput(this.selectedCalculator, formValue.calculator),
         };
         this.dataService.shippingMethod.createShippingMethod(input).subscribe(
-            data => {
+            (data) => {
                 this.notificationService.success(_('common.notify-create-success'), {
                     entity: 'ShippingMethod',
                 });
@@ -182,7 +182,7 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
                 this.changeDetector.markForCheck();
                 this.router.navigate(['../', data.createShippingMethod.id], { relativeTo: this.route });
             },
-            err => {
+            (err) => {
                 this.notificationService.error(_('common.notify-create-error'), {
                     entity: 'ShippingMethod',
                 });
@@ -212,14 +212,14 @@ export class ShippingMethodDetailComponent extends BaseDetailComponent<ShippingM
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'ShippingMethod',
                     });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'ShippingMethod',
                     });

packages/admin-ui/src/lib/settings/src/components/tax-category-detail/tax-category-detail.component.ts

@@ -2,9 +2,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { Observable } from 'rxjs';
-import { mergeMap, take } from 'rxjs/operators';
-
 import { BaseDetailComponent } from '@vendure/admin-ui/core';
 import {
     ConfigurableOperation,
@@ -16,6 +13,8 @@ import {
 import { NotificationService } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 import { ServerConfigService } from '@vendure/admin-ui/core';
+import { Observable } from 'rxjs';
+import { mergeMap, take } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-tax-detail',
@@ -36,11 +35,11 @@ export class TaxCategoryDetailComponent extends BaseDetailComponent<TaxCategory.
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
             taxRate: [0, Validators.required],
@@ -67,7 +66,7 @@ export class TaxCategoryDetailComponent extends BaseDetailComponent<TaxCategory.
         const formValue = this.detailForm.value;
         const input = { name: formValue.name } as CreateTaxCategoryInput;
         this.dataService.settings.createTaxCategory(input).subscribe(
-            data => {
+            (data) => {
                 this.notificationService.success(_('common.notify-create-success'), {
                     entity: 'TaxCategory',
                 });
@@ -75,7 +74,7 @@ export class TaxCategoryDetailComponent extends BaseDetailComponent<TaxCategory.
                 this.changeDetector.markForCheck();
                 this.router.navigate(['../', data.createTaxCategory.id], { relativeTo: this.route });
             },
-            err => {
+            (err) => {
                 this.notificationService.error(_('common.notify-create-error'), {
                     entity: 'TaxCategory',
                 });
@@ -91,7 +90,7 @@ export class TaxCategoryDetailComponent extends BaseDetailComponent<TaxCategory.
         this.taxCategory$
             .pipe(
                 take(1),
-                mergeMap(taxCategory => {
+                mergeMap((taxCategory) => {
                     const input = {
                         id: taxCategory.id,
                         name: formValue.name,
@@ -100,14 +99,14 @@ export class TaxCategoryDetailComponent extends BaseDetailComponent<TaxCategory.
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'TaxCategory',
                     });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'TaxCategory',
                     });

packages/admin-ui/src/lib/settings/src/components/tax-rate-detail/tax-rate-detail.component.ts

@@ -2,22 +2,21 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { Observable } from 'rxjs';
-import { mergeMap, take } from 'rxjs/operators';
-
-import { BaseDetailComponent } from '@vendure/admin-ui/core';
 import {
+    BaseDetailComponent,
     CreateTaxRateInput,
     CustomerGroup,
+    DataService,
     GetZones,
     LanguageCode,
+    NotificationService,
+    ServerConfigService,
     TaxCategory,
     TaxRate,
     UpdateTaxRateInput,
 } from '@vendure/admin-ui/core';
-import { NotificationService } from '@vendure/admin-ui/core';
-import { DataService } from '@vendure/admin-ui/core';
-import { ServerConfigService } from '@vendure/admin-ui/core';
+import { Observable } from 'rxjs';
+import { mergeMap, take } from 'rxjs/operators';
 
 @Component({
     selector: 'vdr-tax-rate-detail',
@@ -37,11 +36,11 @@ export class TaxRateDetailComponent extends BaseDetailComponent<TaxRate.Fragment
         route: ActivatedRoute,
         serverConfigService: ServerConfigService,
         private changeDetector: ChangeDetectorRef,
-        private dataService: DataService,
+        protected dataService: DataService,
         private formBuilder: FormBuilder,
         private notificationService: NotificationService,
     ) {
-        super(route, router, serverConfigService);
+        super(route, router, serverConfigService, dataService);
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
             enabled: [true],
@@ -56,8 +55,8 @@ export class TaxRateDetailComponent extends BaseDetailComponent<TaxRate.Fragment
         this.init();
         this.taxCategories$ = this.dataService.settings
             .getTaxCategories()
-            .mapSingle(data => data.taxCategories);
-        this.zones$ = this.dataService.settings.getZones().mapSingle(data => data.zones);
+            .mapSingle((data) => data.taxCategories);
+        this.zones$ = this.dataService.settings.getZones().mapSingle((data) => data.zones);
     }
 
     ngOnDestroy() {
@@ -82,7 +81,7 @@ export class TaxRateDetailComponent extends BaseDetailComponent<TaxRate.Fragment
             customerGroupId: formValue.customerGroupId,
         } as CreateTaxRateInput;
         this.dataService.settings.createTaxRate(input).subscribe(
-            data => {
+            (data) => {
                 this.notificationService.success(_('common.notify-create-success'), {
                     entity: 'TaxRate',
                 });
@@ -90,7 +89,7 @@ export class TaxRateDetailComponent extends BaseDetailComponent<TaxRate.Fragment
                 this.changeDetector.markForCheck();
                 this.router.navigate(['../', data.createTaxRate.id], { relativeTo: this.route });
             },
-            err => {
+            (err) => {
                 this.notificationService.error(_('common.notify-create-error'), {
                     entity: 'TaxRate',
                 });
@@ -106,7 +105,7 @@ export class TaxRateDetailComponent extends BaseDetailComponent<TaxRate.Fragment
         this.entity$
             .pipe(
                 take(1),
-                mergeMap(taxRate => {
+                mergeMap((taxRate) => {
                     const input = {
                         id: taxRate.id,
                         name: formValue.name,
@@ -120,14 +119,14 @@ export class TaxRateDetailComponent extends BaseDetailComponent<TaxRate.Fragment
                 }),
             )
             .subscribe(
-                data => {
+                (data) => {
                     this.notificationService.success(_('common.notify-update-success'), {
                         entity: 'TaxRate',
                     });
                     this.detailForm.markAsPristine();
                     this.changeDetector.markForCheck();
                 },
-                err => {
+                (err) => {
                     this.notificationService.error(_('common.notify-update-error'), {
                         entity: 'TaxRate',
                     });

packages/admin-ui/src/lib/settings/src/providers/routing/channel-resolver.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { BaseEntityResolver } from '@vendure/admin-ui/core';
 import { Channel, CurrencyCode } from '@vendure/admin-ui/core';
-import { getDefaultLanguage } from '@vendure/admin-ui/core';
+import { getDefaultUiLanguage } from '@vendure/admin-ui/core';
 import { DataService } from '@vendure/admin-ui/core';
 
 /**
@@ -24,11 +24,11 @@ export class ChannelResolver extends BaseEntityResolver<Channel.Fragment> {
                 token: '',
                 pricesIncludeTax: false,
                 currencyCode: CurrencyCode.USD,
-                defaultLanguageCode: getDefaultLanguage(),
+                defaultLanguageCode: getDefaultUiLanguage(),
                 defaultShippingZone: {} as any,
                 defaultTaxZone: {} as any,
             },
-            id => dataService.settings.getChannel(id).mapStream(data => data.channel),
+            (id) => dataService.settings.getChannel(id).mapStream((data) => data.channel),
         );
     }
 }