Encountering build errors in .xproj file when working with Type Script in ASP.Net Core

I recently started working on a new ASP.Net Core project and decided to integrate Angular 2 and Type Script by following a blog post tutorial. However, upon adding a Type Script file to my project, I encountered several build errors from the xproj file.

Reviewing my project.json, package.json, systemjs.config.js files along with the lone Type Script file in the project, it seems like something might be amiss.

project.json

{
  "title": "Manage Care Web",
  "userSecretsId": "ManageCare-Apps-Web-c23d27a4-eb88-4b18-9b77-2a93f3b15119",

  "dependencies": {
    // list of dependencies...
  },

  "tools": {
    // list of tools...
  },

  "frameworks": {
    // framework configurations...
  },

  // Build options, runtime options, etc.
}

// more code snippets...

package.json

{
  "version": "1.0.0",
  "name": "managecare",
  "private": true,
  "scripts": {
    // script commands...
  },
  "dependencies": {
    // list of dependencies...
  },
  "devDependencies": {
    // list of dev dependencies...
  }
}

// more code snippets...

systemjs.config.js

{
  // System configuration for Angular samples...
}

// detailed mapping of angular bundles...

typings.config

{
  // global dependencies definition...
}

// further typings configuration...

tsconfig.json

{
  // compiler options and exclude configuration...
}

ClientApp.ts

{
  // import declarations...
}

Despite following the provided instructions, it seems there might be more to configuring Type Script than initially thought. Is there anything obvious that could have been missed or requires additional attention?

Update:

After installing the typings npm package as suggested by a user, attempting 

typings install dt~core-js --global --save
, resulted in an unexpected exception being thrown.

// Exception message...
asp.netangularjstypescript

Answer №1

If you're looking to enhance your project with AngularJS, make sure to install the nuget package: angularjs.TypeScript.DefinitelyTyped Click here for more details

Don't forget to add the following code snippet in your 'typings.json' file. It worked perfectly for me:

        {
          "globalDependencies": {
            "core-js": "registry:dt/core-js#0.0.0+20160725163759",
            "node": "registry:dt/node#6.0.0+20160831021119"
          }
        }

Here is a glimpse of my 'tsconfig.json' configuration:

            {
              "compilerOptions": {
                "noImplicitAny": true,
                "noEmitOnError": true,
                "removeComments": false,
                "sourceMap": true,
                "target": "es5",
                "module": "commonjs",
                "moduleResolution": "node",
                "skipLibCheck": false,
                "emitDecoratorMetadata": true,
                "experimentalDecorators": true,
                "lib": [ "es2015", "dom" ],
                "types": ["node","js-base64"]
              },
              "exclude": [
                "node_modules",
                "wwwroot"
              ],
              "compileOnSave": false
            }

Be sure to execute the command below if not already done:

     typings install dt~core-js --global --save

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

Moving from $.ajax to $http in AngularJS can improve the performance and efficiency of your

For the purpose of testing (to utilize $httpBackend), I am looking to switch my Service from using jQuery $.ajax to Angular's $http. This is how my current service is structured: app.service('myService', function() { return { getUse ...

angularjsunit-testingjasmine

Uh oh, it looks like there's an issue! The function getCoordinates is not recognized for this.locations

Whenever I attempt to execute the method in my class (getCoordinates()), an Error is thrown: ERROR TypeError: this.locations[0].getCoordinates is not a function What am I doing wrong? The service method I'm using: getLocations(){ return this ...

angulartypescript

Search through the directory of images and generate a JSON representation

I'm looking for a way to transform a URL-based directory of images into a Json object, which I can then utilize and connect within my Ionic project. Despite extensive searching, I have yet to find any satisfactory solutions to this challenge. Thus, I ...

jsonangularimagetypescriptionic-framework

Implementing HTML within a directive by utilizing the ng-click event triggered by a button within the directive itself in AngularJS

I'm looking to dynamically add another row to the div with id "#rowContainerXXX" when the "Add additional Row" button is clicked. I believe I need to utilize the "$compile" function to generate the new html directive. I've attempted a few differe ...

angularjsangularjs-directive

Show the value in Angular in a dynamic way

My template needs to display the text 'Passed' only if item.name === 'michael' is not true. The component receives data in an array called courses[] from its parent. There are two interfaces, Courses and Teachers, where each course ID h ...

angulartypescript

Error in hook order occurs when rendering various components

