Creating an npm library using TypeScript model classes: A step-by-step guide

Currently, I am working on a large-scale web application that consists of multiple modules and repositories. Each module is being developed as an individual Angular project.

These Angular projects have some shared UI components, services, and models which I publish to our company's private npm repository (Sinopia) and then install them where needed.

While I've used Angular libraries for the UI components and services, I find it excessive to create an entirely new Angular library project for models since they only contain class definitions and no logic.

I'm looking for recommendations on frameworks or best practices for developing these kinds of libraries. Any guidance or a link to a similar Git repository would be greatly appreciated.

Answer №1

A few days ago, I found myself in a similar situation where I needed to reference classes and interfaces across multiple projects. The solution was to create a node module that could be utilized by all other projects.

For more information, please visit my repository on GitHub: https://github.com/Plochie/pacify.

Within this repository, you will find all the classes written in TypeScript. After building the project, you will obtain JavaScript files in the 'dist' folder. Don't forget to review the tsconfig.json file in each directory.

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

Node.js is having trouble retrieving information from the SQLite database

Here's a simple code snippet I'm using to retrieve data from my sqlite database. Index.ts: import { Database } from './Class/database'; Database.checkIfExists("some ID"); Database.ts: export class Database { static sqli ...

Utilizing Bootstrap Classes in ReactJS: A Comprehensive Guide

Is it possible to incorporate Bootstrap classes in a React application without actually installing the framework? If so, how can this be achieved and utilized effectively? I would greatly appreciate your assistance with this matter. ...

Ensure that the query value remains constant in Express.js

Issue: The query value is changing unexpectedly. // url: "http://localhost:4000/sr?q=%C3%BCt%C3%BC" export const search = async (req: Request, res: Response) => { try { const query = String(req.query.q) console.log("query: &quo ...

Do you think it's wise to utilize React.Context for injecting UI components?

I have a plan to create my own specialized react component library. These components will mainly focus on implementing specific logic rather than being full-fledged UI components. One key requirement is that users should have the flexibility to define a se ...

Jest encounters an issue while attempting to import Primeng CSS files

I am currently utilizing Jest version 26.6.3 for testing Angular components. Unfortunately, the unit tests for components that utilize Primeng's checkbox component are failing during the compileComponents step with the error message "Failed to load ch ...

*NgFor toggle visibility of specific item

Here is a snippet of HTML code that I'm working with: <!-- Toggle show hide --> <ng-container *ngFor="let plateValue of plateValues; let i=index"> <button (click)="toggle(plateValue)">{{i}}. {{ btnText }}</button> ...

What is the best way to add an item to an array with distinct properties?

I am currently working on creating an array with different properties for each day of the week. Here is what I have so far: const [fullData, setFullData] = useState([{index:-1,exercise:''}]) My goal is to allow users to choose exercises for a sp ...

Restricting array elements through union types in TypeScript

Imagine a scenario where we have an event type defined as follows: interface Event { type: 'a' | 'b' | 'c'; value: string; } interface App { elements: Event[]; } Now, consider the following code snippet: const app: App ...

"Utilize Ionic 3 by importing modules into the primary app module and then injecting them into various services and components

When HttpClientModule is imported in app.module.ts: import { HttpClientModule } from '@angular/common/http'; and injected into the application's @NgModule: @NgModule({ declarations: [ MyApp ], imports: [ BrowserModule, ...

Is there a way to retrieve the commit hash for a package that was installed through NPM from a git repository?

I currently have specific entries in my package.json file, such as: "dependencies": { "my-library": ""git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197e706d597e706d716c7b377a7674">[email protected]</a ...

What could be causing my surroundings to deteriorate? Encountering a yarn installation issue related to sha

The Challenge I'm facing an issue while attempting to replicate this particular project: https://github.com/Bounties-Network/Explorer. Upon running yarn install, everything seems to fall apart. I suspect that it could be linked to gyp, but I lack th ...

Typescript requires that the argument passed is undefined

Typescript: 2.4.1 I am exploring the creation of a helper function to produce redux action creators. Here is what I have: interface IAction<T extends string, P = undefined> { type: T; payload: P; } function createAction<T extends strin ...

Angular asynchronous operations are failing to complete within the specified time frame

Observations suggest that Angular's async from @angular/core/testing is not properly resolving timeouts in tests when a beforeEach contains async as well. Sadly, the bug cannot be replicated on Plunkr or JSFiddle platforms. To reproduce this issue ea ...

Nested component in reactive forms not functioning as expected

I've been experimenting with creating nested reactive form components. Specifically, I'm working on a reusable input component for my app within a reactive form. How can I dynamically communicate with nested components in Reactive forms? Despite ...

Utilizing two nearby node servers to route traffic according to designated paths

I am seeking a solution to achieve the following: There are two servers running locally on different ports: localhost:3001 localhost:3002 I want a third server on port 3000 to route all traffic to localhost:3001 except for specific paths that are white ...

Having issues getting npm start to function properly with webpack in React

As I dive into self-teaching React and setting up my own framework, I encountered an issue after running npm start in the command line: ~/projects/reactApp » webpack --display-error-details Dustin@Dustins-MacBook-Pro Hash: 94c3df302d8dd2990ab8 Ve ...

The functionality of d3 transition is currently non-existent

I've encountered an issue with my D3 code. const hexagon = this.hexagonSVG.append('path') .attr('id', 'active') .attr('d', lineGenerator(<any>hexagonData)) .attr('stroke', 'url(#gradi ...

Converting an array with objects to comma separated strings in javascript using (ionic , Angular , NodeJS , MongoDB)

Retrieving specific data from an API array: let passions = [ {_id: "60a1557f0b4f226732c4597c",name: "Netflix"}, {_id: "60a1557f0b4f226732c4597b",name: "Movies"} ] The desired output should be: ['60a1557f0b4f226 ...

When incorporating an array as a type in Typescript, leverage the keyof keyword for improved

I am facing a situation where I have multiple interfaces. These are: interface ColDef<Entity, Field extends keyof Entity> { field: Field; valueGetter(value: Entity[Field], entity: Entity): any } interface Options<Entity> { colDefs ...

What is preventing me from defining an alias @bundled-es-modules/chai for chai?

When working with NPM, you have the option to install a package under an alias, like this: npm i alias@npm:real-package-name To learn more about this aliasing feature, check out the announcement here: b7b54f2d1 413 #3 530 Add support for package aliase ...