It is basically the structure you need to know. This kind of error can occur:

error NG8001: 'ion-title' is not a known element:
1. If 'ion-title' is an Angular component, then verify that it is part of this module.
2. If 'ion-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

You should declare the ModalComponent inside the page where you want to open the modal. In my case, inside homepage.module:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {IonicModule} from '@ionic/angular';
import {RouterModule} from '@angular/router';
import {HomePage} from './home.page';
import {TranslateModule} from "@ngx-translate/core";
import {ActionsModalModule} from '../../../shared/modals/action/actions-modal.module';
import {ActionsModalComponent} from '../../../shared/modals/action/actions-modal.component';

@NgModule({
    imports: [
        CommonModule,
        IonicModule,
        ActionsModalModule,
        RouterModule.forChild([
            {
                path: '',
                component: HomePage,
                data: {shouldDetach: true}
            },
        ]),
        TranslateModule
    ],
  declarations: [
    HomePage,
    ActionsModalComponent
  ],
  providers: [
    LegislationService
  ]
})
export class HomeModule {
}

The actions-modal.module.ts is just:

import {CommonModule} from "@angular/common";
import {NgModule} from "@angular/core";
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
  ],
})
export class ActionsModalModule {

}

So the trick is to declare the component inside the page where you want to load the modal!


Newsletter