Utilizing Angular2 in an ASP.Net MVC project within Visual Studio 2015 requires incorporating the node_modules folder

After closely following the instructions outlined in Angular.io's quickstart guide to integrate Angular2 into my new ASP.Net MVC Core project, I encountered a hiccup. The node_modules were structured hierarchically by default, leading to file path issues that prevented my web project from loading properly. Resolving this involved flattening the structure using "npm dedupe".

Now, however, I am faced with multiple errors during the build process: "Build: Cannot find name '____'" (specifically Map, Set, WeakMap, etc.)

How can I address and resolve these errors?

LATEST UPDATE:

Here are the contents of my web project file:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
  </PropertyGroup>
  <Import Project="$(VSToolsPath)\DNX\Microsoft.DNX.Props" Condition="'$(VSToolsPath)' != ''" />
  <PropertyGroup Label="Globals">
    <ProjectGuid>3775534b-d08c-45f2-8d5a-4a4f6e91edb9</ProjectGuid>
    <RootNamespace>MyProject</RootNamespace>
    <BaseIntermediateOutputPath Condition="'$(BaseIntermediateOutputPath)'=='' ">..\..\artifacts\obj\$(MSBuildProjectName)</BaseIntermediateOutputPath>
    <OutputPath Condition="'$(OutputPath)'=='' ">..\..\artifacts\bin\$(MSBuildProjectName)\</OutputPath>
    <SccProjectName>SAK</SccProjectName>
    <SccProvider>SAK</SccProvider>
    <SccAuxPath>SAK</SccAuxPath>
    <SccLocalPath>SAK</SccLocalPath>
  </PropertyGroup>
  <PropertyGroup>
    <SchemaVersion>2.0</SchemaVersion>
  </PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
  </PropertyGroup>
  <Target Name="FixTsBuildConfiguration" BeforeTargets="CompileTypeScript" >
    <PropertyGroup>
      <TypeScriptBuildConfigurations>$(TypeScriptBuildConfigurations.Replace("--moduleResolution NodeJs", "--moduleResolution node"))</TypeScriptBuildConfigurations>
   </PropertyGroup>
  </Target>
  <ItemGroup>
    <DnxInvisibleContent Include="bower.json" />
    <DnxInvisibleContent Include=".bowerrc" />
    <DnxInvisibleContent Include="package.json" />
    <DnxInvisibleFolder Include="wwwroot\bower_components\" />
    <DnxInvisibleFolder Include="wwwroot\node_modules\" />
  </ItemGroup>
  <Import Project="$(VSToolsPath)\DNX\Microsoft.DNX.targets" Condition="'$(VSToolsPath)' != ''" />
</Project>

Answer №1

this configuration is effective within the confines of an ASP.NET project...

tsconfig.json

"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": false,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "./dist"
},
"exclude": [
        "node_modules"
      ]

index.html

<script>
//configure system loader
    System.config({
        defaultJSExtensions: true,
        paths: {
            '*': 'node_modules/*',
            'dist/*': 'dist/*'
        }
    });
</script>

Ensure that when referencing modules in your typescript file, only use the package name, for example:

import {Component, OnInit, Inject} from 'angular2/core';

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

Can Typescript union be utilized to define field choices?

