app/product-detail.component.ts(2,22): error TS2307: Cannot find module './product'.
I have tried several solutions but none of them seem to work for me. I am working on a demo app in Angular 2 and encountering this specific error. Any guidance on where my mistake might be would be greatly appreciated. Here is the structure of my code:
Folder structure-
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;
}
product-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);
}
}
mock-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' }
];