web-dev-qa-db-ja.com

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

私はAngular-CLIで作成されたシンプルなアプリを持っていますが、app.component.tsコードを別のコンポーネントファイルにリファクタリングして移動し、厄介なエラーが発生し始めました：

モジュールが見つかりません：エラー： './sb/sb.component.html'（私のSBComponent）で解決できません。下

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

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  {



}

どんな助けも大歓迎です！

angularangular2-templateangular2-modules
11
joeCarpenter

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

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

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

さて、ModuleIdは何をしますか？ ModuleIdには、コンポーネントクラスの絶対URLが含まれます[モジュールファイルが実際にロードされるとき]

これ ModuleId 値はAngularリフレクションプロセスとmetadata_resolverコンポーネントによって使用され、コンポーネントが構築される前に完全修飾コンポーネントパスを評価します

使い方はとても簡単です。 @ComponentDecorativeにもう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  {

}
6
Jaydip Jadhav

絶対パスではなく相対パスを指定してください。

ソリューションを修正します

のような：templateUrl = '../employee/employee.html'あなたのcomponent.ts

2
Sarath potlacheruvu

私の問題はここで質問したものと同じでした、私の解決策はかなり異なっていました

問題を引き起こしていたコード：

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

ここで変更することにより：

styleUrls : ['']

これに：

styles : ['']

モジュールが見つからないというエラーを削除するのを手伝い、この愚かな間違いのために誰かがこのエラーを受け取る可能性があると思ったので、私のソリューションを共有しました

0
Ravi Khatri