如何在 Visual studio 2015 中从非相对路径导入模块

Question

我在 Visual studio 2015 年使用 gulp 进行 angular 4 个项目。我从 here.

得到了 Visual Studio 2015 QuickStart

tsc 版本：2.5.2

我的项目结构：

src
└──angular
     └──common
           └──models
                └──items.ts
     └──ui
         └──components
                └──items.component.ts

items.ts

export module items {
  export const listOfItems = [1,2,3];
}

我想在我的 src 文件夹中导入所有内容时使用非相对路径，即：

items.component.ts

import { items } from 'items';

这是我的 tsconfig.json 文件（与 src 处于同一级别）：

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "node_modules/@types/"
    ]
  }
}

我已经尝试将其添加到 compilerOptions:

"baseUrl": "." //it doesn't help.

之后：

"baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "src/angular/*" // still nothing.
      ]
}

我也添加了 rootDirs 但我仍然收到此错误：

Can't find module 'items'

Answer 1

首先确保你已经安装了TypeScript for Visual Studio 2015 - v2.5.2，之后：

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
     "paths": {
     "@models/*": [ "angular/common/models/*" ]
     }
    //..
  }
}

用法：

import { items } from '@models/items';

所以，这里发生了什么：

* 指向我们文件的实际名称，所以在我们的例子中 @models 之后有 * 指向 items，并且 items 在 angular/common/models/*.

里面的某个地方

此外，我们应该将此添加到systemjs.config.js中，以便可以解析路径：

 System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/',
      "@models/*": ["rootDist/angular/common/models/*"]
                        ^
                        where you keep your files, for example dist/
    }
    // other things..
  });

另外一件重要的事情是 重新启动 visual studio

我也试过 unload/reload 这个项目，但是没用。

如何在 Visual studio 2015 中从非相对路径导入模块

How to import module from non-relative paths in Visual studio 2015

compiler-options

typescript

ecmascript-6

visual-studio-2015

angular