What is the process for organizing TypeScript sources into individual VS projects?

My web project has been in development for 3-4 years and is built on ASP.NET MVC 5. I also have a significant amount of TypeScript code on the client-side, which is currently integrated into the MVC 5 csproj project and compiled with the back-end.

This setup poses several challenges, including violating the Single Responsibility Principle (SRP), creating strong coupling between the front-end and back-end, and hindering the ability to maintain and build each side separately.

I am considering separating the client-side code into a new Visual Studio project. However, I'm unsure of the best approach since Visual Studio doesn't offer clean solutions for managing TypeScript projects.

I am using Visual Studio 2015 with TypeScript 2.0. What are my options for restructuring my project?

asp.net-mvcvisual-studiotypescript

Answer №1

One possible solution is to utilize the "HTML Application with TypeScript" project type in Visual Studio if your client-side code does not require its own Web.config file for IIS configuration.

However, managing separate Web.config files for both client and server code within the same IIS site can be challenging since merging them is not feasible. In a scenario where an AngularJS-based web app written in TypeScript is paired with an ASP.NET Web API backend, consider relocating the Web API/MVC code to a class library within the ASP.NET project while retaining the TypeScript code on the client side. This approach eliminates the need for additional build steps.

Despite this setup, issues related to the shared Web.config and bootstrapping the Web API via Global.asax may persist. To mitigate these challenges, it could be worthwhile to explore segregating the Web API configuration into a separate .config file using the configSource feature. However, transferring the Web API bootstrapping from Global.asax out of the main ASP.NET project might prove more complex.

Answer №2

In my opinion, combining client-side code like JavaScript or CSS with your "backend" code is crucial. The backend code doesn't have to encompass the entire backend functionality; it should mainly serve as a thin controller layer for handling HTTP requests and server-side rendering.

Consider breaking down your monolithic application into different layers - a service layer and a frontend layer. The frontend layer can focus on managing HTTP requests and rendering processes.

One issue with separating just JavaScript and CSS into a standalone project is:

  1. It complicates deployment since you may encounter compatibility issues between the client and server code - making it unclear which should be deployed first.

  2. You lose the ability to implement JS hashing (thus not being able to manage client-side caches) when isolating client code from the backend.

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

Submitting a form in Angular 2 triggers a page refresh

I'm currently using an Angular2 template to build a form. Whenever I click on the button, the page refreshes. Fortunately, my validations are functioning properly. Is there any way to prevent the page from refreshing when the user clicks the button ...

angulartypescript

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

I'm attempting to transfer the textbox value from Page-1 to Page-2 using the code below, but I am encountering difficulties. Page-1.html <div > <div style="height: 400px"> <h2>Partial view-1</h2> <p> ...

c#htmlangularjsasp.net-mvcangular-ui-router

Angular issue: Readonly or disabled input fields not submitting data

Struggling with creating a form in Angular 2 to submit dynamically generated values from a service. The goal is to calculate the equivalent amount of bitcoin for X chilean pesos using Angular's http module to fetch the price. However, facing an issue ...

angulartypescriptangular-forms

Discover the latest updates in a dynamic text file with real-time C++ processing

I've searched for solutions on how to read a text file in real-time, but none of them have worked for me so far. I have a program that is continuously writing coordinates (two columns) to a growing text file from hardware. Now, I need another program ...

c++visual-studioifstream

Angular component unable to retrieve array data from Angular service

