Unable to locate module within an Angular 2 TypeScript class

I am experiencing an issue with my TypeScript file, here is a snippet of the code:

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

The problem arises during compilation as it can't locate the Book.cs file. Here is the error message:

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

What's confusing is that I used Visual Studio intellisence to construct the path, so technically it should be correct. My project structure is shown below:

https://i.sstatic.net/ly4yF.png

If anyone could shed some light on what might be going wrong here, I would appreciate it.

Answer №1

It appears that the file is present, but with a .cs extension, indicating that it is a C# file. The TypeScript compiler specifically looks for files with .ts and .d.ts extensions in the specified directories.

To resolve this issue, consider renaming the file to Book.ts and utilizing TypeScript to define the model as needed.

Answer №2

Quoting from the comments

Take a look at the vehicle.cs class here: github.com/mosh-hamedani/vega/blob/master/Core/Models/…. I understand your point, but I'm curious why the author incorporated the cs file in the ts code even though it won't function properly. Have you noticed where it's used? See this link: github.com/mosh-hamedani/vega/blob/…

You're actually referencing two separate files. Check out /ClientApp/app/models/vehicle.ts and /Core/Models/Vehicle.cs. Review the links provided in your comment to verify this. The reason why the application works is because it's linked to a .ts file, not a .cs file with the same name (but different extension and location).

This mix-up just goes to show that even seasoned developers can make mistakes when staring at something for too long—it happens to everyone.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble generating a basic TypeScript definition file

I'm having trouble creating a definition file for vue-moment. While it compiles perfectly in IntelliJ, I encounter an issue with vue-cli build: This dependency was not found: * vue-moment in ./src/main.ts In my package.json, I added: "types": "typ ...

Importing BrowserAnimationsModule in the core module may lead to dysfunctional behavior

When restructuring a larger app, I divided it into modules such as feature modules, core module, and shared module. Utilizing Angular Material required me to import BrowserAnimationsModule, which I initially placed in the Shared Module. Everything function ...

Removing redundant names from an array using Typescript

My task involves retrieving a list of names from an API, but there are many duplicates that need to be filtered out. However, when I attempt to execute the removeDuplicateNames function, it simply returns an empty array. const axios = require('axios&a ...

What is the best way to display one *ngIf="show[i]" at a time?

I have created a card that iterates through an array of data. I implemented a method that inserts an object within an array on line 3 of the HTML. After that, I can loop through the data and view it by using (click)="openSelect(i)" on line 12 of the HTML ...

The module has defined the component locally, however, it has not been made available for

I have developed a collaborative module where I declared and exported the necessary component for use in other modules. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DateslideCompone ...

What is the ideal timing to incorporate an error handler in an Observable?

I find myself uncertain about the best practices for error handling in general. For instance, if I'm already handling errors in my service using catchError, is it necessary to also include an error handler in my subscription? Here's an example o ...

Bootstrap flex: on a single row, one column spans the entire height while the other contains elements that are vertically aligned in the center

I'm having trouble with Bootstrap 4 as I try to vertically align the elements of the right column and create a full-height column on the left with just a background color. I've come across many posts discussing similar issues, but none specific t ...

Angular: Display the output of an InfluxDB API call

I have the InfluxDB API data that I need to present in a table using Angular, but I'm unsure if I should treat it as an object or an array. Does anyone have an example to help me with this? My Angular version is 9. Component: listaCBS_CPU ...

Having trouble setting the InnerHTML property of Null on my Ionic app, what could be the issue?

I'm working on a code to display the remaining time for generating a random code in the DOM. var count = setInterval(function () { var date = new Date(); var currentSecond = date.getSeconds(); ...

Exploring the power of nested components within Angular 2

I am encountering an issue with a module that contains several components, where Angular is unable to locate the component when using the directive syntax in the template. The error message I receive states: 'test-cell-map' is not a known elemen ...

Exchanging information rows between two tables within an Angular application utilizing Angular Material

Recently, I created a sample angular application that includes a popup component. Within this popup component, I have incorporated two tables. The first table displays a list of data rows, while the second table is currently empty. One of the key feature ...

Encountered Error: Rendered an excessive number of hooks beyond the previous render in the framework of Typescript and

I am currently working on integrating Typescript and Context API in an application. Specifically, I am focusing on setting up the Context API for handling login functionality. However, I encountered the following error message: Error: Rendered more hooks ...

Errors in the @babel/types during the ng build process in Angular version 8.2.14

When I execute the command 'ng build' for my Angular App, I encounter the following errors: ERROR in ../node_modules/@types/babel-types/index.d.ts:1769:96 - error TS1144: '{' or ';' expected. 1769 export function assertArrayE ...

What is the process of asynchronously importing a module's exported function using dynamic imports and then executing it?

When working with asynchronous callbacks in a promise promise.then(async callbackResultValue => { //here }) I experimented with this code: const browserd = await import('browser-detect'); if (typeof browserd === 'function') { ...

Destructuring objects with default values from two related interfaces

In my project, I have defined two interfaces called User and BankUser. The structure of the interface for BankUser looks like this: interface BankUser extends User { banks: { [bank_id: string]: string}; isSuper: boolean; } I am working on a function ...

React: Switching PopUp causes the entire component to be re-rendered

Currently, I am in the process of familiarizing myself with React, so I appreciate your patience. I am developing a component using MaterialUI which consists of a grid and a PopOver. A basic mockup of this component is as follows: export const Overview ...

Injecting Basic Data Types into Your Angular 2 Service

I am facing an issue with a basic service that requires a single string parameter. import {Injectable} from 'angular2/core'; @Injectable() export class MyService { constructor(someValue: string) { } } When I remove the string param fro ...

Angular 2 HTTP Request returns status code 0

items.component.ts import {Component, OnInit} from '@angular/core'; import {Item} from './Item'; import {ItemService} from "./item.service"; import {Router} from "@angular/router"; @Component({ moduleId: modu ...

"Unresolved Class / Interface Error: The variable 's' is not defined

Exploring Typescript and Angular2 for the first time has been a learning experience, especially when it comes to classes and interfaces. Take a look at my interface: export interface Discount { codSco: string; desSco: string; } Now I'm atte ...

What's the best way to fix a div to the bottom left corner of the screen?

I have explored various solutions regarding this issue, but none of them seem to meet my specific requirements. What I am trying to achieve is the correct positioning of a div as depicted in the green area in the image. https://i.sstatic.net/O9OMi.png Th ...