A discrepancy was encountered in React when attempting to render different components Warning: React has detected a change in the order of Hooks called by GenericDialog. This can result in bugs and errors if left unresolved. Previous render Next ren ...

javascriptreactjstypescript

Utilize Array.push to add 2 new rows to a table using Angular 4

I have two arrays that are almost identical, except for two items which are the fakeDates: this.prodotti.push({ idAgreement: this.idAgreement,landingStatus: this.landingStatus, landingType: this.landingType, startDate: this.startDate, expirationDate: thi ...

arraysangulartypescripthtml-table

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

javascriptphphtmlcssasp.net

What causes TypeScript to automatically infer a default property when dynamically importing a JavaScript file that lacks a default export?

While dynamically importing a javascript file that exports multiple functions (without a default export), I encountered this issue: const sayHi = import('./sayHi.js') I was expecting the type of sayHi to be Promise<{name1: function, name2: fu ...

javascriptreactjstypescriptes6-promisees6-modules

ng-repeat: Setting the default item as selected

I am having trouble initializing a list of items using ng-repeat directive. <div class="item" ng-click="selectedProject(fpItem)" data-id="{{fpProjectItem.id}}" ng-repeat="fpItem in fpItems"> <img src="{{fpItem.thumbnail}}" /> <span c ...

angularjs

Issue with Angular component inheritance where changes made in the base component are not being

click here to view the example on your browser base component import { Component, ChangeDetectorRef, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-base-component', template: `<p> <b>base</b> ...

angulartypescript

Building a filter for a union type in TypeScript: a step-by-step guide

Allow me to present an example to demonstrate my current objective. const v1: { type: "S"; payload: string } = { type: "S", payload: "test" }; const v2: { type: "N"; payload: number } = { type: "N", payload: 123 }; type Actions = typeof v1 | typeof v2; ...

typescript

Can you explain the significance of the "@" symbol in the `import from '@/some/path'` statement?

When I use IntelliJ IDEA to develop a web application in TypeScript, the autocomplete feature suggests imports from other files within my project like this: import {Symbol} from '@/components/Symbol'; I am curious about the significance of the @ ...

typescriptwebpacknext.jstypescript-module-resolution

Error in vue3 with typescript: unable to assign a ComputeRef<number[]> argument to an iterable<number> in d3.js

This code snippet was originally sourced from an example at https://medium.com/@lambrospd/5-simple-rules-to-data-visualization-with-vue-js-and-d3-js-f6b2bd6a1d40 I attempted to adapt the example to a TypeScript/Vue 3 version, and below is my implementatio ...

typescriptvuejs3

Developing a fresh feature in Angular.js for transmitting my localstorage model information to a bus?

As a beginner in Angular Js, I have mastered the basics and am now working on storing user input values to localstorage using a form. Although this part is working fine, I need assistance in creating a new service to communicate with my colleague's . ...

javascriptangularjsangularjs-serviceangularjs-factory

Tips for accessing the value and text of an Angular Material mat-select through the use of *ngFor

When using a dropdown menu, I want to retrieve both the value and text of the selected option. View dropdown image Underneath the dropdown menu, I aim to display values in the format of "options: 'value' - 'selected option'". compone ...

javascriptangulartypescriptangular12

How can we remove an ID from one table when the delete API is triggered in a different table?

One scenario I'm facing involves having 2 tables in my database. Let's say I delete a row (Role) from the Role Table. The question is, how can I also remove the particular role ID associated with the deleted role from the User Table? The User Ta ...

reactjsasp.netaxiosantdasp.net-core-6.0

Struggling to retrieve posted data using Angular with asp.net

I have encountered an issue while sending a post request from Angular to my ASP.NET server. I am trying to access the values of my custom model class (SchoolModel) and I can see that all the values are correct inside Angular. However, when I attempt to ret ...

c#asp.netangulartypescript

Encountering a missing value within an array

Within my default JSON file, I have the following structure: { "_name":"__tableframe__top", "_use-attribute-sets":"common.border__top", "__prefix":"xsl" } My goal is to add values by creating an array, but I am encountering an issue where my ...

javascriptarraysangularjsjson

HTML5 on its own versus the dynamic duo of jQuery Mobile and AngularJS

We are in the process of creating a versatile mobile app that will work on multiple platforms using HTML5, JavaScript, and CSS. Our design approach includes utilizing Bootstrap for a responsive user interface, and Cordova to package the application for bot ...

htmlangularjsjquery-mobilecordova