I am facing the problem in angular 4.4 , In my app, I have hierarchical view. In which I have created a

:= module 1 -> module 2 -> my ponent.

I have declared everything correctly. , But still I'm getting error.

1. Declared ponent.
2. Imported it into other module.
3. selector name is same.
4. Exported ponent in module 2.
5. Imported module 2 in module 1.

What could be the catch? Component Code: Admin -> Configuration -> myponent //My ponent

import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'test-myponent',
  templateUrl: './myponentponent.html',
  styleUrls: ['./myponentponent.scss']
})
export class MyComponentComponent implements OnInit {
  @ViewChild('myComponentTable')

  constructor() {
    }
  ngOnInit() {
//init functionality
}
}

// configure module code 
import { NgModule,Component } from '@angular/core';
import { CommonModule } from '@angular/mon';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MyComponentComponent } from './myponent/myponentponent';
@NgModule({
  imports: [
    CommonModule,
    WidgetsModule,
    FormsModule,
    NgbModule
  ],
  declarations: [
    MyComponent
  ],
  providers: [
  ],
  exports: [
    MyComponent
  ]
})
export class ConfigurationModule { }

//Main module admin
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/mon';
import { ConfigurationModule } from './configuration/configuration.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MyComponentComponent } from './configuration/myponent/myponentponent';
import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    CommonModule,
    NgbModule,
    FormsModule,
    ConfigurationModule
  ],
  declarations: [
  ],
  exports: [
     ]
})
export class AdminModule { }

and I am calling that template in another file
//Test file html 
    <ng-template>
          <test-myponent></test-myponent>
      </ng-template> 

I am facing the problem in angular 4.4 , In my app, I have hierarchical view. In which I have created a

:= module 1 -> module 2 -> my ponent.

I have declared everything correctly. , But still I'm getting error.

1. Declared ponent.
2. Imported it into other module.
3. selector name is same.
4. Exported ponent in module 2.
5. Imported module 2 in module 1.

What could be the catch? Component Code: Admin -> Configuration -> myponent //My ponent

import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'test-myponent',
  templateUrl: './myponent.ponent.html',
  styleUrls: ['./myponent.ponent.scss']
})
export class MyComponentComponent implements OnInit {
  @ViewChild('myComponentTable')

  constructor() {
    }
  ngOnInit() {
//init functionality
}
}

// configure module code 
import { NgModule,Component } from '@angular/core';
import { CommonModule } from '@angular/mon';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MyComponentComponent } from './myponent/myponent.ponent';
@NgModule({
  imports: [
    CommonModule,
    WidgetsModule,
    FormsModule,
    NgbModule
  ],
  declarations: [
    MyComponent
  ],
  providers: [
  ],
  exports: [
    MyComponent
  ]
})
export class ConfigurationModule { }

//Main module admin
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/mon';
import { ConfigurationModule } from './configuration/configuration.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MyComponentComponent } from './configuration/myponent/myponent.ponent';
import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    CommonModule,
    NgbModule,
    FormsModule,
    ConfigurationModule
  ],
  declarations: [
  ],
  exports: [
     ]
})
export class AdminModule { }

and I am calling that template in another file
//Test file html 
    <ng-template>
          <test-myponent></test-myponent>
      </ng-template> 

• javascript
• angular
• angular2-template

• 1 can you please add code .. – Amol Raje Commented Dec 11, 2017 at 4:59
• @AmolRaje Plz check – Shardul Commented Dec 11, 2017 at 5:56

1 Answer 1

You are not declaring the right ponent the name should be MyComponentComponent in the declerations and exports:

import { MyComponentComponent } from './myponent/myponent.ponent';

declarations: [
    MyComponent //should be MyComponentComponent 
  ],
  providers: [
  ],
  exports: [
    MyComponent //should be MyComponentComponent 
  ]