Using component encapsulated in a module from other module in angular 4

Question

I am developing an angular 4 app and I have two modules, the first module encapsulate some features that I need to use in others modules. For example I have the first module called SRModule I have imported SrCrComponent component:

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

// module imports
import { SrCrComponent} from './sr-cr';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    SrCrComponent
  ],
  declarations: [
    SrCrComponent
  ]
})
export class SRModule {}

I want to use SrCrComponent in other component of another module, but I can get figure out how to use.

In my second module called ReportsModule, I have imported SRModule on it

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CPComponent } from './cp/cp.component';
import { SRModule } from "../sr-module/sr.module";

@NgModule({
  imports: [
    CommonModule,
    SRModule
  ],
  declarations: [
    CPComponent
  ]
})
export class ReportsModule { }

My question here is, how to use SrCrComponent component declared inside CPComponent on ReportsModule?

This is my CPComponent ts file:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-chart-period',
  templateUrl: './chart-period.component.html',
  styleUrls: ['./chart-period.component.css']
})
export class CPComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

In my html of CPComponent I have a sr-gg component but not work,

<h2> Bar Chart</h2>
<sr-gg></sr-gg>

Oviously 'sr-g' is not a known element in ReportsModule, in fac, this is the error that console is showed me, but I don't know where I need to declare or it should be inherit when I import SrCrComponen.

Have tou added selector `sr-cr` in you component else everything seems fine it should work — Babar Hussain, Apr 07 '17 at 22:23
I have fixed some bad names in my code example, I delete some declarations and reduce the length of component name to simplify the example — xzegga, Apr 08 '17 at 00:37
in `CPComponent` you've called `` but in where is `sr-gg` component ? — Babar Hussain, Apr 08 '17 at 17:22

score 2 · Answer 1 · answered Apr 07 '17 at 22:30

ReportsModule imports SRModule and thereby everything from SRModule that is pointed out in exports : [] which in your case is SrCrComponent. I assume CpComponent should be part of ReportsModule, i.e CpComponent should be mentioned in declarations : [] for ReportsModule. You mention sr-gg as a component so if that should be declared in SrModule then that exports should look like exports : [SrCrComponent, SrGGComponent]

 @NgModule({
      imports: [
         CommonModule
      ],
      exports: [
         SrCrComponent, SrGGComponent
      ],
      declarations: [
        SrCrComponent, SrGGComponent
      ]
})
export class SRModule {}

and

    @NgModule({
      imports: [
        CommonModule,
        SRModule
      ],
      declarations: [
        ReportsComponent,
        ChartPeriodComponent,
        ChartSegmentationComponent,
        CpComponent
      ]

})

export class ReportsModule { }

Then it should work

Using component encapsulated in a module from other module in angular 4

1 Answers1