ng test ' is not a known element'

Question

I am working with angular 2 and I'm receiving this message when I run a test with ng test --build=false --watch=false:

'app-feed' is not a known element:
1. If 'app-feed' is an Angular component, then verify that it is part of this mod
2. If 'app-feed' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@Ng
[ERROR ->]<app-feed></app-feed>**

app.component.html file content:

<app-menu></app-menu>
<app-feed></app-feed>

app.component.ts file content:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  wonderfulProperty = 'Hola';
}

app.module.ts file content:

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 { MenuComponent } from './menu/menu.component';
import { FeedComponent } from './feed/feed.component';

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

feed.component.ts file content:

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

@Component({
  selector: 'app-feed',
  templateUrl: './feed.component.html',
  styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

Can someone help me figure out how to fix this?

Possible duplicate of [Angular 2 Karma Test 'component-name' is not a known element](https://stackoverflow.com/questions/44504468/angular-2-karma-test-component-name-is-not-a-known-element) — Kim Kern, Aug 02 '18 at 01:05

Chris Vincent · Answer 1 · 2017-05-20T07:10:30.217

As stated elsewhere, you should post your spec file.

I found a way to address an issue very similar to this by using modules. Create a new module at feed/feed.module.ts and import your FeedComponent inside of it:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FeedComponent} from './feed.component';

@ngModule({
    imports: [CommonModule],
    declarations: [FeedComponent],
    exports: [FeedComponent]
})
export class FeedModule {}

Change your app.module.ts to this:

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

import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';

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

Then, include the feed module within the spec file:

import {FeedModule} from 'path/to/feed.module';
...
TestBed.configureTestingModule({
    ...
    imports: [FeedModule, ...]
    ...
})

ng test ' is not a known element'

1 Answers1