bischoffingston bischoffingston - 2 months ago 17
TypeScript Question

Using nested components in Angular 2

I have a module with a couple components declared and when I use the directive syntax in the template angular cant find the component - I get this error

'test-cell-map' is not a known element:



  1. If 'test-cell-map' is an Angular component, then verify that it is part of this module.

  2. If 'test-cell-map' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.



Here is the component module,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { TestCellMapComponent } from './test-cell-map/test-cell-map.component';

@NgModule({
declarations: [
AppComponent,
TestCellMapComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


This is what the top level component looks like

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']

})
export class AppComponent {
title = 'app works!';
}


and its associated template

<h1>
{{title}}
<test-cell-map></test-cell-map>
</h1>

Answer

You have a problem with TestCellMapComponent selector

<h1>                                                                                                                                                                                                                                          
  {{title}}                                                                                                                                                                                                                                   
  <app-test-cell-map></app-test-cell-map>      //<<<<===== changed                                                                                                                                                                                                                                                   
</h1>