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.

https://i.sstatic.net/6ZbRq.png

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

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?

My dropdown is populated with owners from the owners data, but it includes an extra blank option. I need to eliminate this blank option. However, when I make the necessary changes to remove it, the required validator stops working properly. <md-input-c ...

javascripthtmlangularjs

Can you provide instructions on creating a c# class for the following json object?

As a beginner in json, I have the following json object and need assistance in creating a C# class for it: { "JBS" : { "name" : "Jobsite" }, "LNK" : { "name" : "Linked IN" }, "MUK" : { "name" : "Monster UK" } } I requi ...

c#asp.netjson

ionic - how to make tabs float at the bottom of the screen

Having a problem with positioning Ionic tabs at the bottom of the screen. I want them to always be visible, like position: fixed; bottom: 0; left: 0;. However, they're not behaving as expected in my current setup. Here's the template I'm ...

angularjsionic-frameworkionic-tabs

AngularJS ngAnimate triggering prematurely

In the current setup, p2 animates in while p1 is still animating out. After that, p1 disappears and p2 glitches up the page. The desired effect is for 1 to fade out and then have 2 fade in. html: <nav> <a ng-click="changeView('p1' ...

javascriptangularjs

Changing the target in tsconfig.json to "es2022" leads to the error message "Property 'xx' is referenced before its initialization.ts(2729)"

My Angular code is filled with instances where I assign a property at its definition like this... public data$ = this.service$.fetchData; constructor(private service$: MyService However, after updating my tsconfig.json target to "es2022", I encountered ...

angulartypescript

Issue with Ionic 2's infinite scroll not triggering method on second scroll attempt

I utilized the ion-tab element to showcase a page (inboxitem) which encompasses ion-list and makes use of ion-infinite-scroll. The following code snippet resides in inboxitem.html <ion-content class="inbox can-swipe-list"> <ion-list> ...

javascriptangulartypescriptionic2

Issue with Material UI DateTimePicker not submitting default form value

Currently, I am utilizing React for my frontend and Ruby on Rails for my backend. My issue lies in submitting the value from my materialUI DateTimePicker via a form. The problem arises when I attempt to submit the form with the default DateTime value (whic ...

reactjsruby-on-railstypescriptreact-reduxmaterial-ui

Unveiling the Power of Ionic and React for Component Repetition

I'm having trouble figuring out how to repeat my component multiple times using react in Ionic. Can someone assist me with this? Here's an example: In my Component.tsx file, I have the following code: import React from 'react'; import ...

javascriptreactjstypescriptionic-frameworkionic4

The Angular Material Table is not showing any data on the screen

My challenge is to consolidate data from 4 different endpoints in order to generate a ListElement that will populate an angular material table. Despite receiving the correct data in my logs, the table remains empty. Interestingly, when I include a conditio ...

angulartypescriptangular-materialangular-material-table

An Ajax call navigates to the index.html page

Could you please assist with an issue I am facing? I have written the code below to make an ajax request to a specific link. However, instead of executing the ajax call using a POST request, the page is being redirected to index.html with the link in the ...

phpjavascriptjqueryasp.netajax

Learning to implement forwardRef in MenuItem from Material-UI

Encountering an error when pressing Select due to returning MenuItem in Array.map. Code const MenuItems: React.FC<{ items: number[] }> = (props) => { const { items } = props; return ( <> {items.map((i) => { return ( ...

reactjstypescriptmaterial-ui

The test session failed to launch due to an error in initializing the "@wdio/cucumber-framework" module. Error message: [ERR_PACKAGE_PATH_NOT_EXPORTED]

I added @wdio/cli to my project using the command 'npm i --save-dev @wdio\cli'. Next, I ran 'npx wdio init' and chose 'cucumber', 'selenium-standalone-service', 'typescript', 'allure' along w ...

typescriptcucumberwebdriver-iocucumberjs

What causes an error in SQL stored procedure execution when there is an empty cell?

SELECT CAST ([content_html] AS XML).query('/root/Physicians/specialty/a') AS [Specialty1] , CAST ([content_html] AS XML).query('/root/Physicians/specialty2/a') AS [Specialty2] , CAST ([content_html] AS XML).query('/root ...

c#asp.netsql-server

Retrieve every single page from a PDF file using the TextSharp library

Using an older version of itextsharp, I am able to extract a PDF file with the following code: string Oldfile = @"C:/test.pdf"; // Gets the Template (new FileInfo("C:/C:/test.pdf")).Directory.Create(); // Create this folder if it does not exist s ...

c#asp.netpdfitext

What is the purpose of using detectChanges() when utilizing the default change detection strategy in Angular?

Currently, I am facing an issue while working on my Angular 4 application. I have noticed that I need to use this.changeDetectorRef.detectChanges(); to update the view whenever there is a change in the model. This requirement arises in scenarios like pagin ...

angulartypescriptangular2-changedetection

Upon making a rest service call, ngHandsontable fails to display any content

I've been attempting various methods to integrate ngHandsontable with a REST service. Despite my thorough search efforts, I have only come across examples that use static variable definitions instead of making service calls for data retrieval. Does an ...

angularjshandsontable

Simulating dependencies of an AngularJS module in Jasmine unit tests

Currently, I'm facing a challenge with unit testing controller code within a module that has dependencies on other modules. I've been struggling to properly mock these dependencies for testing purposes. I am utilizing the Jasmine Framework and e ...

unit-testingangularjsjasminekarma-runner

What is the best method to condense an array or extract only the valid values?

Looking to find the total count of properties that are true from an array of objects? Here's an example: let data = [ { comment: true, attachment: true, actionPlan: true }, { whenValue: '', ...

typescript

Is there a way to automatically hide a div based on a checkbox value when the page loads?

How can I hide a div in my view when a checkbox is not checked upon page load? <input type="checkbox" class="k-checkbox" id="chkInvoiceStatusActive" asp-for="InvoiceStatus" value="true" /> <input t ...

javascriptjqueryasp.net

Guide to automatically installing @types for all node modules

As a newcomer to Typescript and NodeJs, I have been experiencing errors when mentioning node modules in my package.json file and trying to import them. The error messages I always encounter are as follows: Could not find a declaration file for module &apos ...

node.jsangulartypescriptnpm