Topic: Modal module not found
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(); }
}
});
}
}
Add comment
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
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