Cannot find module in Angular2 typescript class

Question

I have a typescript file with the following content:

import { Component, OnInit } from '@angular/core';
import { BookService } from "../../services/book.service";
import { Book } from "../../Models/book";


@Component({
    selector: 'app-book-list',
    templateUrl: './book-list.component.html',
    styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {


    books: Book[];

    constructor(private bookService: BookService) {

    }

    ngOnInit() {
        this.bookService.getBooks()
            .subscribe(books => this.books = books);
    }
}

When I compile, it is complaining that it doesn't know where the Book.cs file is.

Here's the error:

(TS) Cannot find Module '../../Models/Book'

However, when I was constructing this path, I constructed it through the visual studio intellisence. So, it damn well knows where it is.

Here's my project structure:

Can someone tell me what am I doing wrong here?

Do you have another file named Book with a different extension in the same folder? — bugs
– bugs, Commented May 8, 2018 at 12:42
Not at all. I have book.service.ts which under services folder. — mcfred
– mcfred, Commented May 8, 2018 at 12:48
And I suppose you are properly exporting the module in Book.cs ? — bugs
– bugs, Commented May 8, 2018 at 12:50
You can't combine c# and typescript. Typescript = is transpiled into javascript and this is executed in the web browser. c# = is compiled into an executable or library and is executed by the web server (like IIS) or by the O/S. — Igor
– Igor, Commented May 8, 2018 at 12:50
I was just following this tutorial and this guy did it like that. He used the Vehicle.cs class inside the typescript class. Here's the link: github.com/mosh-hamedani/vega/commit/… — mcfred
– mcfred, Commented May 8, 2018 at 13:32

Hristo Georgiev · Accepted Answer · 2018-05-08 12:54:19Z

2

It seems like the file itself exists, but it has a .cs extension, meaning that it's a C# file. The TypeScript compiler looks only for .ts and .d.ts files when searching in the specified directories.

You should rename the file Book.ts and use TypeScript to define (from what I infer) the model

answered May 8, 2018 at 12:54

Hristo Georgiev

2,5191 gold badge19 silver badges23 bronze badges

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

Comments

Igor · Accepted Answer · 2018-05-08 20:07:31Z

1

From the comments

Here is the vehicle.cs class: github.com/mosh-hamedani/vega/blob/master/Core/Models/…. I do understand what you are saying, but I just want to know why the author used the cs file in the ts code knowing well tht it wont work. Did you see where he used it? Check this: github.com/mosh-hamedani/vega/blob/…

You are looking at 2 different files. /ClientApp/app/models/vehicle.ts and /Core/Models/Vehicle.cs. You can check the links you posted in your comment to see for yourself. That is why this application transpiles/works, because it is pointing to a .ts file and not a .cs file which happens to have the same name (but not extension or location for that matter).

Chalk this one up to one of those mistakes that you make when you have been looking at something for too long, it happens to the best of us.

answered May 8, 2018 at 20:07

Igor

62.5k10 gold badges111 silver badges181 bronze badges

1 Comment

mcfred Over a year ago

Wow! Amazing! Thank you for opening my eyes. You are right, I spent too much time on this.

Collectives™ on Stack Overflow

Cannot find module in Angular2 typescript class

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related