TypeScript cannot find module error

Question

I am trying to use the template as a directive. For that, i am trying to import it to (app.module.ts). But I am getting an error " TS2307: cannot find module". Can anyone please help me to solve this error. I also uploaded some image.

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

Poul Kruijt · Accepted Answer · 2019-04-25 18:05:10Z

12

According to your directory structure, your products folder is one step down. You should try this import:

import { ProductListComponent } from '../products/product-list.component';

Or move your products folder inside your app folder

edited Apr 25, 2019 at 18:05

answered May 16, 2017 at 7:19

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user663031 Over a year ago

Why ./../ instead of just ../?

Philip Rego Over a year ago

./ isn't necessary. ./../ is saying go up a directory, the current directory

fourcube · Accepted Answer · 2017-05-16 07:20:09Z

11

From your screenshot it looks like products is not inside your app folder. It's one level higher so it cannot be found by the typescript compiler. The problem should be fixed by moving it inside the app folder.

answered May 16, 2017 at 7:20

fourcube

7703 silver badges11 bronze badges

Collectives™ on Stack Overflow

TypeScript cannot find module error

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related