0

Before I begin, I have tried every possible stackoverflow/github solution that I've found online. None of them work. Most of the questions involved the user creating a custom module and there was a configuration issue. Mine is not the case as this is a brand new project, with only 1 component generated and being displayed. I've followed the angular tour of heroes twice so far and it has worked. I have created an existing project already and it was working for a few days then suddenly stopped. I will also add that when I am navigating to the website, there are no console errors, everything runs successfully. There are only issues when I run ng test.

Problem

I created a new angular project because my old project suddenly ran into the problem where I can't use the selector of a newly generated component as an html tag in the app.component.html file. This is the error I get when I run ng-test:

Error: Template parse errors:
'app-test' is not a known element:
1. If 'app-test' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Steps

I ran the command ng new test-project to create a new angular project. I went inside the folder, and ran ng generate component test. This created my test component successfully.

Here is the test.component.ts file:

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

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

  constructor() { }

  ngOnInit() {
  }

}

Here is the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';

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

Lastly, here is my app.component.html file:

<app-test></app-test>
Michael
  • 3,093
  • 7
  • 39
  • 83
  • 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:10

1 Answers1

1

If you didn't declare this component into your testbed, then the testbed isn't aware that this component exists.

In your test, provide your new component like this 

TestBed.configureTestingModule({
  declarations: [AppComponent, TestComponent],
})
  .compileComponents();
  • Thank you so much! I find it very surprising that the angular-cli doesn't automatically add the necessary components to the tests, since it auto-populates just about everything else when you create a component. Also, does this mean that for every module/component I add to the declarations/imports section in NgModule, I need to add to the app.component.spec.ts file? – Michael Jul 04 '18 at 14:09
  • 1
    It doesn't add the component to the testbed because you're supposed to mock the component, not use the real one. And yes, for every dependency you add to your component, you should add (a mock of) it ot your testbed. –  Jul 04 '18 at 14:12