Issue: The Component type is declared in 2 different modules

When including a component in the HTML of an Ionic page, I added it to the declarations array of the page.module.ts file like this:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DeleteFriendsPageRoutingModule
  ],
  declarations: [DeleteFriendsPage,CommunityCardAccordionComponent,GroupTabsComponent],
  entryComponents:  []
})
export class DeleteFriendsPageModule {}

This resulted in the following error message:

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

angulartypescriptionic-framework

Answer №1

The issue arises due to the error message indicating that

CommunityCardAccordionComponent is being declared in 2 separate modules

In simpler terms, a component cannot be declared in more than one module...

However, it is possible to import the same module multiple times! To resolve this, you need to follow these steps:

  1. Remove CommunityCardAccordionComponent from both 

    CommunityPageModule and DeleteFriendsPageModule

  2. Create a new module CommunityCardAccordionModule inside the path/to/community-card-accordion-component/

@NgModule({
  imports: [CommonModule],
  declarations: [CommunityCardAccordionComponent]
})
export class CommunityCardAccordionModule { }
  1. Import CommunityCardAccordionModule in both 
    CommunityPageModule and DeleteFriendsPageModule

By following these steps, you will successfully address the issue as CommunityCardAccordionComponent will now only be declared in one module

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to retrieve cookie value from callback response in Angular?

There are two domains: Angular Application: samlapp.domain.com Node Application: samlapi.domain.com When Node calls the callback with the cookie, it redirects to the samlapp application (samlapp.domain.com/landing) Concern: How can I retrieve the cook ...

angularangularjscookiessession-cookies

Can Typescript enums be mapped to a Mongoose enum?

We are currently working on a Typescript-based NodeJs project that is integrated with Mongoose. Our main focus now is to establish an efficient method for defining an enum field within a Mongoose schema, using a Typescript enum. Despite researching the doc ...

node.jsmongodbtypescriptmongooseenums

What measures can I take to avoid multiple events from occurring when an Angular form field is changed?

When working with a form that includes various fields, one of them being the bucketfilter where users can select the bucket they want to retrieve data from, I encountered an issue. To track changes in the filter, I subscribed to the bucketfilter onChange e ...

angular

What is the best way to retrieve key/value pairs from a JSON object?

After making a call to an external service, I receive a domain object in return: var domainObject = responseObject.json(); This JSON object can then be easily accessed to retrieve specific properties. For example: var users = domainObject.Users The &ap ...

javascriptangulartypescript

What is the process for switching a button on and off?

I am attempting to add a data to an array when a button is pressed, and then remove it from the array when the button is pressed again (while also changing the button's class). <button *ngFor="#color of colors" [class.selected]="color = ...

javascriptangularjsangular

Determining the modified field in an Angular 2 formbuilder

Is there a way to determine which field has been changed in an Angular2 form builder? I want to include some logic that triggers if field 'a' is changed, and another set of actions if field 'b' is changed. this.comparisonForm = this.fo ...

angular

Guide to importing bootstrap 3.3.7 module for utilization within an Angular2 component

I am encountering an issue when attempting to import and utilize the bootstrap 3.3.7 module: Within my package.json, I have listed bootstrap 3.3.7 as a dependency: { "name": "plan", "version": "0.0.0", "license": "MIT", ... Upon trying to import ...

angulartwitter-bootstrapnpmangular-cli

Deceleration of an Angular 5 application

In an attempt to improve the performance of an Angular 5 application, I am currently profiling it to identify the cause of its slow loading when dealing with certain objects. To provide more context, the application displays a grid where each cell contains ...

angularprofiling

Steps for showing a component (popup modal) just one time with React hooks

Is there a way to implement a popup modal that only appears once using hooks and localStorage? The modal should already appear upon page load. const [showModal, setShowModal] = useState<boolean>(true) return( <ModalIsContractor ...

reactjstypescriptreact-hooksnext.js

What is the best way to pre-fetch data using axios in Vue?

My app requires offline functionality for drivers operating in remote areas with limited internet access. To address this, I aim to pre-download all necessary data using Axios requests when an internet connection is available. This way, the app can retriev ...

javascriptvue.jsionic-frameworkvuejs3ionic5

Expanding the search field in my navbar to occupy the entire width of the

I am trying to customize the search field in the navbar below to make it full width without affecting any other elements. Any suggestions on how I can achieve this? Despite my efforts to set the width of various components, I have not been successful in m ...

javascripthtmlcssangulartwitter-bootstrap

customize your selections in p-multiselect with dynamic choices primeng angular 2

I am currently working on implementing the Primeng datatable. I have put together an array containing headers, fields, and options called headersList. Here is how it looks: { header: "Time", field: "time", options: "timeOptions" }, { header: ...

angularprimengprimeng-datatable

"Exploring Angular with Storybook: Enhancing Components with NgControl

Having created the following Class : export class TestComponent implements OnInit, ControlValueAccessor { constructor( @Optional() @Self() public ngControl: NgControl) { if (ngControl) { ngControl.valueAccessor = this; } } I am now in ...

angularangular9storybookconstructor-injection

Constructor polymorphism in TypeScript allows for the creation of multiple constructor signatures

Consider this straightforward hierarchy of classes : class Vehicle {} class Car extends Vehicle { wheels: Number constructor(wheels: Number) { super() this.wheels = wheels } } I am looking to store a constructor type that ext ...

typescriptinheritanceconstructorpolymorphism

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

Exploring the best way to access ViewContainerRef: ViewChild vs Directive

While researching, I came across a recommendation in the Angular Docs that suggests using a directive to access the ViewContainerRef for creating dynamic components. Here is an example of such a directive: import { Directive, ViewContainerRef } from &apos ...

angulartypescriptangular-components

TS2786 TypeScript is failing to recognize the UI-Kitten components

Error message on IDE: Error Encountered: 'ApplicationProvider' cannot be used as a JSX component. The instance type 'ApplicationProvider' is not a valid JSX element. The types returned by 'render()' are incompatible betwe ...

typescriptreact-nativetypescript-eslintreact-native-ui-kitten

Tips for building an effective delete function in Angular for eliminating a single record from a table

I've been working on creating a method to delete an employee by their ID, and I've tried various approaches in my VS Code. Unfortunately, all of them have resulted in errors except for this specific method. Whenever I click on the delete button, ...

angulartypescriptspring-bootangularjs-directiveangular-ui-router

The email package is unable to meet the peerDependencies requirements of its siblings

I encountered an issue while trying to incorporate the @ngrx/store module into my Angular 2 application. When using npm install, I received the error message below: npm ERR! peerinvalid The package <a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

npmangularngrx

Sanity.io's selection of schema field types for efficient and convenient

Hey there, guys! I recently started using Sanity.io and I'm curious whether there's a way to enhance my code efficiency and reuse certain fields across different schemas. I had an idea that goes something like this: cars.ts: export default { ...

javascripttypescriptsanity