如何从Angular2 TypeScript的模块文件夹中加载多个类? [英] How do I load multiple classes from a module folder in Angular2 TypeScript?

问题描述

我有一个具有以下模块结构的Angular2应用程序:

I have an Angular2 application with the following module structure:

/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.

I want to be able to load all the models into whatever.service.ts.

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

我的system-config.js文件的枪管装载部分看起来像:

The barrels loading portion of my system-config.js files looks like:

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可以毫无错误地进行编译，但是，在浏览器中，我从系统加载器和Zone中收到以下错误，提示找不到某些文件.

TypeScript compiles this without error, however, in the browser I get the following errors from the System loader and Zone saying certain files can't be found.

获取 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)正在加载 http://本地主机:4200/app/content/models.js 在XMLHttpRequest.wrapFn [作为_onreadystatechange]( http://localhost: 4200/vendor/zone.js/dist/zone.js:769:30 ) 在ZoneDelegate.invokeTask( http://localhost:4200/vendor/zone.js/dist/zone.js:356:38 ) 在Zone.runTask( 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/app/content/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)正在加载

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文件导入每个模型时，一切正常.

When I import each model directly from it's .ts file, everything works.

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

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

How can I import modules without causing errors in Angular2?

推荐答案

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

From what I can tell this is probably what you want:

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

./model/index.ts would look something like this:

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

然后可以说您要从您的what.service.ts

Then lets say you want to import it from your whatever.service.ts

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

whatever.service.ts would look like this:

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

因为要在models文件夹中指定索引文件.您应该能够只导入文件夹.如上所述.

since you are specifying an index file in the models folder. You should be able to just import the folder. As specified above.

希望这更清楚.

这篇关于如何从Angular2 TypeScript的模块文件夹中加载多个类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！