如何从 Angular2 TypeScript 中的模块文件夹加载多个类？

我有一个具有以下模块结构的 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 */
];

TypeScript 编译它时没有错误，但是，在浏览器中，我从系统加载程序和区域中收到以下错误，表示找不到某些文件。

GET http://localhost:4200/app/content/models.js http://localhost:4200/app/content/models.js404（未找到）scheduleTask @ zone.js：101ZoneDelegate.scheduleTask @ zone.js：336Zone.scheduleMacroTask @ zone.js：273（匿名函数）@ zone.js：122send @ VM59771：3fetchTextFromURL @ system.src.js：1154 （匿名函数） @ system.src.js:1735ZoneAwarePromise @ zone.js:584（匿名函数） @ system.src.js:1734（匿名函数） @ system.src.js:2759（匿名函数） @ system.src .js:3333(匿名函数) @ system.src.js:3600(匿名函数) @system.src.js:3985(匿名函数) @system.src.js:4448(匿名函数) @system.src.js :4700(匿名函数) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(匿名函数) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js：256drainMicroTaskQueue @ zone.js：474ZoneTask.invoke @ zone.js：426 zone.js：461未处理的承诺拒绝：错误：XHR错误（404未找到）加载http://localhost:4200/app/content/models.js http://localhost:4200/app/content/models.js在 XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30 http://localhost:4200/vendor/zone.js/dist/zone.js:769:30） 在 ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38 http://localhost:4200/vendor/zone.js/dist/zone.js:356:38） 在 Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48 http://localhost:4200/vendor/zone.js/dist/zone.js:256:48） 在 XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34 http://localhost:4200/vendor/zone.js/dist/zone.js:423:34） 错误加载http://localhost:4200/app/content/models.js http://localhost:4200/app/content/models.js作为“../../模型”来自http://localhost:4200/app/content/services/container/container.service.js http://localhost:4200/app/content/services/container/container.service.js;区域： ;任务：Promise.then；值：错误：错误：XHR 错误（404 未找到）加载http://localhost:4200/app/content/models.js 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 错误：未捕获（承诺中）：错误：错误：XHR 错误（404 未找到）加载http://localhost:4200/app/content/models.js http://localhost:4200/app/content/models.js(…)

当我直接从它导入每个模型时.ts文件，一切正常。

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

如何在 Angular2 中导入模块而不导致错误？

据我所知，这可能就是您想要的：

./model/index.ts 看起来像这样：

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

然后假设您想从whatever.service.ts 导入它

whatever.service.ts 看起来像这样：

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

因为您在模型文件夹中指定了索引文件。您应该能够导入该文件夹。如上所述。

希望这更清楚。