I'm trying to declare a custom component to use in two different pages (of my ionic app) but getting an error

0

I'm trying to use a custom component called UserCardComponent in two different pages in my ionic v3 app.

I followed this answer (the one with 26 votes) which says to declare custom components in "a specific page's module.ts file". Custom component in ionic v3
So I firstly declared the component in my HomePageModule and was able to use it fine within the home.html.

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardComponent } from '../../components/user-card/user-card';

@NgModule({
  declarations: [
    HomePage,
    UserCardComponent
  ],
  imports: [
    IonicPageModule.forChild(HomePage)
  ],
})
export class HomePageModule {}

I then tried to declare it (in the same way) in ContactsPageModule to use in contacts.html however I get the following error:

Type UserCardComponent is part of the declarations of 2 modules: HomePageModule and ContactsPageModule! 
Please consider moving UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule. 
You can also create a new NgModule that exports and includes UserCardComponent then import that NgModule in HomePageModule and ContactsPageModule

When I try to just declare the UserCardComponent in the app.module.ts file I get a Template parse error and the custom component won't work in any pages.

Can you advise me on what to do? The error says to move the "UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule. "
Can you tell me how I would do this? I'm new to ionic. Thanks

Sarah

출처 ionic-framework ionic3 components

1 답변

2

If you declare the UserCardComponent in the HomePageModule, you only need to import the HomePageModule in the ContactsPageModule but it introduces dirty dependency between theses modules.

A better way is to declare UserCardComponent in a specific module UserCardModule and then to import this specific module in HomePageModule and in ContactsPageModule.

user-card.module.ts

import { NgModule } from '@angular/core';
import { UserCardComponent } from './user-card';

@NgModule({
  declarations: [
    UserCardComponent
  ]
})
export class UserCardModule {}

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardModule } from '../../components/user-card/user-card.module';

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    UserCardModule
  ],
})
export class HomePageModule {}

  • That is perfect. Thank you so much :) However the folder structure is slightly different to your answer... In user-card.module.ts it should be import { UserCardComponent } from './user-card'; and in home.module.ts the line should be import { UserCardModule } from '../../components/user-card/user-card.module'; ...if you can change that i'll mark the answer correct. If you want maybe i could edit your answer? - Sarah
  • Thanks, I edit my answer with your notes - JeRivals
  • Perfect thanks :) - Sarah

Linked

Related

Latest