Question

app / product-detail.component.ts（2,22）：错误TS2307：找不到模块'./product'。

我看到很多答案，但对我没有用。我正在创建角度为2的演示应用程序并面临此错误。请建议我在哪里做错了。我的代码是：

文件夹结构 -

app
    app.component.ts
    app.module.ts
    product.service.ts
    product.ts
    product-detail.component.ts
    main.ts
    mock-products.ts
node_modules ...
index.html
package.json
styles.css
systemjs.config.js
tsconfig.json

product.ts -

  // product.ts
    export class product {
      id: number;
      name: string;
    }

产品detail.compenent.ts -

//product-detail.compenent.ts

import {Component,Input} from '@angular/core';
import { Product } from './product';
@Component({
    selector:'my-product-detail',
    template: `
  <div *ngIf="hero">
    <h2>{{product.name}} details!</h2>
    <div><label>id: </label>{{product.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="product.name" placeholder="name"/>
    </div>
  </div>
})

export class ProductDetailComponent{
 @Input()
  product: Product;
}

product.service.ts -

\\product.service.ts

import { Injectable } from '@angular/core';
import { product} from './product';
import { PRODUCTS} from './mock-products'

@Injectable()
export class ProductService{
    getProducts():Promise<product[]>{
        return Promise.resolve(PRODUCTS);
    }
}

模拟products.ts -

//mock-products.ts

import { Product} from './product';

export const PRODUCTS: Product[] = [
  { id: 11, name: 'product1' },
  { id: 12, name: 'product2' },
  { id: 13, name: 'product3' },
  { id: 14, name: 'product4' },
  { id: 15, name: 'product5' },
  { id: 16, name: 'product6' },
  { id: 17, name: 'product7' },
  { id: 18, name: 'product8' },
  { id: 19, name: 'product9' },
  { id: 20, name: 'product10' }
];

Answer 1

您的产品类名称以＆＃39; p＆＃39;开头。不是＆＃39; P＆＃39;。在product-detail.component.ts

中

您必须像product一样导入Product而不是product.service.ts。它们区分大小写。

Answer 2

您必须将类的名称更改为以大写字母开头：

export class Product { //this one
  id: number;
  name: string;
}

Answer 3

product-detail.compenent.ts ，根据您的文件夹结构，您需要import { product } from '@angular/core'。

你可以这样做

import { Product } from './product';   // if in the same directrory

或

import { Product } from '../product';  // if other directory but do accordingly.


import {Component,Input} from '@angular/core';
import { Product } from './product';    // HERE
@Component({
    selector:'my-product-detail',
    template: `
  <div *ngIf="hero">
    <h2>{{product.name}} details!</h2>
    <div><label>id: </label>{{product.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="product.name" placeholder="name"/>
    </div>
  </div>
})

错误TS2307：找不到模块'./product'

3 个答案: