title: Angular 2 RC6: 'pattern-list' is not a known element
body: <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>