각도 2 : 모듈을 찾을 수 없습니다 오류 :

Question

나는 불쾌한을하기 시작 각도-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 같은 폴더를 가리 키도록해야합니다. 다음과 같이 할 수 있습니다.

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

Answer 2

이 답변은이 질문에 늦을 수 있지만 실제로이 문제에 직면 한 다른 사용자를위한 것입니다. 우리는 올바른 대답을 줄 필요가있다. 그러한 질문에. 우리는 외부 HTML과 CSS 파일의 구성 요소 상대 경로를 사용하는 경우

이 문제는 매우 알고있다. 절대 경로 및 상대 경로의 문제는 구성 요소에 메타 데이터 ModuleId를 추가하여 해결할 수 있습니다.

ModuleId의 기능은 무엇입니까? 의 moduleID이 ModuleId 값은 구성 요소 전에 완전한 구성 요소 경로를 평가하기 위해 각도 반사 프로세스와 metadata_resolver 구성 요소에 의해 사용되는

[모듈 파일이 실제로로드] 구성 요소 클래스 의 절대 URL을 포함

그 사용이 매우 편리을 구성한다. @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 { 

}