Topic: Modal module not found

lpoore pro asked 6 years ago


When I do an "ng serve" I get the error (ERROR in ./src/app/components/shared/dialogs/processing-dialog/processing-dialog.component.ts Module not found: Error: Can't resolve 'ng-uikit-pro-standard/ng-uikit-pro-standard/free/modals' in 'C:\...\src\app\components\shared\dialogs\processing-dialog').   Here is my app.module.ts:  
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { RouterModule, DefaultUrlSerializer, UrlTree, UrlSerializer } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
// Third Party
import { MDBBootstrapModulesPro, MDBSpinningPreloader } from 'ng-uikit-pro-standard';
import { TextMaskModule } from 'angular2-text-mask';
// Custom
import { AppComponent } from './app.component';
import {
ChangePasswordComponent, ClaimsServicesComponent, AutoPaymentComponent, BillingPaymentComponent,
ForgotPasswordComponent, LoginComponent, MakePaymentComponent, PolicyDocumentsComponent, PolicySummaryComponent,
RegistrationComponent, ResetPasswordComponent, NotFoundComponent, LayoutComponent, LayoutLeftNavComponent,
LayoutHeaderComponent, LayoutFooterComponent, AddressComponent, EmailComponent, PhoneComponent,
ManageUserAccountsComponent, ContactComponent, ActivationComponent, InactivePolicyComponent,
ContactInformationCardComponent, BillingPaymentSummaryCardComponent, NotificationsCardComponent, PolicySummaryCardComponent,
ErrorMessageComponent, AgencySummaryCardComponent, NotificationItemComponent,
BillingPaymentHistoryCardComponent, BillingPaymentInformationCardComponent, PracticeInformationCardComponent, PasswordRequirementsCardComponent,
ProcessingDialogComponent, DeleteUserAccountComponent, EditUserAccountComponent, BackDoorComponent, BillingInformationCardComponent, PendingCancelBannerComponent,
ServicesOfflineComponent, TimeOutPromptComponent, ChatComponent
} from './components';
import { routing } from './routes';
import { UserLoggedInGuard, CanMakePaymentsInGuard } from './guards';
import { AuditService, AuthService, AccountService, BillingService, DdsService, SharedService } from './services';
import {
AccountActivateUserResolve, AccountResetPasswordResolve, PolicySummaryResolve
} from './resolves';
import { ApiHttpInterceptor } from './shared';
export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
parse(url:string):UrlTree {
returnsuper.parse(url.toLowerCase());
}
}
@NgModule({
declarations: [
// app
AppComponent,
// pages
ChangePasswordComponent, ClaimsServicesComponent, AutoPaymentComponent, BillingPaymentComponent,
ForgotPasswordComponent, LoginComponent, MakePaymentComponent, PolicyDocumentsComponent, PolicySummaryComponent,
RegistrationComponent, ResetPasswordComponent, NotFoundComponent, LayoutComponent, LayoutLeftNavComponent,
LayoutHeaderComponent, LayoutFooterComponent, AddressComponent, EmailComponent, PhoneComponent,
ManageUserAccountsComponent, ContactComponent, ActivationComponent,
ErrorMessageComponent, NotificationItemComponent, ProcessingDialogComponent, ServicesOfflineComponent, TimeOutPromptComponent,
DeleteUserAccountComponent, EditUserAccountComponent, InactivePolicyComponent, BackDoorComponent, PendingCancelBannerComponent, ChatComponent,
// cards
ContactInformationCardComponent, BillingPaymentSummaryCardComponent, NotificationsCardComponent, PolicySummaryCardComponent, AgencySummaryCardComponent,
BillingPaymentHistoryCardComponent, BillingPaymentInformationCardComponent, PracticeInformationCardComponent, PasswordRequirementsCardComponent,
BillingInformationCardComponent
],
entryComponents: [
ProcessingDialogComponent, ServicesOfflineComponent, TimeOutPromptComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
[RouterModule.forRoot(routing)],
MDBBootstrapModulesPro.forRoot(),
TextMaskModule
],
providers: [
// MDBootstrap
MDBSpinningPreloader,
// guards
UserLoggedInGuard, CanMakePaymentsInGuard,
// resolvers
AccountActivateUserResolve, AccountResetPasswordResolve, PolicySummaryResolve,
// services
AuditService, AuthService, AccountService, BillingService, DdsService, SharedService,
// location strategy
{ provide: LocationStrategy, useClass: HashLocationStrategy },
// interceptors
{ provide: HTTP_INTERCEPTORS, useClass: ApiHttpInterceptor, multi: true },
// sanitize url by converting all characters to lower case
{ provide: UrlSerializer, useClass: LowerCaseUrlSerializer },
],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }
Here is my component.ts:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { combineLatest } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
// Third Party
import { ModalDirective } from 'ng-uikit-pro-standard/ng-uikit-pro-standard/free/modals';
// Custom
import { AuthService, AccountService, BillingService, DdsService } from 'app/services';
@Component({
selector:'ddsss-processing-dialog',
templateUrl:'./processing-dialog.component.html',
styleUrls: ['./processing-dialog.component.scss']
})
export class ProcessingDialogComponent implements AfterViewInit {
@ViewChild('processingModal') processingModal: ModalDirective;
constructor(
privateauthService:AuthService,
privateaccountService:AccountService,
privatebillingService:BillingService,
privateddsService:DdsService,
) { }
ngAfterViewInit() {
combineLatest(
this.authService.isProcessing$,
this.accountService.isProcessing$,
this.billingService.isProcessing$,
this.ddsService.isProcessing$,
)
.pipe(debounceTime(10)) // prevent dialog from opening/closing as multple change
.subscribe(data => {
if (data[0] ||data[1] ||data[2] ||data[3]) {
if (!this.processingModal.isShown) { this.processingModal.show(); }
} else {
if (this.processingModal.isShown) { this.processingModal.hide(); }
}
});
}
}

Damian Gemza staff answered 6 years ago


Dear Ipoore, Could you please try to remove /ng-uikit-pro-standard/free/modals from the below line?
import { ModalDirective } from 'ng-uikit-pro-standard/ng-uikit-pro-standard/free/modals';
Leave there only the first 'ng-uikit-pro-standard' import, so your import line should look like below:
import { ModalDirective } from 'ng-uikit-pro-standard';
This should help you with your problem. But if not, please let me know. Best Regards, Damian

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Desktop
  • Browser: Any
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No