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!