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

Issue with rendering React Toastify

What could be causing NgModel to fail with mat-checkbox and radio buttons in Angular?

Attempting to retrieve JSON data and present it in a grid layout

In React-Native, implement a function that updates one state based on changes in another state

Angular does not seem to support drop and drag events in fullCalendar

Step-by-step guide for deploying an Angular 2 CLI app on GitHub

Tips on showcasing an array as a matrix with a neat line property

What other configurations are necessary to switch the default port of Angular from 4200 to a different number?

The received data object appears to be currently undefined

What is the process for choosing nested colors from a theme in Material UI?

Can you explain to me the significance of `string[7]` in TypeScript?

turning off next.js server side rendering in order to avoid potential window is undefined issues

What is a more efficient way to differentiate a group of interfaces using an object map instead of using a switch statement?

Using Promise.all for multiple function calls

Breaking apart a combination of unions into a collective group of tuples within TypeScript

When utilizing ng2-bootstrap, there is no directive that is defined with the "exportAs" attribute set to "bs-modal"

Encapsulating constructor variables in TypeScript classes through private access modifiers and using public getters

Encountering a "No overload matches this call" error while using React, Typescript, and d3js

Angular 4 - Enabling one checkbox guarantees activation for all

Error: The specified property is not found in type 'never' - occurring with the ngFor loop variable