The directive 'ToolBarComponent' has been declared in multiple NgModules causing a conflict

Having trouble deploying my app on netlify, as the deploys keep failing with this error:

 Error: src/app/components/toolbar/toolbar.component.ts:12:14 - error NG6007: The Component 'ToolBarComponent' is declared by more than one NgModule.

The issue arises from using the declaration statement to utilize it in other pages like so:

 18   declarations: [DestinyPage, ToolBarComponent, ModalDestinyPage],

I attempted using it in the import statement but encountered this error:

ToolBarComponent does not have 'ɵmod' property

Using the export statement yielded the same error. Another suggestion I came across was utilizing the module instead of the component in files that reference the toolbar. However, since the toolbar doesn't have a specific page, I deemed this solution unapplicable.

Any assistance would be greatly appreciated!

git link: https://github.com/devpupo/baps-app

angulartypescriptionic-frameworkdeployment

Answer №1

If you encounter the error message "ng build --prod" while running a command locally, it may be due to using the toolbar component in multiple modules. To resolve this issue, consider relocating the component to a SharedModule. Instead of importing the component into various modules, import the SharedModule and simplify your code.

import { NgModule } from '@angular/core';
import { ToolBarComponent} from '../components/toolbar/toolbar.component';
@NgModule({
declarations: [
  ToolBarComponent,
],
exports: [
  ToolBarComponent,
]
})
export class SharedModule { }

Subsequently, make sure to import the SharedModule into the other modules where the component will be utilized.

import { SharedModule} from '../example.module';
@NgModule({
 imports: [
   SharedModule
 ]
   ...
  })

If the toolbar component is used in various components, consider implementing a header/footer for consistent display by utilizing a router outlet - 

<router-outlet></router-outlet>
. This way, you can call the toolbar component within a parent component just once without creating any conflicts with other modules/components.

For more information on sharing modules, visit: https://angular.io/guide/sharing-ngmodules To learn about Router Outlet, refer to: https://angular.io/api/router/RouterOutlet

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

What is the process for bringing in AngularJS 2? // Bring in { routerTransition } from './router.module;

Currently, I'm experimenting with implementing page transitions using Angular 2. The resources I've gone through indicate that I need to import: // import { routerTransition } from './router.module; However, despite following these instruc ...

angularimporttransition

An error with code -4058 is preventing the installation of npm packages when running the 'npm install' command after using 'ng new'

Embarking on a new Angular project, I encountered an issue while trying to install packages listed in my package.json file. Despite multiple attempts on both of my computers, the same error persisted, leaving me baffled. Determined not to give up, I seek g ...

angularnpm

No response from NgClass after executing the function

