node_modules文件夹和Angular2在Visual Studio 2015中的ASP.Net MVC项目中

Question

我按照Angular.io's quickstart中的步骤（Angular组件部分除外）将Angular2安装到我的新ASP.Net MVC Core项目中。

默认情况下，它以分层方式安装node_modules，并导致我的web项目未被加载，因为文件路径太长。然后我使用“npm重复数据删除”来压扁它。

我得到了一些“内部版本号：找不到名称‘____’”的错误（地图，设置，WeakMap等）

我该如何解决这个问题？

UPDATE

这是我在我的web项目文件。

<?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

此设置为我工作的ASP.NET项目中...

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> 

并确保whenev如果您在打字稿文件中引用模块，则只使用包的名称，例如

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