angular cli：测试期间未知的选择器

Question

I'm learning how to do my first tests with Angular 2, using angular-cli .

When I create a new component MyComponent , then add its selector app-mycomponent into the app template, then all tests fail and say that app-mycomponent is unknown.

This problem occurs only in tests; if I start the app then everything is fine.

My environment:

npm : 3.10.10
node : 6.9.5
angular-cli : 1.0.0-beta.32.3
jasmine-core: 2.5.2
protractor: 5.1.0

Rather than copying tons of config files, here are steps to reproduce:

1. create a new project

    ng new testproj cd testproj 

2. create a component

    ng generate component mycomp 

3. go to ./src/mycomp/mycomp.component.ts and note its selector (should be app-mycomp )

4. edit ./src/app/component.html and add this line:

    <app-mycomp></app-mycomp> 

   where app-mycomp is the selector you saw in step 3.

5. launch the tests:

    ng test 

then here the failures reported :

Error: Template parse errors:
'app-mycomp' is not a known element:
1. If 'app-mycomp' is an Angular component, then verify that it is part of this module.
2. If 'app-mycomp' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
{{title}}</h1>
[ERROR ->]<app-mycomp></app-mycomp>"): AppComponent@3:0

Is it a bug, or have I done something wrong? I've tried manually setting MyComponent as a provider into AppComponent , same problem.

Answer 1

Thanks to comments above I figured out what was going wrong: AppComponent test module didn't knew how to use MyComponent. I don't know yet what is going on under the hood when the test is loaded, anyway we have to specify manually all component dependancies into its test by this way : In app.module.spec.ts, edit beforeEach method that is calling TestBed.configureTestingModule.

before :

beforeEach(() => {
TestBed.configureTestingModule({
  declarations: [ AppComponent ],
});

after :

beforeEach(() => {
TestBed.configureTestingModule({
  declarations: [
    AppComponent , 
    MyComponent
  ],
});