How to load multiple classes from a module folder in Angular2 TypeScript?

Question

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 

My index.ts models look like this:

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

I want all models to be loaded in whatever.service.ts .

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

Part of the barrel downloads of my system-config.js looks like this:

 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 compiles this without errors, however in the browser I get the following errors from the System and Zone loader, saying that certain files cannot be found.

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: 256drainMicroTa skQueue @ 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 in XMLHttpRequest.wrapFn [as _onreadystatechange] ( http: // localhost: 4200 / vendor / zone.js / dist / zone.js: 769: 30 ) in ZoneDelegate.invokeTask ( http: // localhost: 4200 / vendor / zone.js /dist/zone.js{56:38 ) in Zone.runTask ( http: // localhost: 4200 / vendor / zone.js / dist / zone.js: 256: 48 ) in 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: unclean (in promise): error: error: XHR error (404 not found) loading http: // localhost: 4200 / app / content / models. js (...)

When I import each model directly from the .ts file, everything works.

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

How to import modules without causing errors in Angular2?

Answer 1

From what I can say, this is probably what you want:

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

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

Then let's say that you want to import it from your file whatever.service.ts

what.service.ts will look like this:

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

since you are specifying the index file in the models folder. You should be able to simply import the folder. As mentioned above.

Hope this is clearer.

Answer 2

Create a new .ts is the models folder:

New file all_models.ts :

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

Then you can:

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

The only problem is to remember to update all_modules.ts and add links to any new .ts file with models.