如何组织像Java包一样的Angular应用程序文件夹?

时间:2016-05-31 13:37:43

标签: javascript module typescript angular systemjs

如何组织像Java包一样的Angular 2 app文件夹结构?

考虑以下项目布局:

app
 |_model
 |_component
 |_service

我想将服务中的foo.service.ts导入组件中的bar.component.ts。但据我所知,Angular 2导入仅支持像/../service/这样的相对路径,这似乎是非常笨重的解决方案。

有没有办法从根文件夹引用具有绝对浴的文件夹,就像使用Java包一样?

2 个答案:

答案 0 :(得分:3)

更新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'
    ]
}

答案 1 :(得分:1)

还没有,它应该很快出现在Typescript 2.0

看这里 https://github.com/Microsoft/TypeScript/issues/5039