I want to use the same modal in several pages. But I get this error that the type of page is part of the declarations of 2 modules. I know a similar question is already existing ( Component is part of the declarations of 2 modules in Angular ) But I can't get it work with it, since I am not working with a module but with a page.
page.module.ts that is used as model
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 { ComponentsModule } from '../components/components.module';
import { FilterPage } from './filter.page';
const routes: Routes = [
{
path: '',
component: FilterPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
RouterModule.forChild(routes),
ComponentsModule
],
declarations: [FilterPage],
exports: [FilterPage]
})
export class FilterPageModule {}
one of the two page.module.ts used as where the model shall appear
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { FilterPage } from '../filter/filter.page'
import { IonicModule } from '@ionic/angular';
import { FriendsPage } from './friends.page';
const routes: Routes = [
{
path: '',
component: FriendsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes),
],
declarations: [FriendsPage, FilterPage],
entryComponents: [FilterPage]
})
export class FriendsPageModule {}
You should create a folder named shared or whatever you wish.Move your pipes
, directives
, components
and modals
you want to use multiple times inside the shared
folder.Then create a shared.module.ts
inside this folder. Your setup should be as below.
const COMPONENTS=[
FilterPage
];
@NgModule({
exports:[...COMPONENTS,...PIPES,...DIRECTIVES],
declarations:[...COMPONENTS,...PIPES,...DIRECTIVES],
entryComponents:[...COMPONENTS]
})
export class SharedModule{
}
then import SharedModule
to the module you want to use inside.
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes),
SharedModule
],
declarations: [FriendsPage],
entryComponents: [FriendsPage]
})
export class FriendsPageModule {}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.