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

The specified instant cannot be located in 'moment' while attempting to import {Moment} from 'moment' module

Struggling in a reactJS project with typescript to bring in moment alongside the type Moment Attempted using import moment, { Moment } from 'moment' This approach triggers ESLint warnings: ESLint: Moment not found in 'moment'(import/n ...

javascriptreactjstypescriptmomentjs

What is the proper way to integrate plotly types in Angular using a local version?

After exploring various plotly packages, I discovered that the angular-plotly package is no longer being updated. To incorporate the plotly library into my project, I decided to download the plotly.min.js file and include it in my sources. Additionally, I ...

angularplotly.js

Tips for successfully incorporating a date parameter in an Angular 8 GET request

Can anyone guide me on how to correctly pass a date in an Angular 8 $http Get request? I'm looking to achieve something like this: public getCalendarData(Date): any { let myResponse = this.http.get(`${environment.BASE_URL}/getCalendarData` + & ...

angular

Exploring Angular Route Configurations: Utilizing Multiple Outlets with Path as an Array of

In my Angular9 application, I have configured hundreds of routes paths. Is there a way to use multiple outlets with a single array of string paths? Current Code: const routes: Routes = [ { path: 'Data/:EntityID/:Date', compon ...

javascriptangular

Guide to Display chat.html Overlay on home.html Using Ionic 2

In my Ionic project, I have two pages: home.html chat.html I am looking to display chat.html over home.html at the bottom right as a chat window. How can I accomplish this? I have attempted to illustrate what I envision in an image: ...

angularionic-frameworkionic2

Exploring ways to use TypeScript to export a Mongoose model?

There's a module I need to export in order to avoid the error "OverwriteModelError: Cannot overwrite Task model once compiled". I've tried various solutions but none seem to work. The problem lies in the last line (export default models...) impo ...

typescriptmongoosenode-modules

Arrangement of Bootstrap card components

Each card contains dynamic content fetched from the backend. <div *ngFor="let cardData of dataArray"> <div class="card-header"> <div [innerHtml]="cardData.headerContent"></div> </div> <d ...

javascripthtmlcssangulartwitter-bootstrap

Error encountered when packaging WebAssembly using Rollup

When I use wasm-pack to compile some rust code into webassembly, specifically with the option --target browser (which is the default), these are the files that I see in typescript/deps/ed25519xp: ed25519xp_bg.wasm ed25519xp_bg.d.ts ed25519xp.d.ts ed25519 ...

typescriptnpmwebassemblyrollupwasm-pack

What is the best way to ensure that GCM push notifications are still received even when the app is closed or the

Currently, I'm in the process of developing an application using Ionic 2 that requires push notifications to be received. In certain scenarios, such as when the app is force-stopped on Android or when the device is turned off, push notifications are ...

typescriptangularpush-notificationgoogle-cloud-messagingionic2

Encounter a problem while running `ng build` due to a module not

I was looking to automate the building of my Angular project on a separate CentOS 7 machine. Here are the versions being used: Angular CLI: 8.3.23 Node: 13.14.0 OS: linux x64 Angular: 8.2.14 ... animations, common, compiler, compiler-cli, core, forms ... ...

angulartypescriptangular-cli

Is there a way to display the data from a URL as selectable options in a dropdown menu?

I have a URL containing an arrayList of data. My task is to fetch the data from this URL and display it as options in a dropdown menu, allowing users to select the desired option. I am aware that this can be achieved using the Get method, but I am facing d ...

angulargetdropdown

The MongoDB connection in NextJS 14 is causing a delay in loading the page

Occasionally, when trying to open a page through the dashboard menu, nothing happens on the frontend. There's no loading screen or any indication that the page is being loaded. How can this problem be prevented so that the page loads as intended? This ...

node.jstypescriptmongodbmongoosenext.js

Tips for providing a base URL in Angular to fetch images from an API

How do I access the API URL to retrieve images from a database? <table class="table"> <tr> <th>Id</th> <th>Image</th> </tr> ...

angular

Best practices for updating the token in an Angular 2/5 application - tips on how, where, and when to refresh

Currently I am utilizing the following technologies: Django REST Framework Angular 5 RxJS + OAuth2 Within all components paths except LoginComponent, I have an AuthGuard to verify the token data stored in localstorage of the browser. If valid data is ...

javascriptangularsingle-page-applicationangular5

Retrieve an object containing properties specified in the function's parameter list

I am currently working on developing a function that can dynamically create and return an object with properties based on an array of strings provided as parameters. type Foods = 'apple' | 'banana' | 'pear'; function foodObje ...

typescript

selectize.js typescript: Unable to access values of an undefined object (reading '0')

I've been working on incorporating selectize.js into my project using webpack and typescript. After installing selectize.js and the necessary types, I added the following to my code: yarn add @selectize/selectize yarn add @types/select2 Within my c ...

javascripttypescriptwebpackconfigurationselectize.js

Events bound to JSX elements created in an array map are not being triggered by React

My current task involves working on a compact react + typescript (1.6) application designed for editing slideshows. The functionality of the app is straightforward. A sidebar on the left displays all existing slides, and upon clicking, a canvas appears on ...

javascriptreactjstypescript

Securing communication between Angular 2 web pages and the ASP.NET Core server through encryption

I'm relatively inexperienced in this field, so I have a simple question. I am familiar with making Angular 2 Http calls and working with ASP.NET Core Authorization and Authentication. However, I'm wondering if there is encryption of data between ...

c#angularasp.net-corecryptography

What is the correct way to bring in a utility in my playwright test when I am working with TypeScript?

I am working on a basic project using playwright and typescript. My goal is to implement a logger.ts file that will manage log files and log any logger.info messages in those files. To set up my project, I used the following commands and created a playwri ...

node.jstypescriptplaywrightwinstonplaywright-test

Error in Angular 12: Unable to access 'bootstrap' property from null

During the upgrade process of my Angular 10 application to Angular 12, I encountered an error that says: TypeError: Cannot read property 'bootstrap' of null Below are the files related to my Angular setup: tsconfig.json { "compileOnSave& ...

angularangular-material