Setting up a Typescript class for seamless use in both Browser and Node applications

I developed a web app consisting of two separate projects, each housed in different folders with their own set of unique files.

The client component is built using Angular 2 (RC-4) with SystemJS Typescript 1.8.10 (as per instructions found here). The server component is a basic NodeJS application utilizing Typescript 1.8.10 as well.

Both projects have their distinct folders and files, including individual tsconfig.json configurations.

Everything is functioning properly.

However, I now wish to implement a class MySharedClass {} that can be utilized in BOTH projects. How would I go about achieving this?

Although I can duplicate the source code in both projects (i.e., have two copies of the source file), resulting in successful build and execution - this is not considered best practice.

One approach I considered was creating a 'third' project named 'common', placing MySharedClass {} within it. Nevertheless, attempting to import it using 

import {MyClass} from "../../../common/my-class";

fails to reference the file during runtime. It appears that referencing a file outside the project's scope is ineffective. Is there something obvious that I am overlooking?

After conducting research, I could not find a clear explanation on how to resolve this issue. Is there some key concept or method that I need to grasp? While I am familiar with the ES6 module system (following the recent shift towards Typescript ES6 behavior), I have not yet delved into using a build tool, opting instead for the scripts provided in the package.json file (as outlined here). Should I explore implementing Gulp at this point?

typescriptmodule

Answer №1

Appreciate the help! Indeed, the include path issue is causing some trouble. I've opted to steer clear of Visual Studio and am using Node as my web server instead (although I did try Atom briefly, but it kept freezing on me so I'm back to good old Notepad++). As @jobou pointed out, having common dependencies outside the folder makes them inaccessible to the web server. To overcome this hurdle, I followed @Zen's suggestion and created a 'common' project. Each time I build one of the other projects, a simple script copies over the necessary files to ensure they can all access the class without any problems.

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

Include html into typescript using webpack

Attempting to include HTML content into a variable using TypeScript and webpack has been my challenge. This is the current setup: package.json: { "devDependencies": { "awesome-typescript-loader": "^3.2.3", "html-loader": "^0.5.1", "ts-load ...

typescriptwebpackwebpack-html-loader

Is there a way to have my accordion adjust automatically?

I have developed a dynamic accordion component that populates its values from the parent component. However, I am facing an issue where each accordion does not respond individually to clicks. Whenever I click on any accordion, only the first one expands an ...

angulartwitter-bootstraptypescriptaccordion

JavaScript - Trouble encountered while trying to use splice to insert one array into another array

I've been working on creating a Cache Hashtable using JavaScript. When I use the code cache.splice(0,0, ...dataPage);, it inserts my data starting from the first position up to the length of dataPage. Assuming that my dataPage size is always 10. Th ...

javascriptarraystypescript

What is the best way to restrict the suggested values in a property depending on the value of another property?

I'm working on creating a third interface that depends on the value of properties from two other interfaces, while also introducing a unique third property. I've chosen not to extend the third property from the first two interfaces as it may not ...

typescript

The proper method for referencing TypeScript compiled files with the outDir option

I am currently working on a simple app that consists of two .ts files. These files are compiled using the following tsconfig.js file: { "compilerOptions": { "target": "ES5", "module": "commonjs", "sourceMap": true, "emitDecoratorMetadata ...

angulartypescriptsystemjs

Find the variance between today's date and a selected date, then initiate the timer based on this variance

I have a grid containing data. I utilize the loadGrid() function to preload data or conditions before the grid finishes loading. When the active state is set to 1, my intention is to initiate a timer by calculating the difference between the current date ...

javascriptangulartypescript

Manufacturing TypeScript classes that are returned by a factory

Developed a custom library that generates classes based on input data and integrates them into a main class. To enhance code maintainability and readability, the logic for generating classes has been extracted into a separate file that exports a factory f ...

typescriptdesign-patternsfactory

Troubleshooting: Resolving the error message 'Unable to assign to Partial<this>' within a subclass method

If I call the base class's update method using a subclass instance, it functions as expected. However, I encounter an error when attempting to do so within a subclass method: Argument of type '{ prop: number; }' is not compatible with par ...

typescript

Local font not applying styles in Tailwind CSS

I integrated the Gilroy font into my application, but I am facing issues with tailwindcss not being able to style the text properly. The font appears too thin in all elements such as paragraphs and headers. Here is the file structure for reference: https: ...

typescriptnext.jstailwind-css

When it comes to rendering components in React using multiple ternary `if-else` statements, the question arises: How can I properly "end" or "close" the ternary statement?

I have developed a straightforward component that displays a colored tag on my HTML: import React, {Component} from 'react'; import "./styles.scss"; interface ColorTagProps { tagType?: string; tagText?: string; } /** * Rende ...

reactjstypescript

How can I restrict a generic type to include the new() method?

Is there a way to create a function similar to the following in TypeScript? createEntity<TEntity>(): TEntity { return new TEntity(); } In C#, we can achieve this using: void TEntity CreateEntity<TEntity>() where TEntity : new() How would ...

typescript

Access NgModel from NgForm

Is there a way to access the NgModel of a FormControl retrieved from the NgForm.controls object within its parent form, or directly from the form itself? Upon form submission, I pass the form as a parameter to a custom function: <form #myForm="ngForm" ...

angulartypescriptangular2-templateangular2-forms

The system is unable to locate a supporting entity with the identifier '[object Object]', as it is classified as an 'object'

I'm currently working on an Angular 2 application where I am retrieving data from an API and receiving JSON in the following format. { "makes": null, "models": null, "trims": null, "years": null, "assetTypes": { "2": "Auto ...

arraysjsonangulartypescript

Leveraging a returned value from a function in Typescript within a React component

I am currently facing a challenge where I need to extract values from a Typescript function and use them to dynamically render a React page. Specifically, the two values I am working with are the outputs of getIcon() and getSpaces(). This is how I attempt ...

reactjstypescript

Creating folders and writing data to text files in Angular 4/5 with TypeScript: A tutorial

Is it feasible to create a folder, text file, and write data into that file in Angular5 using Typescript for the purpose of logging errors? Your expertise on this matter would be greatly appreciated. Thank you in advance! ...

angulartypescriptangular5

Assigning namespaces to a property of classes in typescript: A step-by-step guide

As I work on adding a declaration file to a TypeScript package, I encounter some syntax that looks like this: const Sequelize = require('Sequelize'); //... class Application { Sequelize = Sequelize; } To address this, I created a file named ...

typescripttsc

Is there any advice for resolving the issue "In order to execute the serve command, you must be in an Angular project, but the project definition cannot be located"?

Are there any suggestions for resolving the error message "The serve command requires to be run in an Angular project, but a project definition could not be found."? PS C:\angular\pro\toitsu-view> ng serve The serve command requires to be ...

angulartypescriptvisual-studio-code

Potentially null object in react typescript

In my React application with TypeScript, I have completed the implementation of a chart but encountered an error in the following line: backgroundColor: gradientFill ? gradientFill : chartRef.current.data.datasets[0].backgroundColor, T ...

reactjstypescripttypesreact-hookschart.js

The concept of overloaded function types in TypeScript

Is it possible to create an overloaded function type without specifying a concrete function? By examining the type of an overloaded function, it appears that using multiple call signatures on an interface or object type is the recommended approach: functi ...

typescripttypesoverloading

ApolloClient encounters type mismatches with ApolloLink

Struggling with creating ApolloClient using TypeScript, encountering type-errors that I'm unable to resolve. Seeking guidance on what steps to take next. Provided below is a snippet of the code (functions fine with JavaScript) for setting up the clie ...

reactjstypescriptapollo-client