Base solution for your next web application
BLACK FRIDAY
From Nov 21
To Dec 1
XXDAYS : XXHRS : XXMIN : XXSEC
SAVE UP TO$3K
Also valid for the
existing customers!
Open Closed

Help on building angular project in AspNetZero v8.5 Angular 9.1 #8829


1
ajayak created

Hi,

I am using dynamic imports and it suddenly started giving errors on project upgrade. Certainly an angular thing, but someone else faced this issue?

Code:

{
    path: 'product-mapping',
    loadChildren: () => import('./product-mapping/product-mapping.module').then(c => c.ProductMappingModule)
},

10 Answer(s)
  • 0
    ismcagdas created
    Support Team

    Hi @ajayak,

    Could you share your;

    1. product-mapping.module
    2. product-mapping.routing.module
    3. product-mapping.component
  • 0
    ajayak created

    product-mapping.module.ts

    import { NgModule } from '@angular/core';
    import { PaginatorModule } from 'primeng/paginator';
    import { TableModule } from 'primeng/table';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';
    import { NgxDnDModule } from '@node_modules/@swimlane/ngx-dnd';
    import { ModalModule } from 'ngx-bootstrap/modal';
    import { TooltipModule } from 'ngx-bootstrap/tooltip';
    import { NgArrayPipesModule } from '@node_modules/ngx-pipes';
    import { UtilsModule } from '@shared/utils/utils.module';
    import {
        ProductMappingRoutingModule,
        routedComponents
    } from '@app/main/product-mapping/product-mapping.routing.module';
    import { AppCommonModule } from '@app/shared/common/app-common.module';
    import { DefaultProductMapperModalComponent } from '@app/main/product-mapping/default-product-mapper/default-product-mapper-modal.component';
    
    @NgModule({
        imports: [
            FormsModule,
            CommonModule,
            AppCommonModule,
            TableModule,
            PaginatorModule,
            TooltipModule,
            ModalModule,
            NgxDnDModule,
            UtilsModule,
            NgArrayPipesModule,
            ProductMappingRoutingModule
        ],
        declarations: [routedComponents, DefaultProductMapperModalComponent],
        exports: [],
        providers: []
    })
    export class ProductMappingModule {}
    

    product-mapping.routing.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { ProductMappingComponent } from './product-mapping.component';
    
    const routes: Routes = [{ path: '', component: ProductMappingComponent }];
    
    @NgModule({
        imports: [RouterModule.forChild(routes)],
        exports: [RouterModule]
    })
    export class ProductMappingRoutingModule {}
    
    export const routedComponents = [ProductMappingComponent];
    
    

    product-mapping.component.ts

    import { ChangeDetectorRef, Component, Injector, OnInit, ViewChild } from '@angular/core';
    import { AppComponentBase } from 'shared/common/app-component-base';
    import { appModuleAnimation } from 'shared/animations/routerTransition';
    import {
        InstalledLogisticProviderDto,
        LogisticProviderCustomersServiceProxy,
        PrimePenguinAdminCommonServiceProxy,
        PrimePenguinCommonServiceProxy,
        ProductMappingDto,
        ProductMappingServiceProxy
    } from 'shared/service-proxies/service-proxies';
    import { LazyLoadEvent, Table, Paginator } from 'primeng';
    import { flatMap } from 'lodash';
    import { finalize, map } from 'rxjs/operators';
    import {
        AddUpdateProductMappingsInput,
        LogisticProviderCustomerTenantIdNameDto,
        MappingConfigurationDto
    } from '@shared/service-proxies/service-proxies';
    import { AppConsts } from '@shared/AppConsts';
    import { MappingConfigurationType } from '@shared/service-proxies/service-proxies';
    
    @Component({
        templateUrl: './product-mapping.component.html',
        animations: [appModuleAnimation()]
    })
    export class ProductMappingComponent extends AppComponentBase implements OnInit {
        @ViewChild('dataTable', {static: true}) dataTable: Table;
        @ViewChild('paginator', {static: true}) paginator: Paginator;
        filter = '';
    
        isAdmin;
        isEshop;
        isLogisticProvider;
    
        mappingConfigurationTypes = AppConsts.mappingConfigurationTypes.filter(c => c.id !== MappingConfigurationType.Default);
        defaultPriority = AppConsts.fixedValues.maxShort;
        logisticProviderId = '';
        customerTenantId = '';
        logisticProviders: InstalledLogisticProviderDto[] = [];
        customers: LogisticProviderCustomerTenantIdNameDto[] = [];
        changedVariantMappings: { productVariantId: number; customerTenantId: number }[] = [];
    
        constructor(
            injector: Injector,
            private _productMappingService: ProductMappingServiceProxy,
            private _commonService: PrimePenguinCommonServiceProxy,
            private _adminCommonService: PrimePenguinAdminCommonServiceProxy,
            private _lpCustomerService: LogisticProviderCustomersServiceProxy,
            private _cd: ChangeDetectorRef
        ) {
            super(injector);
        }
    
        ngOnInit() {
            this.isEshop = this.permission.isGranted(AppConsts.ppPermissions.salesChannelUser);
            this.isLogisticProvider = this.permission.isGranted(AppConsts.ppPermissions.logisticProviderAdmin);
            this.isAdmin = this.permission.isGranted(AppConsts.ppPermissions.admin.all);
    
            if (this.isAdmin) {
                this._adminCommonService.getAllLogisticProviders().subscribe(result => (this.logisticProviders = result.items));
                this._commonService.getLogisticProviderCustomers(undefined).subscribe(result => (this.customers = result));
            }
            if (this.isLogisticProvider) {
                this._lpCustomerService
                    .getAll(undefined)
                    .pipe(
                        map(result =>
                            result.items.map(
                                c =>
                                    new LogisticProviderCustomerTenantIdNameDto({
                                        id: c.customerTenantId,
                                        name: c.customerTenantName
                                    })
                            )
                        )
                    )
                    .subscribe(result => (this.customers = result));
            }
        }
    
        getLogisticProviderId = () => (+this.logisticProviderId > 0 ? +this.logisticProviderId : undefined);
        getCustomerTenantId = () => {
            if (this.isAdmin || this.isLogisticProvider) {
                return +this.customerTenantId > 0 ? +this.customerTenantId : undefined;
            }
            if (this.isEshop) {
                return abp.session.tenantId;
            }
            return undefined;
        };
    
        isDefaultMappingSelected = mapping => MappingConfigurationType.Default === +mapping;
    
        markVariantAsChanged = (productVariantId: number, customerTenantId: number) => {
            const existing = this.changedVariantMappings.filter(
                c => c.customerTenantId === customerTenantId && c.productVariantId === productVariantId
            );
            if (existing.length > 0) {
                return;
            }
            this.changedVariantMappings.push({ productVariantId, customerTenantId });
        };
    
        onMappingMove(productVariantId: number, customerTenantId: number) {
            this.markVariantAsChanged(productVariantId, customerTenantId);
            const movedConfig = (<ProductMappingDto[]>this.primengTableHelper.records).filter(
                c => c.productVariantId === productVariantId && c.customerTenantId === customerTenantId
            )[0];
            movedConfig.mappingConfigurationDtos
                .filter(c => c.mappingConfigurationType !== MappingConfigurationType.Default)
                .forEach((c, i) => (c.mappingPriority = i + 1));
            this._cd.detectChanges();
        }
    
        private getVariantById(productVariantId: number, customerTenantId: number): ProductMappingDto {
            const variantIndex = (<ProductMappingDto[]>this.primengTableHelper.records).findIndex(
                c => c.productVariantId === productVariantId && c.customerTenantId === customerTenantId
            );
            return this.primengTableHelper.records[variantIndex];
        }
    
        removeMapping(productVariantId: number, customerTenantId: number, mapping: MappingConfigurationDto) {
            const variant = this.getVariantById(productVariantId, customerTenantId);
            variant.mappingConfigurationDtos = variant.mappingConfigurationDtos.filter(c => c !== mapping);
            this.onMappingMove(productVariantId, customerTenantId);
        }
    
        addMapping(productVariantId: number, customerTenantId: number) {
            const variant = this.getVariantById(productVariantId, customerTenantId);
            const defaultMapping = variant.mappingConfigurationDtos.filter(
                c => c.mappingConfigurationType === MappingConfigurationType.Default
            )[0];
            const map = this.mappingConfigurationTypes[0];
            const newMapping = new MappingConfigurationDto({
                ...defaultMapping,
                mappingConfigurationType: map.id,
                mappingConfigurationTypeName: map.name,
                mappingPriority: 100,
                id: undefined
            });
            variant.mappingConfigurationDtos = variant.mappingConfigurationDtos.concat(newMapping);
            this.onMappingMove(productVariantId, customerTenantId);
        }
    
        getProductMappings(event?: LazyLoadEvent) {
            if (this.primengTableHelper.shouldResetPaging(event)) {
                this.paginator.changePage(0);
                return;
            }
            this.changedVariantMappings = [];
            this.primengTableHelper.showLoadingIndicator();
            this._productMappingService
                .getProductMappings(
                    this.getCustomerTenantId(),
                    this.getLogisticProviderId(),
                    this.filter,
                    this.primengTableHelper.getSorting(this.dataTable),
                    this.primengTableHelper.getMaxResultCount(this.paginator, event),
                    this.primengTableHelper.getSkipCount(this.paginator, event)
                )
                .pipe(finalize(() => this.primengTableHelper.hideLoadingIndicator()))
                .subscribe(result => {
                    this.primengTableHelper.totalRecordsCount = result.totalCount;
                    this.primengTableHelper.records = result.items;
                    this.primengTableHelper.hideLoadingIndicator();
                });
        }
    
        validateForm() {
            const variants: ProductMappingDto[] = this.primengTableHelper.records;
            const mappings = flatMap(variants, c => c.mappingConfigurationDtos);
            if (mappings.some(c => !c.logisticProviderId)) {
                return false;
            }
            if (mappings.some(c => !c.mappingConfigurationType)) {
                return false;
            }
            return true;
        }
    
        addUpdateMappings(updatedMappings: ProductMappingDto[]) {
            const changes: AddUpdateProductMappingsInput[] = [];
            updatedMappings.forEach(m => {
                m.mappingConfigurationDtos.forEach(c =>
                    changes.push(
                        new AddUpdateProductMappingsInput({
                            customerTenantId: m.customerTenantId,
                            productVariantId: m.productVariantId,
                            logisticProviderId: c.logisticProviderId,
                            mappingConfigurationType: <any>c.mappingConfigurationType,
                            mappingConfigurationValue: c.mappingConfigurationValue,
                            mappingPriority: c.mappingPriority
                        })
                    )
                );
            });
            this._productMappingService.addUpdateProductMappings(changes).subscribe(() => {
                this.notify.success(this.l('SavedSuccessfully'));
                this.changedVariantMappings = [];
                this.getProductMappings();
            });
        }
    
        saveChanges(isInvalid: boolean) {
            if (isInvalid || !this.validateForm()) {
                this.message.error(this.l('FillAllDetails'));
                return;
            }
            const variants: ProductMappingDto[] = this.primengTableHelper.records;
            const updatedMappings = flatMap(
                this.changedVariantMappings.map(m =>
                    variants.filter(c => c.productVariantId === m.productVariantId && c.customerTenantId === m.customerTenantId)
                )
            );
            this.addUpdateMappings(updatedMappings);
        }
    }
    
    
  • 0
    ajayak created

    @ismcagdas, I commented this code and then realized that it is the same issue with all lazy loaded modules

  • 0
    ismcagdas created
    Support Team

    Hi @ajayak,

    You are right. Code seems fine. Is it possible to share your Angular project via email with info@aspnetzero.com ?

  • 0
    ajayak created

    Hi @ismcagdas,

    I have shared the angular project with minimal code to reproduce the issue :) Added in /angular/src/app/main/order-mapping

  • 0
    ismcagdas created
    Support Team

    Hi @ajayak,

    Did you send it to info@aspnetzero.com ? I couldn't find your email.

  • 0
    ajayak created

    Hi @ismcagdas,

    I shared the email. You can download the code from my onedrive link: https://1drv.ms/u/s!AlmThg0xqW35grc9Q5nf4Usz4QLU0Q?e=uPiFPH

    I'll delete this source code on 15th April.

  • 0
    ajayak created

    Hi @ismcagdas, Are you able to reproduce the issue?

  • 0
    ismcagdas created
    Support Team

    Hi @ajayak

    I got the project, we can continue via email.

    Thanks,

  • 0
    ismcagdas created
    Support Team

    Resolved via email.