javascript - 我如何像 Java 包一样组织我的 Angular 应用程序文件夹？

Question

如何像 Java 包一样组织 Angular 2 应用文件夹结构？

考虑以下项目布局:

app
 |_model
 |_component
 |_service

我想将 foo.service.ts 从 service 导入到 component 中的 bar.component.ts >。但据我所知，Angular 2 导入仅支持相对路径，如 /../service/，这似乎是非常笨拙的解决方案。

有没有一种方法可以从根文件夹引用带有绝对路径的文件夹，就像 Java 包一样？

Answer 1

更新 2016-06-01

使用 npm install typescript@next 你已经可以使用这个函数了

我假设你的树看起来像这样:

node_modules
 |_@angular
 |_rxjs
app
 |_model
 |_component
 |_service
package.json
tsconfig.json

您应该在 tsconfig.json 中添加以下几行:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "app/*",
        "node_modules/*"
      ]
    }
  }
}

然后您可以像使用常规@angular/rxjs 模块一样引用您的模块

import { MyService } from 'service/MyService';
import { Component } from '@angular/core';
import { Observable } from 'rxjs';

注意:webpack 还需要 webpack.config.js 中的以下几行

resolve: {
    modulesDirectories: [
        'node_modules',
        'app'
    ]
}