Call one component in various components. Angular 4

Question

Hello im using Angular 4. I have a component with some html that i want it to be showned in various components. But when i import my module into various others moduels it says that it only can be defined in one module... how can i make it work?

i want param-var to be showned in globales and resumen.

Console Error

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

PARAM VAR MODULE

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { ParamVarRoutingModule } from './param-var-routing.module';
import { ParamVarComponent } from './param-var.component';

import { FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    ParamVarRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [ParamVarComponent,

  ]
})
export class ParamVarModule { }

GLOBALES MODULE

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { GlobalesRoutingModule } from './globales-routing.module';
import { GlobalesComponent } from './globales.component';

import {ParamVarComponent} from '../param-var/param-var.component';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    GlobalesRoutingModule,
    FormsModule,
    ReactiveFormsModule,

  ],
  declarations: [GlobalesComponent,ParamVarComponent,


  ]
})
export class GlobalesModule { }

RESUMEN MODULE

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { ResumenRoutingModule } from './resumen-routing.module';
import { ResumenComponent } from './resumen.component';

import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ParamVarComponent} from '../param-var/param-var.component';

@NgModule({
  imports: [
    CommonModule,
    ResumenRoutingModule,
    FormsModule,
    ReactiveFormsModule,

  ],
  declarations: [ResumenComponent,ParamVarComponent,


  ]
})
export class ResumenModule { }

can you post how you import ParamVarModule into other two modules? — Bo Chen
If you create a module that declares a component, any module that import the said module will have access to that component — LookForAngular
@LookForAngular look this is consoles error: ERROR Error: Uncaught (in promise): Error: Type ParamVarComponent is part of the declarations of 2 modules: GlobalesModule and ResumenModule! Please consider moving ParamVarComponent to a higher module that imports GlobalesModule and ResumenModule. You can also create a new NgModule that exports and includes ParamVarComponent then import that NgModule in GlobalesModule and ResumenModule. — Ixam Deirf

A. Tim A. Tim · Accepted Answer · 2017-07-12T19:44:08

Create new SharedModule (or any other name, but that one matches Angular's Style Guide). Declare and export your ParamVarComponent there. Now you can import SharedModule in any other module in your application as many times as you want. Since ParamVarComponent is exported, you can use it inside of other modules as soon as those modules import SharedModule.

@NgModule({
     imports: [
         CommonModule,
         FormsModule,
         ReactiveFormsModule
    ],
    declarations: [ParamVarComponent],
    exports: [ParamVarComponent]
})
export class SharedModule { }

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        SharedModule 
    ]
})
export class OtherModule#{ }

Call one component in various components. Angular 4

1 Answers