How to specify the file path for importing a custom module?

Question

How to specify the file path for importing a custom module?

I am currently learning Angular 2 and encountering an issue with importing a custom module that contains interface declarations. Here is my folder structure:

https://i.stack.imgur.com/heIvn.png

The goal is to import product.interface.ts into a component located at

app/components/product/product.component.ts

. The import statement in the component file looks like this:

import { IProduct, IEmvoProduct } from '../../interfaces/product.interface'

I also attempted:

import { IProduct, IEmvoProduct } from '@app/interfaces/product.interface'

However, the module cannot be found.

The content of product.interface.ts is as follows:

interface IProduct {
    productCode: string;
    description: string;
    lawId: number;
    name: string;
    comment: string;
    emvoProduct?: IEmvoProduct; // ?: Optional.
}

interface IEmvoProduct {
    codingScheme: string;
    name: string;
    commonName: string;
    pharmaForm: string;
    strength: string;
    packType: string;
    packSize: number;
}

The objective is to have these interfaces in a standalone file that can be shared among other components.

How can I successfully import it?

angular typescript

Answer 1

Answer №1

This is the solution you're looking for:

import { IProduct, IEmvoProduct } from '../../interfaces/product.interface'

It seems like you may have forgotten to export IProduct and IEmvoProduct from the product.interface.ts file.

If you encounter the error message: product.interface.ts is not recognized as a module.

You need to add the export keyword before defining interface IProduct and interface IEmvoProduct.

For example:

export interface IProduct {
    productCode: string;
    description: string;
    lawId: number;
    name: string;
    comment: string;
    emvoProduct?: IEmvoProduct; // Optional field.
}

export interface IEmvoProduct {
    codingScheme: string;
    name: string;
    commonName: string;
    pharmaForm: string;
    strength: string;
    packType: string;
    packSize: number;
}

Here's a helpful link for reference:

https://stackblitz.com/edit/angular-export-interface

Answer 2

This is the solution you're looking for:

import { IProduct, IEmvoProduct } from '../../interfaces/product.interface'

It seems like you may have forgotten to export IProduct and IEmvoProduct from the product.interface.ts file.

If you encounter the error message: product.interface.ts is not recognized as a module.

You need to add the export keyword before defining interface IProduct and interface IEmvoProduct.

For example:

export interface IProduct {
    productCode: string;
    description: string;
    lawId: number;
    name: string;
    comment: string;
    emvoProduct?: IEmvoProduct; // Optional field.
}

export interface IEmvoProduct {
    codingScheme: string;
    name: string;
    commonName: string;
    pharmaForm: string;
    strength: string;
    packType: string;
    packSize: number;
}

Here's a helpful link for reference:

https://stackblitz.com/edit/angular-export-interface

How to specify the file path for importing a custom module?

Answer №1

Similar questions

`Is There a Solution When Compilation Fails?`

Incorporating a parameter into a <div> only when the parameter holds a value

What steps do I need to take to create a fresh interface in useState with the help of Typescript

How can I load a separate component.html file using a component.ts file?

The ideal version of firebase for showing messages in the foreground

Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

Tips on how to properly format a DateTime String

Angular leverages property binding to connect properties and attributes in the component template

NextJS compilation sometimes results in undefined errors when using Sass styles

Utilize dynamically generated form fields to upload multiple files at once

Converting Angular 5 select option values to strings is a must

Retrieving the data from a Material UI Slider control

What is the best way to target changing elements displayed by *ngIf?

Retrieving information from Next.js and Typescript with the help of getStaticProps

Upon successfully logging into the app, Azure AD B2C integrated with MSAL and Angular will automatically redirect users to the login page

The concept of Nested TypeScript Map Value Type

Using React and TypeScript to pass member variables

What is the best way to free up memory after receiving responseText in a continuous streaming request?

Challenges arise with dependencies during the installation of MUI

I am encountering a multitude of errors while trying to run the npm install