首页 文章

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

提问于
浏览 次
9

我有一个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 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未处理的Promise rejection：错误：XHR错误（404 Not Found）在XMLHt上加载http：// localhost：4200 / app / content / models.js在ZoneDelegate.invokeTask的tpRequest.wrapFn [as _onreadystatechange]（http：// localhost：4200 / vendor / zone.js / dist / zone.js：769：30）（http：// localhost：4200 / vendor / 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加载http：// localhost：4200 / app / content / models.js为“../../models”时出错：// 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错误的情况下导入模块？

typescript module angular

2 回答

  • 0

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

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

    希望这更清楚 .

    回复于
  • 10

    创建一个新的 .ts 是 models 文件夹：

    新文件 all_models.ts ：

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

    然后你就能做到：

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

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

    回复于

相关问题