Angular 2 RC6: 'pattern-list' is not a known element
<p>Simply running the application I get no error and it works just fine, but when I run my tests I get the following error:</p>

<pre><code>'pattern-list' is not a known element:
  1. If 'pattern-list' is an Angular component, then verify that it is part of this module.
  2. If 'pattern-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
         [ERROR -&gt;]&lt;pattern-list&gt;&lt;/pattern-list&gt;
</code></pre>

<p>I had this issue first when I just run the application with 'npm-start' and I solved it adding the required component to app.module in the declarations section. But now as I want to test I get the same error and I don't know why. 
Here is my code:</p>

<p>app.module.ts</p>

<pre><code>@NgModule({
  imports: [ BrowserModule, FormsModule, HttpModule, ReactiveFormsModule ],
  declarations: [ AppComponent, PatternListComponent, PatternDetailComponent, WidgetListComponent,
    FormComponent, DefaultWidget, LabelComponent, CheckboxWidget ],
  bootstrap: [ AppComponent ],
  providers: [ WidgetService ]
})
export class AppModule { }
</code></pre>

<p>app.component.ts</p>

<pre><code>@Component({
     selector: 'my-app',
     template: `
           &lt;pattern-list&gt;&lt;/pattern-list&gt;
          `
    })
    export class AppComponent { }
</code></pre>

<p>pattern.list.component:</p>

<pre><code>@Component({
  selector: 'pattern-list',
  template: `
    &lt;div class="patterns"&gt;
      &lt;pattern-detail *ngFor="let p of patternDetails" [metadata]="p" 
        (selectPattern)="selectPattern(p)"&gt;&lt;/pattern-detail&gt;
    &lt;/div&gt;
    &lt;div *ngIf="selectedPattern" class="widget-list"&gt;
      &lt;widget-list [pattern]="selectedPattern"&gt;
      &lt;/widget-list&gt;
    &lt;/div&gt;
  `,
  styleUrls: ['/css/styles.css']
})
export class PatternListComponent implements OnInit{
  selectedPattern: PatternDetails;
  constructor(private http: Http) {
  }

  patternDetails: PatternDetails[];

  ngOnInit() {
    this.getPatterns();
  }

  getPatterns() {
    this.http.get('/app/assets/patternDetails.json')
      .map((res:Response) =&gt; res.json() )
      .subscribe(
        data =&gt; { this.patternDetails = data.patternList; },
        err =&gt; console.error('The problem is: ' + err),
        () =&gt; console.log('done')
      );
    console.log(this.patternDetails);
  }

  selectPattern(pattern: PatternDetails) {
    this.selectedPattern = pattern;
    this.setSelectedProperty(pattern);
  }

  setSelectedProperty(selectedPattern: PatternDetails) {
    for (var p in this.patternDetails) {
      if (this.patternDetails[p] == selectedPattern) {
        this.patternDetails[p].selected = true;
      } else {
        this.patternDetails[p].selected = false;
      }
    }
  }
}
</code></pre>

<p>My test file: app.component.spec.ts</p>

<pre><code>describe('AppComponent with TCB', function () {
  beforeEach(() =&gt; {
    TestBed.configureTestingModule({declarations: [AppComponent]});
  });
  describe('asdfasdf', function () {
    beforeEach(async(() =&gt; {
      TestBed.compileComponents();
    }));
    it('should instantiate component', () =&gt; {
      let fixture = TestBed.createComponent(AppComponent);
      expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
    });
  });
});
</code></pre>

<p>I'm using webpack, I'm not sure if that matters.</p>