Collaborating on projects using TypeScript, Node.js, and Angular

Currently, I am in the process of setting up a project that requires an angular client with a minimal node server on the backend using typescript.

Ideally, I envision a folder structure as follows:

/
/dist : Angular client (production) files
/server: Node.js files (generated by typescript)
/tests: Server-side test scripts
/src/client: Angular typescript
/src/server: Node typescript
/src/tests: Node typescript test scripts
/src/common: Shared files between node and angular (interface definitions, utilities, etc.)

The real challenge I am facing lies in creating individual `tsconfig.json` files for each folder. The errors I encounter relate to root issues and module not found errors.

A specific error I have been struggling with is:

"error TS6059: File 'common/interfaces/cell.ts' is not under 'rootDir' 'server/'. 'rootDir' is expected to contain all source files."

Is there a way to address this issue when building or compiling the server? Can we relocate the `common` folder underneath the server directory to resolve this problem?

This seems like a common requirement in projects like these, but if it isn't, what would be the best practice? Your guidance on configuring the correct settings in the respective `tsconfig.json` files would be greatly appreciated.

angulartypescriptangular-cli

Answer №1

It is possible to have multiple TypeScript definitions in each folder. To enable node to access common functionality such as fs or path, you must set the module to commonjs.

In this scenario, utilizing rootDirs may be helpful.

Here is an example:

 "rootDirs": [
      "./src",
      "../shared/src"
    ],

Answer №2

It is not necessary to have a tsconfig.json file in every folder. The purpose of tsconfig.json is to serve as the configuration file for the TypeScript compiler. This file essentially instructs Angular on how to compile everything into JavaScript, as browsers do not support Typescript, the language that Angular uses. You only need one tsconfig.json file for your entire app to determine how it should be compiled. You have flexibility in organizing the structure as you prefer, but make sure your configuration points to the correct files.

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

The Angular 2 router is not compatible with using the same component but with different IDs

