CODEWITHSUNDEEP
javascriptangularionic-framework
mafortis
mafortis

Reputation: 7128

Ionic modal always open automatically

I have a form placed in modal it supposed to open when user click on button but instead it opens automatically as soon as user loads the page.

Issue

I have imported my modal into my page module.ts file and it makes modal open automatically. If I remove it form module page then I get this error:

ERROR Error: Uncaught (in promise): Error: No component factory found for ContactSupplierPage. Did you add it to @NgModule.entryComponents?
Error: No component factory found for ContactSupplierPage. Did you add it to @NgModule.entryComponents?

So the problem now is:

  1. If i add my modal to module page it opens automatically
  2. If I don't add it to module page it gets error and won't open.

code

list-detail.module.ts (suppose to have modal in it)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { ListDetailPage } from './list-detail.page';
import { ContactSupplierPageModule } from '../contact-supplier/contact-supplier.module'; //here

const routes: Routes = [
  {
    path: '',
    component: ListDetailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ContactSupplierPageModule, //here
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ListDetailPage]
})
export class ListDetailPageModule {}

list-detail.page.ts

async contactSupplier() {
    const modal = await this.modalCtrl.create({
      component: ContactSupplierPage
    });
    return await modal.present();
}

list-detail.html

<ion-footer (click)="contactSupplier()">
  <ion-toolbar>
    <ion-title>Contact Supplier</ion-title>
  </ion-toolbar>
</ion-footer>

Any idea?

Upvotes: 1

Views: 1294

Answers (2)

Njehuu
Njehuu

Reputation: 69

To me it was strange since that was happening because i had arrange the modal module to come before the page module.

 ModalPageModule,
 MyPageRoutingModule,

changed to 

  MyPageRoutingModule
  ModalPageModule,

Upvotes: 1

mafortis
mafortis

Reputation: 7128

SOLVED

I had to add my modal module in app.module.ts file instead of my page module file.

Now working just fine.

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ContactSupplierPageModule, // here
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    CommonModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Hope it help others.

Upvotes: 5

Related Questions