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