Getting error in child while doing mapping of two components in angular 5 and trying to populate menumodel in child

Question

I am very new in angular. I am trying to achieve as menubar is populated from home and menumodel is bound with home.component.html but I have another tab applyTab which show some value from tree structure at toggle. so I have to populate one submenu if applytab is opened and the same value shown from the node. I am trying to populate menumodel in apply tab and want show value while calling a method which is being called already in the apply tab. I got this error while doing the mapping.

Below is my current approach

in apply Tab

import { HomeComponent } from 'app/home/home.component';


@Input() public home: HomeComponent;

this.home.menuModel =  this.items = [{
  label: 'Add',
  items: [{
    label: 'Tree', 
  },
    { label: 'Show ID', 
    command: (event) => {
     this.toggleNodeDisplay();
  }
  }
  ]
}
];

I am getting this below error while doing mapping of two components.

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

at syntaxError (compiler.js:485) at CompileMetadataResolver._addTypeToModule (compiler.js:15373) at eval (compiler.js:15245) at Array.forEach () at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15236) at JitCompiler._loadModules (compiler.js:34226) at JitCompiler._compileModuleAndComponents (compiler.js:34187) at JitCompiler.compileModuleAsync (compiler.js:34081) at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230) at eval (core.js:6589) at syntaxError (compiler.js:485) at CompileMetadataResolver._addTypeToModule (compiler.js:15373) at eval (compiler.js:15245) at Array.forEach () at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15236) at JitCompiler._loadModules (compiler.js:34226) at JitCompiler._compileModuleAndComponents (compiler.js:34187) at JitCompiler.compileModuleAsync (compiler.js:34081) at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:230) at eval (core.js:6589) at resolvePromise (zone.js:824) at resolvePromise (zone.js:795) at eval (zone.js:873) at ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.js:4747) at ZoneDelegate.invokeTask (zone.js:424) at Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at ZoneTask.invokeTask [as invoke] (zone.js:503) at invokeTask (zone.js:1540) defaultErrorLogger @ core.js:1427 ErrorHandler.handleError @ core.js:1488 next @ core.js:5503 schedulerFn @ core.js:4342 SafeSubscriber.__tryOrUnsub @ Subscriber.js:239 SafeSubscriber.next @ Subscriber.js:186 Subscriber._next @ Subscriber.js:127 Subscriber.next @ Subscriber.js:91 Subject.next @ Subject.js:56 EventEmitter.emit @ core.js:4322 (anonymous) @ core.js:4778 ZoneDelegate.invoke @ zone.js:392 Zone.run @ zone.js:142 NgZone.runOutsideAngular @ core.js:4704 onHandleError @ core.js:4778 ZoneDelegate.handleError @ zone.js:396 Zone.runGuarded @ zone.js:158 _loop_1 @ zone.js:702 api.microtaskDrainDone @ zone.js:711 drainMicroTaskQueue @ zone.js:610 ZoneTask.invokeTask @ zone.js:503 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566

Arjun Panicker Arjun Panicker · Accepted Answer · 2018-03-22T06:04:28

Basically what this error means is that your HomeComponent has been declared in both HomeModule and in ApplyModule.

A component should only be declared in one module.

You can remove the declaration of your HomeComponent from both these modules add add it in the AppModule and import both the modules in your AppModule.

This way, your error will be resolved.

Getting error in child while doing mapping of two components in angular 5 and trying to populate menumodel in child

1 Answers