In my NgClass function, I make use of an array that is populated in the ngOnInit lifecycle hook. Within ngOnInit, the prepareRezerwation() function creates a variable called colorRezerwation: this.nodeService.getRezerwations(this.minMax).subscribe(re ...

angulartypescriptng-class

What is the best way to implement ES2023 functionalities in TypeScript?

I'm facing an issue while trying to utilize the ES2023 toReversed() method in TypeScript within my Next.js project. When building, I encounter the following error: Type error: Property 'toReversed' does not exist on type 'Job[]'. ...

javascriptreactjstypescriptnext.js

Module 'ngx-bootstrap' not found in project

My application is encountering an issue with ngx-bootstrap where the module can no longer be detected unless the path is specified. For instance: import { BsModalService, BsModalRef } from 'ngx-bootstrap'; results in "Cannot find module ' ...

node.jsangulartypescriptnpmngx-bootstrap

The 'ngModel' property cannot be bound to the 'input' element as it is not recognized. Error code: ngtsc(-998002)

When attempting to add [(ngModel)]="email" to my Angular app, I encountered the error message "can't bind to 'ngModel' since it isn't a known property of 'input'". Despite already including import { FormsModule } fro ...

angular

What is the method to create a universal type by utilizing attributes from a different type?

In building a type, I aim to create one that can accept the type of another object and generate a different type based on specific properties in that object. Illustrating this concept through code: // Definition representing the types of inputs shown on UI ...

typescripttypescript-generics

Angular UI validation malfunctioning upon loading of the page

My webpage contains multiple rows with specific validation requirements - at least one Key, Time, and Input must be selected. Initially, the validation works as expected. However, after saving and reloading the page, the default selection for Key, Time, an ...

angulartypescript

Mastering the Art of Sharing PrimgNg Selected Checkboxes with Child Component Dropdown

I am developing a simple application using PrimeNg. In order to pass information from the selected items of a Multi-Select component in the parent element (<p-multiSelect/>) to a Dropdown component in the child element (<p-dropdown/>), I have i ...

angularprimeng

The specified type '{ songs: any; }' cannot be assigned to the type 'IntrinsicAttributes' in NEXTJS/Typescript

I am currently working on a straightforward script. Below is the index.tsx file for my Next.js application: import type { NextPage } from 'next' import SongsList from '../components/SongsList/SongsList' import { GetStaticProps } from & ...

javascripttypescriptnext.js

Creating an if statement based on the currently chosen option

My angular JS page includes a drop-down list: <div class="col-md-4 fieldMargin"> <div class="dropdownIcon"> <select name="actions" id="actions" ...

angularangularjsangular-ng-if

Error while conducting unit testing: Element 'X' is unrecognized

While running the command npm run test, I encountered a specific error in my terminal: 1. If 'app-general-screen' is an Angular component, then verify that it is a part of an @NgModule where this component is declared. 2. If 'app-general-sc ...

angularunit-testing

Tips for creating Material UI elements using React and Typescript

I am looking to extend a component from the Material UI library by creating a custom component that encapsulates specific styles, such as for a modal wrapper. However, I feel that my current solution involving the props interface may not be ideal. Is the ...

reactjstypescriptmaterial-ui

Button ng-click with identical function parameters

I am facing an issue with two buttons that have the same ng-click but different parameters. <label class="item item-input"> <button ng-click="takePicture(true)">Save Settings</button> <button ng-click="takePicture(false)">Choos ...

javascriptangularjsionic-framework

Set the style of the mat-select element

I'm having an issue with my select option in Angular Material. The options look fine, but when I select one, the strong tag disappears. Can anyone help me style only that part? Thank you in advance. <mat-select formControlName="projectId" ...

javascriptcssangulartypescriptangular-material

What is the best way to access buffer data in TypeScript for Solana?

Is there a way to retrieve buffer data from TypeScript? I am attempting to use the public key to access all of my token lists, but I am only getting back an empty array of objects. import {Connection, Keypair} from "@solana/web3.js"; const Sola ...

node.jstypescriptsolana

The presence of React Router in Office JS Excel results in a blank screen

My current project involves developing add-ins for Excel using TypeScript and React. However, I have encountered numerous challenges along the way. Unlike a typical CRA React boilerplate web application, the Office add-in behaves differently. To illustrate ...

reactjstypescriptoffice-jsoffice-js-ux

Implementing routing for page navigation within an angular tree structure

Can someone assist me with integrating a route into an angular tree structure? Here is the HTML code snippet: <mat-tree [dataSource]="dataSource" class="tree-container" [treeControl]="treeControl"> <mat-tree-node class="btnLinks" *matTreeN ...

angularangular-routingangular-tree-component

Using Typescript in the package.json as a dependency

After initiating a React project with typescript using the command below: npx create-react-app frontend --template typescript https://i.sstatic.net/8n4O5.png I noticed that the tyepscript, @testing, and @types libraries were added to dependencies rather ...

reactjstypescriptnpm

What specific characteristic of TypeScript's number data type or the Math.ceil() function is responsible for this calculation mistake?

Currently, I am working on a function in Typescript that is supposed to generate a unique number each time it runs. However, there seems to be a problem with the arithmetic as the results are not always correct. Upon further examination of the code below, ...

javascripttypescriptmath