1

I have a module with a couple of components declared and when I use the directive syntax in the template, Angular can't 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>
1
  • please post TestCellMapComponent code also. Commented Oct 5, 2016 at 15:30

1 Answer 1

1

You have a problem with TestCellMapComponent selector

<h1>                                                                                                                                                                                                                                          
  {{title}}                                                                                                                                                                                                                                   
  <app-test-cell-map></app-test-cell-map>      //<<<<===== changed                                                                                                                                                                                                                                                   
</h1>
Sign up to request clarification or add additional context in comments.

3 Comments

Yeah this is the answer -> I was using Angular-CLI and for some reason it adds "app" to the name in the selector in the sub component
Okay. Happens !
The reason is that this is configured in the angular-cli.json in prefix.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.