Angular 2: Module not found: Error: Can't resolve

Question

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:

Module not found: Error: Can't resolve on './sb/sb.component.html' ( my SBComponent). Under the

This 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!

`sb.component.html` exist inside sb folder ? if they are both in the same folder then try this `./sb.component.html` — Idrees Khan, Mar 04 '17 at 05:24
Yes it exists within the sb folder, app.ts exists outside that folder. — joeCarpenter, Mar 04 '17 at 05:26
inside the `SBComponent` change the `templateUrl` to `templateUrl: './sb.component.html'` — Idrees Khan, Mar 04 '17 at 05:30
Thank u! That worked! I gave one vote, does that count as answered? — joeCarpenter, Mar 04 '17 at 05:40
no..that just means important comment..to count as answered, someone should add it as answer and @eagleEye needs to accept it — Suraj Rao, Mar 04 '17 at 05:47
Thanks @suraj! @DotNet Dreamer can you please add it as an answer so that I can mark it as answered? — joeCarpenter, Mar 04 '17 at 14:47

score 33 · Accepted Answer · answered Mar 07 '17 at 14:25

33

If your component is inside the same directory, then you need to point your templateUrl to the same folder as well. Here is how you can do it:

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

answered Mar 07 '17 at 14:25

Idrees Khan

7,702
18
63
111

score 8 · Answer 2 · edited Sep 30 '19 at 08:15

This problem is very well known, when we are using component relative paths for external html and css files. The problem of absolute path and relative path can be resolved just by adding metadata ModuleId in component.

Now what does ModuleId do? ModuleId contains the absolute URL of the component class [when the module file is actually loaded]

This ModuleId value is used by the Angular reflection processes and the metadata_resolver component to evaluate the fully-qualified component path before the component is constructed

It's very easy to use. Just add one more entry in @Component decorative. Full code example is below.

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

}

This is worked for me: @Component({ moduleId:module.id, selector: 'my-demo', templateUrl: './input-text-validation.html' }) — Hari Gillala, Jan 08 '18 at 16:30

score 5 · Answer 3 · answered Oct 05 '19 at 18:49

5

My problem was the same as questioned here, my solution was quite different

code that was causing problem:

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

here by changing :

styleUrls : ['']

to this:

styles : ['']

helped me remove module not found error, thought someone might get this error due to this silly mistake, that's why shared my solution

answered Oct 05 '19 at 18:49

Ravi Khatri

141
2
4

I was using an in-line template and therefore had to change `templateUrl` to `template` also -- thanks for your answer; found this quickly – Schalton Jul 28 '20 at 03:10
In my case, this issue was also happening along with other problems. I've posted the answer here: https://stackoverflow.com/a/74994465/806202 – Arsen Khachaturyan Jan 03 '23 at 14:09

score 3 · Answer 4 · edited Nov 12 '19 at 22:01

3

Try to give relative path instead of absolute one.

It will fix the Solution.

Like : templateUrl = '../employee/employee.html' in your component.ts

edited Nov 12 '19 at 22:01

Kamuran Sönecek

3,293
2
30
57

answered Aug 08 '18 at 12:05

Sarath potlacheruvu

31
2

score 0 · Answer 5 · answered Jun 24 '20 at 15:33

Ok, above solutions are excellent and must be used to see if it fixes your issue. But the same error message can be displayed if you have set the Template property. I had the issue when I created the component using ng g c and then it had templateUrl but I was writing some test html inside of templateUrl, thinking it is template. Hope this helps

score 0 · Answer 6 · answered Aug 15 '21 at 03:49

Something a react developer showed me. Go to your tsconfig.json and inside the outer curly braces {} where you have all the json options and codes, put this

"include": [
    "src/app"
]
//if all your components files are in app, you can do this so as to make importation easy. You can just call the component. It should work for you.

from here you can easily use import without much slashes / and dots. like in my code,

import { Component, OnInit, Input, Injectable, NgModule } from '@angular/core';
import { products } from "product";
//instead of import { products } from ".../../product"; which will still import but might show error.
import { FormsModule } from '@angular/forms';




@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss'],
  providers:  [
    FormsModule
  ]
})



export class ProductListComponent implements OnInit {

 products = products;


onNotify() {
  window.alert("You will be notified when the product goes on discount")
}

share() {
  window.alert('The Product Has Been Added To Your Cart')
}


  constructor() {

   }

  ngOnInit(): void {
  }

}

score 0 · Answer 7 · answered Jun 01 '23 at 12:28

0

For me change styleUrls : [''] from

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

into styles: [''] solve this problem

answered Jun 01 '23 at 12:28

Mateusz Wąsik

1
2

Angular 2: Module not found: Error: Can't resolve

7 Answers7

Linked