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文件夹中移动它来解决该问题。