Having trouble with Visual Studio 2015 not compiling TypeScript within an ASP.NET Core project?

Seeking assistance with my Angular app development setup in VS2015. Even though it is recognized as a TypeScript Virtual Project, I am facing issues getting the transpiled files into the wwwroot folder within my ASP.NET Core project. Here's an overview of my project structure:

https://i.stack.imgur.com/aGLsA.png

Sharing my configuration from the tsconfig.json file:

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "system",
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "outDir": "../../wwwroot/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Despite trying manual compilation using npm run tsc:w main.ts, encountering 'file not found' error. Any tips on resolving this issue to successfully build my ts files?

angularjsvisual-studiotypescriptnpmvisual-studio-2015

Answer №1

Hey @EchoLogic, have you considered changing the name of your Angular directory to scripts? This change might solve the issue for you.

Answer №2

Your outdir is relative to the tsconfig.json file, so your path should be something like: ../wwwroot/. Take a look at my example of the tsconfig.json I use:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outFile": "../wwwroot/app/app.js"
  },
"compileOnSave": true,
"files": [
  "../typings/main.d.ts",
  "app.module.ts",
  "app.config.ts",
  "home.controller.ts",
  "myTeam.controller.ts"
  ]}

I personally prefer building typescript through gulp. I have shared two articles that explain how to do this:

Check out this detailed guide on configuring your ASP.NET Core app to compile typescript: ASP.NET Core: modify an Angular app to use typescript

And for implementing the same with a Gulp workflow: ASP.NET Core: Building Typescript with Gulp

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

What is the best way to iterate through array elements with AngularJS?

I am looking to showcase array values using the ng-repeat directive, and then call the getimage function with itemid and photoidlist in order to retrieve the image URL. The JSON data that I have is as follows: $scope.productslist = { "json": { "re ...

javascriptangularjsarraysjsonangularjs-ng-repeat

What is the best way to swap out the if else statement with a Ternary operator within a JavaScript function?

Is there a way to replace the if else statement in the function using a Ternary operator in JavaScript? private getProductName(productType: string): string { let productName = 'Product not found'; this.deal.packages.find(p => p.isSele ...

javascripttypescriptconditional-operator

Tips on typing the onFocus function event parameter for a Material UI Input component

Currently, I am working on a custom dropdown using material ui components like Input and Popper. The goal is to have the popper open when the user focuses on the input field. Additionally, I am implementing this solution with TypeScript. import ClickAwayL ...

reactjstypescriptmaterial-uimouseeventtypescript-typings

When you add a header file twice, Visual Studio Intellisense and Resharper may encounter an ambiguous symbol error

Currently utilizing Resharper C++ in conjunction with Visual Studio and encountering an ambiguous symbol error caused by a namespace clash. The issue arises in Sd.cpp when attempting to instantiate an enum Mode. The enum class Mode is defined in Pins.hpp, ...

c++visual-studiovisual-c++

Retrieving a certain file from a module in NodeJS

A module called simpledblayer-mongo has been recently created. The functionality of this module relies on another one called simpledblayer, which provides specific functions for the database. An issue has arisen during unit testing. The problem pertains t ...

node.jsgitunit-testingnpm

Angular function implementing a promise with a return statement and using the then method

I have a function in which I need to return an empty string twice (see return ''. When I use catch error, it is functioning properly. However, I am struggling to modify the function so that the catch error is no longer needed. This is my current ...

angulartypescriptpromisereturn

Best Practices for Implementing AngularJS Dependency Injection

I am excited to share that I have recently started delving into my very first Angular JS project. As I navigate through this new experience, I want to ensure that I am effectively managing Multiple dependency injection. Any insights, recommendations, or ...

javascriptangularjsdependency-injectiondependency-management

What is the most efficient method of utilizing rails routes in conjunction with angularjs to avoid repetition?

Apologies in advance for any language and code errors as I've used Google Translate extensively. To ensure clarity, I'll provide all the codes. Setting up routes in Rails is straightforward, but when transitioning to AngularJS, it tends to get m ...

ruby-on-railsangularjsroutes

I encountered an issue with my autocomplete feature in Angular TypeScript where it was returning a [object Object] value

Issue with autocomplete displaying [object Object] value in Angular TypeScript I'm having trouble pinpointing the exact problem HTML snippet <mat-form-field style="margin-right: 10px;"> <input #productName matInput placeholder="Product" ...

angulartypescript

Using TypeScript to destructure by providing types

I encountered an issue while trying to destructure some code. The error message Property 'name' does not exist on type '{}'. is appearing. I thought about using let user:any = {}; as a workaround, but that goes against the eslint rule o ...

typescripttypescript-typingstypescript-generics

The syntax for an AngularJS controller using the "as" keyword

Incorporating AngularJS 1.6.9 with AngularJS Material has been a challenge for me. I am attempting to integrate a menu item feature following the basic usage, but unfortunately, it did not work as expected due to structural differences. After reviewing th ...

angularjs

Identifying 404 image status in AngularJS triggering by a button press

One question I have is about a button directive that I am working with: <button-data></button-data> The template for the button data directive looks like this: <div class="buttonDiv"> <a ng-show="!isSomthing" class="{{className}}" ...

htmlangularjs

One-time binding in AngularJS using ng-repeat

I recently implemented Bindonce to boost the performance of my ng-repeat feature. However, I encountered a problem: The collection used in the ng-repeat is empty initially because it takes some time to fetch the data from the API, and the update is preven ...

angularjsangularjs-directiveangularjs-ng-repeatbindonce

Encountering a 404 error during the npm install process for create-react-app

Encountering a 404 error when attempting to run either npm install create-react-app or npm install -g npm@latest. Error Log: 0 info it worked if it ends with ok 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe' ...

node.jsreactjsnpm

Encountering Errors: Entity Framework's Entity Data Wizard Fails to Connect to MySQL Database

While trying to set up an Entity Data Model by using the wizard to reverse engineer an existing MySQL database, I encounter a problem. At the Choose Your Data Connection page of the wizard, after selecting an existing MySQL connection and clicking Next, th ...

c#mysqlvisual-studio-2015entity-framework-6

Steps for setting up type-graphql in your projectNeed help with

Trying to include this in my TypeScript project: import { ID } from "type-graphql"; Encountered an issue when attempting to install type-graphql. Received a 404 error stating that it could not be found in the npm registry. npm install @types/type-graphq ...

javascriptreactjstypescriptnpmgraphql

React TypeScript: The properties of 'X' are not compatible. 'Y' cannot be assigned to 'Z' type

I am currently working on a React-TypeScript application, specifically creating a component for inputting credit card numbers. My goal is to have the FontAwesome icon inside the input update to reflect the brand image as the user enters their credit card n ...

reactjstypescriptfont-awesome

Ways to incorporate md-card in AngularJS to create three distinct sections

When constructing the md-card, remember that the first section should contain a title, the second section should hold the content, and the third section needs to display the d3.js timeseries graph. ...

angularjs

The specified key is not found in the 'StoreOptions<State>' type of Vuex 4, in combination with Vue 3 and Typescript

I'm navigating the process of setting up a Vuex 4 Store with Typescript and Vue3, despite having limited experience with typescript. Following the Vuex Tutorial for the initial setup, I almost entirely copy-pasted the code. The only difference is tha ...

typescriptvue.jstypesvuexvuejs3

Is there a way to create identical copies of data with the identical names?

Here is the code I have written: this.temp1.push(this.json); for(let i=0; i<this.temp1.length; i++){ if(this.temp1[i].name == this.json.name){ this.orderList[i] = this.json; this.DBorder[i] = this.order_json; } ...

angulartypescript