"Exploring the dynamic duo of JHipster and master

I have utilized Jhipster's .jdl file to create all of my classes. Currently, I have two classes with a master-detail relationship. This setup displays the master record (let's say A) at the top of my form and a list/table of detail records (for example B). It's worth noting that even class B was generated by jhipster!

Within the list/table representation of B, I need to include a delete button that links to a function taken from the original DetailBClass:

...in the html file...
<button type="button" (click)="deleteDetail(detailB)" [pTooltip]="'entity.action.delete' | translate" class="btn btn-danger btn-sm">
       <fa-icon [icon]="'times'"></fa-icon>
</button>
...in the ts file...
deleteDetail(detailBClass: IDetailBClass) {
   const modalRef = this.modalService.open(DetailBClassDeleteDialogComponent, { size: 'lg', backdrop: 'static' });
   modalRef.componentInstance.detailBClass = detailBClass;
}

Upon clicking the delete-row button, an error is triggered:

ERROR Error: Uncaught (in promise): Error: Type DetailBClassDeleteDialogComponent is part of the declarations of 2 modules: MasterAClassModule and DetailBClassModule!
Please consider moving DetailBClassDeleteDialogComponent to a higher module that imports MasterAClassModule and DetailBClassModule. 
You can also create a new NgModule that exports and includes DetailBClassDeleteDialogComponent then import that NgModule in MasterAClassModule and DetailBClassModule.

How do I resolve this issue?

Answer №1

An easy fix is to duplicate the module (without sharing across pages) and implement this duplicate in the specific section.

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

Learning the implementation of uib-tabset in Angular 2 with ng-bootstrap

Currently, I am working on an angular2 project and I am curious to know if there is a way to utilize uib-tabset in angular2. In the past, when I was using angularjs, I could easily use ng-bootstrap. This allowed me to incorporate <uib-tabset></u ...

Ways to induce scrolling in an overflow-y container

Is there a way to create an offset scroll within a div that contains a list generated by ngFor? I attempted the following on the div with overflow-y: @ViewChild('list') listRef: ElementRef; Then, upon clicking, I tried implementing this with s ...

Angular Igx-calendar User Interface Component

I need assistance with implementing a form that includes a calendar for users to select specific dates. Below is the code snippet: Here is the HTML component file (about.component.html): <form [formGroup]="angForm" class="form-element"> <d ...

Troubleshooting: Vue and TypeScript Components Not Communicating

Vue is still fairly new to me and I'm struggling with this issue. Despite following code examples, my implementation doesn't seem to be working correctly. The component I defined looks like this: <template> <div class="row"> ...

Could Angular2's Http Get method exclusively handle Json data?

mma-api.service.ts getAthletes() { return this.http.get('http://mma-data-api.mma.com/api/v3/athletes') .map(res => res.json()); } athlete.component.ts data: string; constructor(private mmaApiService: MmaApiService) ...

Next.js does not recognize Typescript Context

I encountered an unexpected custom error while trying to implement custom error notifications in my form. The custom context I set up for this functionality does not seem to be working as intended, resulting in a thrown error for its non-existence. My deve ...

Leveraging WebWorkers in Typescript alongside Webpack and worker-loader without the need for custom loader strings

I've been trying to implement web workers with Typescript and Webpack's worker-loader smoothly. The documentation shows an example of achieving this using a custom module declaration, but it requires the webpack syntax worker-loader!./myWorker. ...

Using the correct classpath in the @PropertySource directive

I currently have a microservice named "microservice-porting.jar" located within the "/opt/microservice-porting/" directory. Within this directory, there is a config folder containing an application properties file named application.yml. The directory stru ...

Using a pipe in multiple modules can lead to either NG6007 (having the same pipe declaration in more than one NgModule) or NG6002 (failing to resolve the pipe to an NgModule

My Pipe is located in apps\administrator\src\app\modules\messenger\pipes\custom-message.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; /** * Pipe for Custom Message for boolean */ @Pipe({ name ...

What steps can be taken to properly set up routing in Angular 4 in a way that organizes feature-modules routes as children in the

Organizational layout of projects: /app app.module.ts app.routing.ts : : /dashboardModule /manage-productModule manage-product.module.ts manage-product.routing.ts Within 'app.routing.ts' [ { path : '&a ...

Derivation of the general function parameter

To provide a solution to this problem, let's consider the example below where a function is used. The function returns the same type that it accepts as the first argument: function sample<U>(argument: (details: U) => U) { return null; } ...

How to only disable checkboxes that are currently checked in Angular 8

click here to view an image**I would like to know how I can disable only the selected/checked items on a p-listbox in Angular 8. Is it possible to achieve this by adding a specific property or using CSS? Currently, when I try to add the [disabled] proper ...

There was a problem locating the animation entry named "routeAnimation" within the app: [ERROR ->]<app></app>. This issue occurred at Directive e within the e_Host@0:0

I'm currently working on implementing animations during route changes. Here is my code snippet: @Component({ selector: 'app', encapsulation: ViewEncapsulation.None, styleUrls: [ './app.css' ], template: totTemplate, ...

Utilizing distinct AngularJS controller files within a Laravel&Angular collaboration project

I attempted to implement this solution: However, I encountered the following error: GET http://localhost:8000/js/TaskController.js net::ERR_ABORTED 404 (Not Found) Afterwards, I explored another solution: https://github.com/angular/angular-cli/issues ...

Flattening an array of Map in Typescript involves combining all the

I am working with an array containing entries of type Map<string, number> Is there a way to flatten this array into a single map? Map<string, number>[] converted to Map<string, number> Appreciate any help on this matter. ...

tinyMCE5 has a quirky habit of inserting p tags without warning, but only when using

My editor with tinymce5 works well on Chrome and other browsers, but in Mozilla Firefox each line in the editor gets an additional p tag. I am using it with Angular. Currently, I have initialized the editor like this: <editor name="resultEditor" ...

Substitute Customized Interface Type Identifier

I am working on creating a versatile function interface for functor map while respecting the provided interface. In the code snippet below, my goal is to ensure that the value of mb is of type Maybe<number>, rather than the actual type Functor<num ...

Testing Your Angular 7 Code: Unit Testing Made Easy

I am currently working on developing unit tests for this angular script: export class DataService { private csrfToken: string = ''; private isContentShown: BehaviorSubject<boolean> = new BehaviorSubject(true); constructor(private h ...

Having trouble with the Angular Language Service extension in VS Code for Angular-16?

Upon transitioning to Angular 16, I encountered errors while attempting to edit the components HTML due to the malfunctioning of the Angular Language Service extension. [Info - 09:41:11] Angular language server process ID: 18032 [Info - 09:41:11] Using t ...

Allow web applications in Apache ServiceMix to communicate across different domains by enabling Cross

My current project involves deploying an angular2 webapp in servicemix as a war file. As a result, the app runs on the localhost:8181/angular2webapp URL. Additionally, I have a bundle installed for handling REST requests, which essentially functions as a c ...