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

根據您的目錄結構，您的products文件夾是一步。 你應該嘗試這個導入：

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

或者在app文件夾中移動您的products文件夾

Answer 2

從您的屏幕截圖看， products不在您的app文件夾中。 它高一級，因此打字稿編譯器無法找到它。 應該通過在app文件夾中移動它來解決該問題。