Come caricare più classi da una cartella del modulo in Angular2 TypeScript?

Question

Ho un'applicazione Angular2 con la seguente struttura del modulo:

/app 
    /content 
     /models 
      resource.ts 
      container.ts 
      entity-type.ts 
      index.ts 

     /services 
      /whatever 
       whatever.service.ts 

I miei modelli index.ts assomiglia:

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

Voglio essere in grado di caricare tutti i modelli in whatever.service.ts.

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

Le botti loading parte dei miei file system-config.js assomiglia:

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

dattiloscritto compila questo senza errore, tuttavia, nel browser ottengo i seguenti errori dal caricatore del sistema e Zona dicendo alcuni file non può essere trovato

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 (…)

Quando importare ciascun modello direttamente dal file .ts, tutto funziona.

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

Come posso importare i moduli senza causare errori in Angular2?

Answer 1

Creare un nuovo .ts è la cartella models:

Nuovo file all_models.ts:

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

Allora sarete in grado di fare:

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

L'unico problema qui è di ricorda di tenere aggiornato all_modules.ts e di aggiungere riferimenti a qualsiasi nuovo file .ts con i modelli.

Answer 2

Da quello che posso dire questo è probabilmente quello che si vuole:

./model/index.ts sarebbe simile a questa:

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

consente poi dire che si desidera importare dal vostro whatever.service.ts

whatever.service.ts sarebbe simile a questa:

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

poiché si specifica un file di indice nella cartella dei modelli. Dovresti essere in grado di importare semplicemente la cartella. Come specificato sopra.

Spero che questo sia più chiaro.