角2：モジュールが見つかりません：エラー：解決できません

Question

Angular-CLIで作成された簡単なアプリケーションをリファクタリングし、app.component.tsコードを別のコンポーネントファイルに移動して、エラー：

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

この私が持っているもの：

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 { 


} 

新しいコンポーネント：

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 { 



} 

任意の助けいただければ幸いです！

Answer 1

コンポーネントが同じディレクトリにある場合は、templateUrlも同じフォルダに指定する必要があります。あなたがそれを行う方法は次のとおりです。

Answer 2

この回答は遅くなる可能性がありますが、これは実際にこの問題に直面している他のユーザー向けです。正しい答えを与える必要があります。そのような質問に。

この問題は、外部のhtmlファイルとcssファイルにコンポーネントの相対パスを使用している場合に非常にわかります。絶対パスと相対パスの問題は、コンポーネントにメタデータModuleIdを追加するだけで解決できます。

ModuleIdは何をしていますか？モジュールIDは、このModuleId値はコンポーネントの前に完全修飾成分のパスを評価するために角度反射プロセスおよびmetadata_resolverコンポーネントによって使用さ

[モジュール・ファイルが実際にロードされている]の成分クラスの絶対URLが含まれてい構築されます

非常に使いやすいです。 @Component装飾にもう1つの項目を追加するだけです。以下のようにフルコード。

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

}