如何从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 */
];

TypeScript编译时没有错误,但是,在浏览器中,我从系统加载程序和区域中得到以下错误,说无法找到某些文件.

获取http:// localhost:4200/app/content/models.js 404(未找到)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 Not Found) 在XMLHttp上加载http:// localhost:4200/app/content/models.js Request.wrapFn [按_onreadystatechange](HTTP://本地主机:4200 /供应商/ zone.js/DIST/zone.js:769:30)在ZoneDelegate.invokeTask(HTTP://本地主机:4200 /供应商/ zone.js /dist/zone.js:356:38)在XMLHttpRequest.ZoneTask.invoke的Zone.runTask(http:// localhost:4200/vendor/zone.js/dist/zone.js:256:48)中(http:/ /localhost:4200/vendor/zone.js/dist/zone.js:423:34)错误加载的http://本地主机:4200 /应用/内容/ models.js为从"../../models" HTTP :// localhost:4200/app/content/services/container/container.service.js ; 区域:; 任务:Promise.then; 值:错误:错误:XHR错误(未找到404)加载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 Not Found)正在加载http:// localhost:4200/app/content/models.js( ...)

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

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

如何在不导致Angular2错误的情况下导入模块？

Answer 1

据我所知,这可能是你想要的:

./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文件夹中指定了索引文件.您应该只能导入该文件夹.如上所述.

希望这更清楚.

Answer 2

新建一个.ts文件夹models：

新文件all_models.ts：

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

然后你将能够执行以下操作：

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

这里唯一的问题是记住保持all_modules.ts最新状态并添加对任何.ts带有模型的新文件的引用。