Currently utilizing the alpha8 router with 3 main routes: export const appRoutes: RouterConfig = [ { path: '', component: LandingComponent }, { path: 'blog', component: BlogComponent }, { path: 'posts/:id', compon ...

angulartypescriptangular2-routing

Issue: You cannot render objects as a React child element (object found with properties {name}). If you intended to display multiple children, consider using an array instead

I have just finished creating a new Provider and now I want to test it. To do this, I am setting up a mock Component within the test file. // TasksProvider.spec.tsx const task = { name: 'New Task', } function TestComponent() { const { tasks ...

reactjstypescriptjestjs

Angular - Enabling the next screen button only after completing multiple selections

Currently, I'm working on a screen where users can select multiple options from a table. The requirement is that they must select at least 3 options before they can proceed. However, I am facing difficulties in implementing this functionality and unsu ...

angulartypescript

Please ensure the subscription has completed before proceeding with the loop

I am currently working on an Angular application that retrieves data from an API and uses one of its parameters from a looped array. The issue I'm facing is that the data is pushed in a random order due to the continuous looping without waiting for th ...

angulartypescriptloopssubscription

Seeking a quick conversion method for transforming x or x[] into x[] in a single line of code

Is there a concise TypeScript one-liner that can replace the arrayOrMemberToArray function below? function arrayOrMemberToArray<T>(input: T | T[]): T[] { if(Arrary.isArray(input)) return input return [input] } Trying to cram this logic into a te ...

javascriptarraystypescriptone-liner

Organize information in a React table following a predetermined sequence, not based on alphabetical order

As a beginner with React, I'm looking to sort my data by the column "Status" in a specific order (B, A, C) and vice versa, not alphabetically. The data structure looks like this: export interface Delivery { id: number; name: string; amount: num ...

javascriptreactjstypescripthtml-table

Tips for safely storing data in local storage using Angular 5

How can I securely store data in local storage, such as encrypting and decrypting the local storage data to prevent manipulation by other users? If it's not possible with local storage, what are alternative methods for client-side data storage? I&apo ...

javascriptangulartypescriptsecuritylocal-storage

Angular 2: Assigning a class to a D3 element using the component's style

When creating a component in Angular 2, the `app.component.css` file defines a class called `h-bar`: https://i.sstatic.net/AG1ER.png In the `app.component.ts` file, d3 is utilized to create elements that should apply the `h-bar` class from the `app.compo ...

d3.jsangulartypescript

Steps for transferring Angular dist files to a different location post build completion

Is there a way to automatically transfer the files from the dist folder to another location after running ng build? ...

angularbuildcopy

Enhance the appearance of data in Angular using a pipe or alternative method

Currently in my Angular 8 application, I have some data displaying in a div like so: {"Information":"Information one","Output":[{"address1":"someaddress"},{"address2":"someaddress"},{"address3":"someaddress"},{"address4":"someaddress"}]} However, it&apos ...

angulartypescriptangular8

Preview of Azure AD Consent Scopes and Access Token Version Error in Msal Angular

Currently in the process of updating my web application with the new MSAL library, @azure/msal-angular, from previously using the old ADAL library. The frontend of the web app is built with Angular 5 and communicates with a backend ASP.NET Core Web API. ...

angularasp.net-coredynamics-crmazure-active-directoryazure-ad-msal

What specific category does the enum object fall under?

How can I create a wrapper class for a collection of elements in an enumeration? export class Flags<ENUMERATION> { items = new Set<ENUMERATION>(); enu; // what type ? constructor(enu) { // what type ? ...

typescriptgenericstyping

Is there a way in Angular 1.5 to compile the HTML of a parent component from within a child component?

I have created two angular components called app-menuitem and app-menu. The app-menu component contains a list of app-menuitems as its children, without using transclude. App-menuitem Component: angular.module('app') .component('appMen ...

angularjsangularcompilationcomponentsparent-child

I have encountered challenges trying to consume form data containing a zip file and several other parameters sent from an Angular 2 frontend in my Java backend

I keep encountering the issue with error code 415 Unsupported media type. My current process involves sending form data with a zipped file along with several other parameters. I have set the content type as multipart/form-data in Angular 2. On the Java ...

javaangularrestjax-rsjax-ws

Having trouble getting TinyMCE to work properly with Angular 8 integration

I'm currently working on integrating tinymce into my Angular 8 application and encountering the following error in the VS Code console: ERROR in node_modules/@tinymce/tinymce-angular/editor/editor.component.d.ts(8,9): error TS1086: An accessor cannot ...

angulartinymce

Is it possible to modify the content of an element with a click event in Angular/HTML?

How can I implement a feature in my mat-accordion using mat-expansion-panels where the text becomes underlined when the panels are clicked? I want the title to be underlined when the panels are open and for the underline to disappear when they are closed ...

htmlangulartypescriptangular-material

Challenges encountered when testing middleware in a TypeScript Node.js Express project

I have been exploring the repository at https://github.com/goldbergyoni/nodebestpractices to enhance my understanding of nodejs best practices. Below is a middleware I developed: import { NextFunction, Request, Response } from "express"; import ...

node.jstypescriptjestjs

The use of async/await within an observable function

I am looking to establish an observable that can send values to my observers. The issue lies in the fact that these values are acquired through a method that returns a promise. Is it possible to use await within the observable for the promise-returning f ...

angulartypescriptpromiserxjsobservable

I am facing difficulties in retrieving data from MongoDB using Angular 8

Having trouble loading data from MongoDB using Angular 8? I've successfully loaded data with https://jsonplaceholder.typicode.com/, but when trying locally at 'http://localhost:3000/employees', it doesn't work. I can post data but una ...

node.jsangularmongodb

Sometimes, Express may return the message "not found" on and off

After working with express for many years, I find myself a bit out of practice with TypeScript - and it seems like my eyesight is failing me! This is the first time I've encountered this issue, so I must be missing something... My current dilemma is ...

javascripttypescriptexpresscloud-foundryexpress-router