web-dev-qa-db-ja.com

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 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 Unhandled Promise拒否：エラー：XHRエラー（404が見つかりません）の読み込み http：// localhost：4200/app/content/models.js at XMLHttpRequest.wrapFn [as _onreadystatechange]（ http：// localhost：4200/vendor/zone.js/dist/zone.js：769： ）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 ）ロードエラー http：// localhost：4200/app/content/models.js as "../../models" from 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が見つかりません）の読み込み http：// localhost ：4200/app/content/models.js （…）

各モデルを.tsファイルから直接インポートすると、すべてが機能します。

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

Angular2でエラーを発生させずにモジュールをインポートするにはどうすればよいですか？

typescriptmoduleangular
10
Soviut

私が言えることから、これはおそらくあなたが望むものです：

./model/index.tsは次のようになります。

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

次に、whatever.service.tsからインポートしたいとします。

what.service.tsは次のようになります。

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

モデルフォルダにインデックスファイルを指定しているためです。フォルダをインポートできるはずです。上記のように。

これがより明確になることを願っています。

13
Nige

新しい.tsを作成します。これはmodelsフォルダーです。

新しいファイルall_models.ts：

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

その後、次のことができるようになります。

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

ここでの唯一の問題は、all_modules.tsを最新の状態に保ち、モデルを含む新しい.tsファイルへの参照を追加することを忘れないことです。

0
Andrei Zhytkevich