I am working with a type that can accept either a string or a number as options, defined like this: type Result = string | number type ValueData = { data: Result } const valueDataSchema = new mongoose.Schema({ data: { type: Result } ...

Using a Javascript library within an Angular component: A comprehensive guide

I've been working on a Web-Client project that involves visualizing sensor data such as velocity and acceleration within a coordinate system. In order to display this coordinate system, I decided to use the graph.js library from https://github.com/dhu ...

Install a package using npm while specifying a custom local installation directory

Struggling with installing a local library within another local library and encountering an issue with the package.json: "dependencies": { "@company/lib_name": "file:../../../dist/libs/company/lib_name", ... } Unfortunate ...

What is the method to assert that two arguments are equal within a function?

When working with TypeScript, you can pass a value to a function and have that function assert the value is true for type narrowing. For example: function assertTrue(v: unknown, message: string): asserts v { if (!v) { throw new MySpecialError(message ...

Prevent the chosen item from being transferred from drop down One to drop down Two using Angular 2 Material

<div class="row no-overflow"> <div class="col-md-1 window-pad-height"> <mat-label> Opportunity 1: </mat-label> </div> <div class="col-md-2 no-overflow"> <mat-form-field class="no-overflow"& ...

Determine if a dialog is currently open in Angular Material

I recently implemented the Angular Material dialog in my app to display warning messages. Now, I'm facing a challenge where I need to determine if a dialog is already open: private _openDialog() { // if (this.dialog.isOpen()) return; <-- NOT WO ...

Utilize Material-UI in Reactjs to showcase tree data in a table format

I am currently tackling a small project which involves utilizing a tree structure Table, the image below provides a visual representation of it! click here for image description The table displayed in the picture is from my previous project where I made ...

Displaying notification in Ionic 2

Whenever I click on the register button, if I fill out all the fields I am taken to the regsuccess page. Otherwise, I receive a message saying to fill in all required fields. However, I want to display an alert message using Ionic2 and TypeScript. HTML: ...

"Deprecated: The gridApi.gridOptionsWrapper in Ag-Grid is no longer supported. Here's how

In my enterprise-level application, we have around 30 ag-grids integrated with Angular. We typically use a common service to handle all data exporting and copying functionalities for the grids. Previous Approach Previously, we utilized gridApi.gridOptions ...

Struggling to access the properties of a Material-UI Button

import * as React from "react"; import { styled } from "@mui/material/styles"; import MuiButton from "@mui/material/Button"; import Slider from "@mui/material/Slider"; interface Props { type: "primary" | ...

Obtain the accurate language code for the baseHref by utilizing Firebase hosting in conjunction with Angular

Within my Angular project, I have implemented i18n for the languages "sv" (Swedish) and "en" (English). My objective is to have "/sv" or "/en" added to baseHref when users access mypage.com, so that the correct index.html is loaded from Firebase Hosting b ...

What is the process for integrating Angular files into an Express server?

I am trying to figure out how to host Angular files on my Express server. My friend created some web pages using Angular and I have an Express server set up. I have tried searching for a solution online but have not been successful. I have looked at some p ...

Display axis labels vertically next to each column in ng2-google-chart

https://i.sstatic.net/ZCdfB.png Currently working with version 4.0.0 of ng2-google-charts, I am aiming to show hAxis text next to the column. Although I attempted using slantedText and slantedTextAngle, they do not seem to be compatible within the chart. ...

Having difficulty constructing a full stack application using Express

I've been struggling to configure a full stack app using create-react-app with Express and TypeScript. My main issue is figuring out how to compile the server files into a build folder. I have separate tsconfig files for the server and create-react-ap ...

Angular2 application encounters issue with target attribute being overlooked by Chrome

I am trying to implement a link in an iframe following the instructions on W3Schools: <iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"> </iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3S ...

Error with Angular Universal SSR CSS animation transformation

I recently implemented Angular universal into my application by following the step-by-step guide provided at https://angular.io/guide/universal. While the process itself was straightforward, I am currently facing a challenge with the following error: ERRO ...

Having difficulty authenticating a JWT token in my Nextjs application

Help required with verifying a JWT token in Nextjs as I'm encountering the following error: TypeError: Right-hand side of 'instanceof' is not an object See below for the code I am currently using: useEffect(() => { let token = localS ...

Sample: "Exploring the world of Realm with embedded objects in React

Can anyone share specific instances of utilizing realm with React Native and TypeScript while incorporating embedded objects? Typically, you can supply a partial object containing properties to be sent to realm for CRUD operations: realm.write(() => { ...

Exploring the depths of OfficeScript: A guide to accessing nested objects using interfaces and setValues()

Currently, I am diving into Excel Office Script through API requests. Even though I'm not a programmer by trade, I find myself facing challenges that I wouldn't encounter in jQuery. The struggle lies in structuring objects correctly to set values ...

It appears that the execution of the request in Alphavantage was unsuccessful

Upon running the code snippet below, I noticed that the terminal outputs "function called" and "end function", but skips over the intermediate console.log(). It seems like the request is not being executed properly. Any ideas why this might be happening? e ...