I've developed an Angular service that serves as a middleman for fetching data from a database. Here's the code: export class WebService { constructor(private http: Http, private datePipe: DatePipe) { this.getStatsbyDate(this.datePipe.transf ...

angulartypescript

Utilizing a public function in an extended HttpClass

In order to dynamically apply headers and URL paths, I have created an extended HttpClass. Here is what it looks like: custom-http.ts export enum Type { PREAUTH = 0, AUTH = 1, PRINTER = 2, TERMINAL = 3 } @Injectable() export class CustomHttp ext ...

angulartypescriptrxjs

The navigation bar changes its functionality depending on the page

My Angular application features a main app component that includes a navbar linking to other components using the routerLink directive. The structure is simple: <nav> <button [routerLink]="['/foo']> Foo </button> ...

angulartypescript

Steps for preventing text manipulation in ng2-ace-editorWould you like to restrict users from copying, pasting

How can I prevent users from copying, pasting, and dropping text in ng2-ace-editor? https://github.com/fxmontigny/ng2-ace-editor is the library I implemented in my Angular 5 application. ...

angulartypescriptace-editor

Adding a Key Value pair to every object within an Array using TypeScript

I have two arrays - one contains dates and the other contains objects. My goal is to include the dates as a key value pair in each object, like this: {"Date": "10-12-18"}. dates: ["10-12-18", "10-13-18", 10-14-18"] data: [ {"name":"One", "age": "4"} ...

javascriptarraystypescriptobject

Developing an Angular application where you have a global array to store both strings and

As a newcomer to Angular, this question may be straightforward for some. I have a collection of portfolio cases that I want to showcase. Is there a way to create an additional file where I can store an array of cases and perhaps include images for each c ...

angulartypescript

Adding properties with strings as identifiers to classes in TypeScript: A step-by-step guide

I am working with a list of string values that represent the identifiers of fields I need to add to a class. For instance: Consider the following string array: let stringArr = ['player1score', 'player2score', 'player3score' ...

javascripttypescriptvue.js

Struggling to link Angular frontend with Java backend?

Trying to make an API call in the backend, but encountering an error with no clear cause identified. The issue arose after configuring the spring security in the backend. The call should activate Preflighted requests OPTION. @Configuration @EnableWebSecur ...

javaangulartypescriptcors

What is the best way to implement filter functionality for individual columns in an Angular material table using ngFor?

I am using ngFor to populate my column names and corresponding data in Angular. How can I implement a separate filter row for each column in an Angular Material table? This filter row should appear below the header row, which displays the different column ...

javascriptangulartypescriptangular-materialmaterial-ui

Limiting the parameter type in Node.js and TypeScript functions

Currently working on a Node.js project utilizing TypeScript. I'm attempting to limit the argument type of a function to a specific base class. As a newcomer to both Node and TypeScript with a background in C#, I may not fully grasp some of the langua ...

node.jstypescript

Are Typescript generics that use "extends object" unnecessary? How should this be approached for best practices?

In my observations, using the <P extends object> generic in JavaScript is often deemed pointless since virtually everything in the language is an object. Most literals behave like objects with methods such as .toString, and strings are objects with p ...

typescripttypescript-generics

Error overload in the nest.js build process

I've been using my Nest.js app for a while now, but recently encountered an issue when running npm run build. node_modules/@nestjs/config/dist/config.service.d.ts:1:23 - error TS2305: Module '"./types"' has no exported member &apos ...

node.jstypescriptnestjs

Guide on establishing the structure of a map data type in Dart

When working with typescript: const someMap = {a: "hi", b: 3}; // Typescript can determine the type of someMap as {a:string, b:number}. const greet = someMap.a; // Typescript identifies greet as a string. const someMapList: {a:string, b:number} ...

typescriptdart

How can one effectively replace colors using MUI withStyle, TypeScript, and next.js?

I currently have the following code snippet: const Button: React.FC<ButtonProps> = ({ label, size, variant = 'primary', disabled = false, }: ButtonProps) => { const classes = useStyles(); return ( <MaterialButton ...

reactjstypescriptnext.jsmaterial-ui

What is the proper syntax for invoking a function using an event in Angular?

I have a pair of elements: pictures and camera, with camera as the child element. Within the camera element, I have the following TypeScript snippet (abbreviated): @Component({ selector: 'app-camera', templateUrl: './camera.component.ht ...

angulartypescript

Determine the output of a function based on specific parameters, which will be included as a component of the returned object

I am currently encountering an issue that I am unsure if it can be resolved. function getOptions( period: { first: string; last: string }, prefix?: string ){ if (prefix) { return { [`${prefix}_first`]: formatDay(period.first), [`${pre ...

typescript