Angular 2: module not found: error: cannot resolve

Question

I have a simple application created using Angular -CLI, I wanted to reorganize and move the app.component.ts code into a separate component file and started to get an unpleasant error:

Module not found: Error: Cannot resolve "./sb/sb.component.html" (my SBComponent). Under

This is what I have:

app.module:

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 { }

app.component:

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  {


}

new component:

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  {



}

Any help would be greatly appreciated!

Answer 1

If your component is inside the same directory, you need to point your templateUrlto the same folder. Here's how you can do it:

@Component({
    selector: 'app-sb',
    templateUrl: './sb.component.html'
})

Answer 2

, HTML CSS. , ModuleId .

ModuleId? ModuleId URL- [ ]

ModuleId

. @Component . .

 @Component({
  moduleId: module.id,    // fully resolved filename; defined at module load time
  selector: 'app-sb',
  templateUrl: 'sb.component.html' //Observe this.
})
export class SBComponent  {

}

Answer 3

.

: templateUrl = '../employee/employee.html' component.ts

Answer 4

, ,

, :

@Component({
    selector : 'app-header',
    templateUrl : './header.component.html',
    styleUrls : ['']
})

here by changing:

styleUrls : ['']

on this:

styles : ['']

helped me remove the not found module, thought someone might get this error due to this stupid error, so shared my solution