如何组织像Java包一样的Angular应用程序文件夹？ [英] How can I organize my Angular app folders like a Java package?

问题描述

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

How to organize Angular 2 app folder structure like Java packages?

考虑以下项目布局：

app
 |_model
 |_component
 |_service

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

I would like to import foo.service.ts from service to bar.component.ts in component. But as far as I know, Angular 2 import supports only relative paths like /../service/, which seems very clunky solution.

有没有办法从根文件夹引用带有绝对浴的文件夹，就像使用Java包一样？

Is there a way to refer folders with absolute bath from root folder, like with Java packages?

推荐答案

更新2016-06-01

使用 npm install typescript @ next 你已经可以使用这个功能了

using npm install typescript@next you can already use this function

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

I assume that your tree looks like this:

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

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

You should add in your tsconfig.json the following lines:

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

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

then you can reference your modules like you do with regular @angular/rxjs modules

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

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

Note: webpack needs also the following lines in webpack.config.js

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

这篇关于如何组织像Java包一样的Angular应用程序文件夹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！