Angular 错误TS2307:找不到模块'/产品'；

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

我看到了很多答案，但对我来说并不奏效。我正在angular 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
    export class product {
      id: number;
      name: string;
    }

//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

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);
    }
}

//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' }
];

product.ts-

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
    export class product {
      id: number;
      name: string;
    }

//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

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);
    }
}

//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' }
];

产品详细信息.compent.ts-

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
    export class product {
      id: number;
      name: string;
    }

//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

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);
    }
}

//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' }
];

---

您的产品类名以“p”而不是“p”开头。 在您的

产品详细信息.component.ts

您必须导入

产品

而不是

产品

中的

产品.service.ts

。

---

它们区分大小写。

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

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

---

在product detail.compent.ts中，您需要根据文件夹结构

从“@angular/core”

导入{product}

你可以这样做

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

或

从“../Product”导入{Product}；//如果是其他目录，则执行相应操作。
从“@angular/core”导入{Component，Input}；
从“./Product”；/”导入{Product}在这里
@组成部分({
选择器：'my-product-detail'，
模板：`
{{product.name}}详细信息！
id:{{product.id}
姓名：
})

您的产品类名以“p”而不是“p”开头，但我使用的是从“/product”导入的{product}；这是错误的：在product.service.ts中。但是错误发生在product detail.component.ts（2,22）no.中。如果您的类名为“product”，则在

product.service.ts

中正确导入，请尝试在product.component或@PierreDuc solution中更改导入