bischoffingston bischoffingston - 6 months ago 49
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';

declarations: [
imports: [
providers: [],
bootstrap: [AppComponent]
export class AppModule { }

This is what the top level component looks like

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

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

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

and its associated template



You have a problem with TestCellMapComponent selector

  <app-test-cell-map></app-test-cell-map>      //<<<<===== changed