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

问题

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!

回答1:

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'
})

回答2:

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  {

}

回答3:

Try to give relative path instead of absolute one.

It will fix the Solution.

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

回答4:

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

来源：https://stackoverflow.com/questions/42592436/angular-2-module-not-found-error-cant-resolve

标签

angular

angular2-template

angular2-modules