如何从Visual Studio 2015中的非相对路径导入模块

Question

我正在使用Visual Studio 2015中的gulp进行角度4项目.我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

首先,请确保您已安装VisualScript 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..
  });

另一个重要的事情是重新启动视觉工作室

我也试过卸载/重新加载项目,但这没有用.