如何從Angular2 TypeScript的模塊文件夾中加載多個類？

Question

我有以下的模塊結構的Angular2應用：

/app 
    /content 
     /models 
      resource.ts 
      container.ts 
      entity-type.ts 
      index.ts 

     /services 
      /whatever 
       whatever.service.ts 

我的模型index.ts樣子：

export * from './resource'; 
export * from './container'; 
export * from './entity-type'; 

我希望能夠給所有的模型加載到whatever.service.ts。

import {Resource, Container} from '../../models'; 

加載的我system-config.js文件部分的桶的樣子：不過

const barrels: string[] = [ 
    // Angular specific barrels. 
    '@angular/core', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/http', 
    '@angular/router', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 

    // Thirdparty barrels. 
    'rxjs', 

    // App specific barrels. 
    'app', 
    'app/shared', 
    'app/content', 
    /** @cli-barrel */ 
]; 

打字稿編譯本沒有錯誤，在瀏覽器中，我得到從系統加載器和區以下錯誤說某些文件無法找到。

GET http://localhost:4200/app/content/models.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM59771:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/app/content/models.js at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30) at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38) at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48) at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34) Error loading http://localhost:4200/app/content/models.js as "../../models" from http://localhost:4200/app/content/services/container/container.service.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/app/content/models.js (…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/app/content/models.js (…)

當我直接導入每個模型從它的.ts文件，一切正常。

import { EntityType } from '../../models/entity-type'; 
import { Container } from '../../models/container'; 

如何在不導致Angular2錯誤的情況下導入模塊？

Answer 1

創建一個新的.ts是models文件夾：

新文件all_models.ts：

import * from './entity-type'; 
import * from './container'; 
... 

然後你就可以做到：

import {Resource, Container} from '../../models/all_models'; 

這裏唯一的問題是請記住保持all_modules.ts的最新狀態，並添加對帶有型號的任何新的.ts文件的引用。

Answer 2

從我可以告訴這可能是你想要的東西：

./model/index.ts會是這個樣子：

export * from './resource'; 
export * from './container'; 
export * from './entity-type'; 

那麼可以說你想從導入您的whatever.service.ts

whatever.service.ts應該是這樣的：

import {Resource, Container} from '../models'; 

，因爲您在models文件夾中指定了一個索引文件。你應該能夠導入文件夾。如上所述。

希望這個更清楚。