TypeScriptでモジュールエラーが見つかりません

Question

このテンプレートを指令として使用しようとしています。そのために、私はそれを（app.module.ts）にインポートしようとしています。しかし、「TS2307：モジュールが見つかりません」というエラーが表示されます。誰もこのエラーを解決するために私を助けてもらえますか？私もいくつかの画像をアップロードしました。

//app.module.ts 
 

 
import { NgModule } from '@angular/core'; 
 
import { BrowserModule } from '@angular/platform-browser'; 
 

 
import { AppComponent } from './app.component'; 
 

 
import { ProductListComponent } from './products/product-list.component'; 
 

 

 
@NgModule({ 
 
    imports: [ BrowserModule ], 
 
    declarations: [ AppComponent, ProductListComponent ], 
 
    bootstrap: [ AppComponent ] 
 
}) 
 
export class AppModule { } 
 

 
..................................................... 
 

 
//product-list.component.ts 
 

 
import {Component} from '@angular/core'; 
 
@Component({ 
 
    selector: 'pm-products', 
 
    templateUrl: 'app/products/product-list.component.html' 
 
}) 
 

 
export class ProductListComponent { } 
 

 
................................................. 
 

 
//app.component.ts 
 

 
import {Component} from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'pm-app', 
 
    // not quotes for template 
 
    template: ` 
 
    <div><h1> {{pageTitle}} </h1> 
 
      <pm-products></pm-products> 
 
    </div>` 
 
}) 
 

 
export class AppComponent { 
 
    pageTitle: string = 'ACME Product Management'; 
 
}

<!-- 
 
product-list.component.html 
 
--> 
 

 
<div class="panel panel-primary"> 
 
    <div class="panel-heading"> 
 
     Product List 
 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
      <div class="col-md-2">Filter By:</div> 
 
      <div class="col-md-4"> 
 
       <input type="text" /> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-md-6"> 
 
       <h3>Filtered By: </h3> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class='table-responsive'> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th> 
 
         <button class="btn btn-primary">Show Image</button> 
 
        </th> 
 
        <th>Products</th> 
 
        <th>Code</th> 
 
        <th>Available</th> 
 
        <th>Price</th> 
 
        <th>5 Star Rating</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 

 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

Answer 1

の内側にあなたの製品フォルダを移動：あなたは、このインポートを試してみてください。これは1レベル高いので、typescriptコンパイラでは見つけることができません。問題はappフォルダ内で移動することで修正する必要があります。

Answer 2

ディレクトリ構造によると、あなたのproductsフォルダが1つのステップダウンしています。 productsがあなたのappフォルダ内ではないように見える

import { ProductListComponent } from './../products/product-list.component'; 

をまたはあなたのスクリーンショットから、アプリのフォルダ