title: Angular 2: Module not found: Error: Can't resolve
body: <p>I have a simple app created with Angular-CLI, I wanted to refactor and move the app.component.ts code in separate component file and started to get a nasty error: </p>
  
  <blockquote>
    <p>Module not found: Error: Can't resolve on './sb/sb.component.html' (
    my SBComponent).  Under the</p>
  </blockquote>
  
  <p>This what i have:</p>
  
  <p>app.module:</p>
  
  <pre><code>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 { SBComponent  } from './sb/sb.component'
  
  @NgModule({
    declarations: [
      AppComponent, SBComponent  
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NgModule,ElementRef, ViewChild, AfterViewInit} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent  {
  
  
  }
  </code></pre>
  
  <p>new component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { NgModule,ElementRef, ViewChild, AfterViewInit, AfterContentInit} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  
  
  @Component({
  
      selector: 'app-sb',
      templateUrl: './sb/sb.component.html'
  })
  export class SBComponent  {
  
  
  
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>