Tips on exporting a basic TypeScript class in an Angular 4 module

I am facing a challenge with packaging a TypeScript class as part of an Angular module for exporting it as a library using ng-packagr.

For instance, here is my class definition -

export class Params {
    language: string ;
    country: string ;
    variant:  string ;
    dateFormat:  string ;
    briefDateTimeFormat:  string ;
    decimalFormat:  string ;
}

This is how I have defined my module -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Params } from '../params/params';
import { LoginService } from '../sso/login.service';

@NgModule({
  imports: [CommonModule],
  exports: [Params],
  providers: [LoginService]
  declarations: [Params, LoginService]
})
export class FoundationModule { }

However, when trying to export the FoundationModule in public-api.ts of ng-packagr, I encounter the following error -

BUILD ERROR
: Unexpected value 'Params in .../params/params.ts' declared by the module 'FoundationModule' in '.../foundation.module.ts'. Please add a @Pipe/@Directive/@Component annotation.

I am seeking guidance on how to successfully package a single class within an Angular module.

Answer №1

Consider the following two choices:

export class Params {
language: string;
country: string;
variant: string;
dateFormat: string;
briefDateTimeFormat: string;
decimalFormat: string;
constructor(obj: any) {
    this.language = obj && obj.language || null;
    this.country = obj && obj.country || null;
    this.variant = obj && obj.variant || null;
    this.dateFormat = obj && obj.dateFormat || null;
    this.briefDateTimeFormat = obj && obj.briefDateTimeFormat || null;
    this.decimalFormat = obj && obj.decimalFormat || null;
}

}

or

export interface Params {
    language: string;
    country: string;
    variant: string;
    dateFormat: string;
    briefDateTimeFormat: string;
    decimalFormat: string;
}

It is important to note that, as mentioned in the previous response, classes or interfaces should not be exported within the module.

Reference on Stackoverflow

Further explanation in Angular documentation

Answer №2

The issue lies within your module definition. It is necessary to import Params directly into every component or service that necessitates the class.

public-api.ts

import { Params } from '../params/params';

...
newVariable: Params = {
  language: 'my language',
  ...
}

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

How can I access members outside of a class without a name in Typescript?

I recently developed an "anonymous" class inspired by this insightful discussion on Typescript anonymous classes. However, I'm facing a challenge in accessing the outer scope members. Here's a snippet of my code for context: class BaseCounter { ...

The Angular Observable continues to show an array instead of a single string value

The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...

Steps for transferring an uploaded .CSV file to a Web service

I'm exploring the process of sending a file uploaded from the UI (angular) to a .NET web service in order for it to parse a CSV file and create a list of objects. My current understanding of the logic flow is: File upload ---> Web Service (parse ...

Error: The property ɵfac cannot be redefined within angular

core.js:27478 Uncaught TypeError: Cannot redefine property: ɵfac at Function.defineProperty (<anonymous>) at addDirectiveFactoryDef (core.js:27478:1) at compileComponent (core.js:27361:1) at ɵ3$1 (core.js:27674:93) at TypeDecora ...

Tips for creating a TypeScript function that can accept an array of concatenated modifiers with the correct data type

Can I modify data using a chain of function modifiers with correct typing in TypeScript? Is this achievable? const addA = (data: {}) => { return { ...data, a: "test" } } const addB = (data: {}) => { return { ...data, ...

Pause after the back button is activated

Upon pressing the back button on certain pages, there is a noticeable delay (approximately 1-5 seconds) before the NavigationStart event registers. I am utilizing the Angular RouterExtensions back() function for this action. Initially, I suspected that t ...

TypeScript is unable to detect the .sequelizerc configuration file

I have a file called .sequelizerc which contains the following configuration: const path = require('path'); module.exports = { config: path.resolve('.', 'src/config/sequelizeCLIConfig.json'), 'migrations-path': ...

Encountering tsconfig.json issues following the integration of Tailwindcss v3 into Next.js (create-next-app --typescipt)

Upon opening my code in VS Code, I encountered the following error: Cannot find type definition file for 'accepts'. The file is in the program because: Entry point for implicit type library 'accepts' In an attempt to resolve this issue ...

Ways to identify a modification in ag-grid when there is an update in my row data while transitioning from one component to another

I am currently working on a project using angular6 implementing ag-grid to display data from an angular dialog box. With multiple teams contributing, each creating their own components, I have encountered a unique situation that I am struggling to resolv ...

What is the proper syntax for defining all CSS properties as a type in TypeScript?

Using StyleProps allows for specifying size and color. I would prefer if it covered all styles. This way, I can easily pass down styles directly to specific parts of the component. What should I include to encompass all CSS properties? How can I modify ...

Ensure that the input field consistently shows numbers with exactly two decimal places

Below is an input field that I want to always display the input value with 2 decimal places. For example, if I input 1, it should show as 1.00 in the input field. How can this be achieved using formControl since ngModel is not being used? Thank you. I att ...

Tips on transferring a child Interface to a parent class

Here is my code snippet: LocationController.ts import {GenericController} from './_genericController'; interface Response { id : number, code: string, name: string, type: string, long: number, lat: number } const fields ...

Having trouble reloading a seekbar (input range) in Angular 7 with a function?

I am currently in the process of developing a music player using Angular 7, and below is the HTML code for my component: <div class="track-controller"> <small>{{musicPlayerService.getCurrentTime()}}</small> <div class="progress- ...

Executes the function in the child component only if the specified condition evaluates to true

When a specific variable is true, I need to call a function in a child component. If the variable is false, nothing should happen. allowDeleteItem = false; <ChildComponent .... removeItemFn={ deleteFn } /> I attempted to use the boolean variable wi ...

Showcasing a single object in an IONIC/Angular application using the ngIF directive

I am in need of assistance as I have encountered an issue. Essentially, I am fetching an object from an external API (Strapi) using the GET method, but when attempting to display it on Views with ngIF, it fails to show up. Below is the code snippet: word ...

Creating a connection object for MySql2 in TypeScript within a class

I'm still a beginner when it comes to TypeScript, so I often stumble over simple things. Initially, I had no issues creating a database connection using the code snippet below that was not placed inside a class: const mysql = require('mysql2&apos ...

Getting data before the Router is loaded following authentication with Angular 2+ - A comprehensive guide

I'm hoping this isn't a repeat. Within my login component, I have a feature that allows users to log in, which calls a service and retrieves a Token. Upon successful login, the token is saved to localStorage. Subsequently, I use the getUserData ...

Angular nested innerHTML not evaluating ternary operator

Here is a code snippet that I am struggling with: {{ Name && Name.length > 20 ? (Name | slice: 0:20) + "..." : Name }} The above code works fine when used inside a div, but when I try to use it within innerHTML, I encounter a syntax e ...

What is the best way to choose a dropdown item at random from a list using Angular 5?

My current setup involves a list that looks like this... export const inventory= [ 'coffee' 'tea' 'wine' 'beer' 'sake' .... ]; Within the HTML, I am using a loop to create dropdown menus a set number of t ...

What is the process for deploying a .NET Core + Angular single page application to multiple environments?

After utilizing the Angular project template with ASP.NET Core in Visual Studio 2019, I developed an application that includes multiple environments: DEV, STG, and Production. Each environment corresponds to specific "appsettings.json" files for the .NET p ...