如何获得Visual Studio Typescript 1.7智能感知以使用Node.js库（Angular2，rxjs）？

Question

[SOLVED] I logged a bug against TypeScript and the fix should be rolled up into the next VS plugin release. Essentially you can get intellisense to work if you specify your module resolution to be "NodeJs". However the compiler doesn't like this because it expects it to be "node". It looks like the fix they're making is to make everything work by specifying "Node".

---

I'm trying to build an Angular2 project with msbuild because I want to use ASP.Net Web API as my back-end. The code compiles and runs fine, but my editor (SublimeText 3 or Visual Studio 2015) doesn't like the way I import the Angular2 libraries:

boot.ts:

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

If I run the same example ( Angular2 Hero Tutorial ) using the TypeScript compiler directly with a tsconfig.json and node lite-server as documented, then SublimeText3 works and can recognize this syntax just fine. However once I switch to msbuild, I get this intellisense error for some reason. Here's other pieces of my project which I think are relevant:

Folder structure:

\
  - 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" 
  }
}

TypeScript compiler section from csproj file (most of this was copied from the Angular2 Hero tutorial tsconfig file, but some of these were set by VS automatically):

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

I've also tried changing the way I reference the Angular2 libraries like below since it matches the actual physical path of the browser script, but unfortunately the generated file doesn't add the ".js" extension to the generated dependency list for some reason. This means that the browser will request the file "browser" instead of "browser.js".

This breaks the runtime:

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

I'm actually not sure how the system is supposed to know how to resolve the 'angular2/platform/browser' syntax, but it seems to work if I don't use msbuild. And given the fact that this code compiles and runs properly, it seems like it should work in my editor as well. Anyone have any ideas?

Answer 1

As far as project property group is set to

<TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>

there is a workaround is to modify Microsoft.Typescript.targets . It makes compiler to work:

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

hardcoded as

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

PS make sure to take a backup of Microsoft.Typescript.targets

Answer 2

This does appear to be a bug in typescript tooling as @AndrewSorokin describes, but instead of editing Microsoft.Typescript.targets , you can override the incorrect code in your project file. Add the following lines to the end of your project file:

<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <!-- ... -->
  <!-- Set the Module Resolution mode to be NodeJs as required by intellisense -->
  <!-- See http://stackoverflow.com/questions/34939261/how-can-i-get-visual-studio-typescript-1-7-intellisense-to-work-with-nodejs-libr -->
  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|AnyCPU'">
    <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
  </PropertyGroup>
  <!-- ... -->
  <!-- Override the moduleResolution parameter to tsc to overcome a bug in intellisense -->
  <!-- See http://stackoverflow.com/questions/34939261/how-can-i-get-visual-studio-typescript-1-7-intellisense-to-work-with-nodejs-libr -->
  <PropertyGroup>
    <CompileTypeScriptDependsOn>
      SpoofTypeScriptModuleResolution;
      $(CompileTypeScriptDependsOn)
    </CompileTypeScriptDependsOn>
  </PropertyGroup>
  <Target Name="SpoofTypeScriptModuleResolution">
    <PropertyGroup>
      <TypeScriptBuildConfigurations>$(TypeScriptBuildConfigurations.Replace('--moduleResolution NodeJs', '--moduleResolution node'))</TypeScriptBuildConfigurations>
    </PropertyGroup>
    <Message Text="Options: $(TypeScriptBuildConfigurations)" />
  </Target>
</Project>