node.js - 如何让 Visual Studio Typescript 1.7 智能感知与 Nodejs 库(Angular2、rxjs)一起使用？

Question

[已解决]我登录了bug against TypeScript并且修复应该汇总到下一个 VS 插件版本中。本质上，如果您将模块分辨率指定为“NodeJs”，您就可以让智能感知工作。然而编译器不喜欢这样，因为它希望它是“Node ”。看起来他们正在做的修复是通过指定“Node”使一切正常工作。

<小时/>

我正在尝试使用 msbuild 构建 Angular2 项目，因为我想使用 ASP.Net Web API 作为后端。代码编译并运行良好，但我的编辑器(SublimeText 3 或 Visual Studio 2015)不喜欢我导入 Angular2 库的方式:

boot.ts:

import {bootstrap} from 'angular2/platform/browser';  // error: cannot find module
import {AppComponent} from './app.component';
bootstrap(AppComponent, []);

如果我直接使用 TypeScript 编译器以及文档中的 tsconfig.json 和 Node lite-server 运行相同的示例 ( Angular2 Hero Tutorial )，则 SublimeText3 可以正常工作并且可以很好地识别此语法。但是，一旦我切换到 msbuild，由于某种原因，我会收到此智能感知错误。以下是我认为相关的项目的其他部分:

文件夹结构:

\
  - index.html
  - package.json
  \app
      - boot.ts
      - app.component.ts
  \node_modules
      \angular2
          \platform
              - browser.js
              - browser.d.ts

package.json:

{
  "name": "angular2-webapi",
  "version": "1.0.0",
  "scripts": {
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "typescript": "^1.7.3" 
  }
}

来自 csproj 文件的 TypeScript 编译器部分(其中大部分是从 Angular2 Hero tutorial tsconfig 文件复制的，但其中一些是由 VS 自动设置的):

<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
  <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
  <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
  <TypeScriptModuleKind>System</TypeScriptModuleKind>
  <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
  <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
  <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
  <TypeScriptSourceMap>True</TypeScriptSourceMap>
  <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
  <TypeScriptModuleResolution>node</TypeScriptModuleResolution>
  <TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
</PropertyGroup>          

我还尝试更改引用 Angular2 库的方式，如下所示，因为它与浏览器脚本的实际物理路径匹配，但不幸的是，由于某种原因，生成的文件没有将“.js”扩展名添加到生成的依赖项列表中。这意味着浏览器将请求文件“browser”而不是“browser.js”。

这会破坏运行时:

import {bootstrap} from '../node_modules/angular2/platform/browser';

我实际上不确定系统应该如何知道如何解析“angular2/platform/browser”语法，但如果我不使用 msbuild，它似乎可以工作。鉴于此代码可以正确编译和运行，它似乎也应该在我的编辑器中工作。大家有什么想法吗？

Answer 1

就项目属性组设置为

<TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>

有一个解决方法是修改Microsoft.Typescript.targets。它使编译器能够工作:

<TypeScriptBuildConfigurations Condition="'$(TypeScriptModuleResolution)' != ''">$(TypeScriptBuildConfigurations) --moduleResolution $(TypeScriptModuleResolution)</TypeScriptBuildConfigurations>

硬编码为

<TypeScriptBuildConfigurations Condition="'$(TypeScriptModuleResolution)' != '' and '$(TypeScriptModuleResolution)' != 'NodeJs'">$(TypeScriptBuildConfigurations) --moduleResolution $(TypeScriptModuleResolution)</TypeScriptBuildConfigurations>
<TypeScriptBuildConfigurations Condition="'$(TypeScriptModuleResolution)' == 'NodeJs'">$(TypeScriptBuildConfigurations) --moduleResolution node</TypeScriptBuildConfigurations>

PS 确保备份 Microsoft.Typescript.targets