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

10
votes

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 models index.ts looks like:

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

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

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

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

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

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

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

How can I import modules without causing errors in Angular2?

2
typescriptmoduleangular
Rename your index.ts to index.d.ts – Andrei Zhytkevich
@Andzhik that didn't seem to make any difference. I'm getting the same errors from SystemJS in the browser saying models.js can't be found. – Soviut
I added my barrels list from the system-config.js file to hopefully shed some light on why these modules aren't loading. – Soviut

2 Answers

15
votes

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

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

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

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

whatever.service.ts would look like this:

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

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

Hope this is clearer.

1
votes

Create a new .ts is the models folder:

New file all_models.ts:

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

Then you'll be able to do:

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

The only issue here is to remember to keep all_modules.ts up to date and add references to any new .ts file with models.