How do I 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 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?

@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
– Soviut, Commented Jun 14, 2016 at 3:49
I added my barrels list from the system-config.js file to hopefully shed some light on why these modules aren't loading. — Soviut
– Soviut, Commented Jun 14, 2016 at 3:52

Nige · Accepted Answer · 2016-06-10 15:35:42Z

16

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.

answered Jun 10, 2016 at 15:35

Nige

1,2332 gold badges10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Joe Clay Over a year ago

This is actually how Angular 2 does the exports for its scoped packages. It's a good approach :)

Soviut Over a year ago

this is what my index.ts already looks like. I've updated my question to include that.

Nige Over a year ago

Your doing: import {Resource, Container} from '../../models'; isnt it back one level so: import {Resource, Container} from '../models';

Soviut Over a year ago

This didn't solve the issue. The path seems to be correct since it must be that way to compile the TypeScript. So it must be a System loader issue instead?

SkyWalker Over a year ago

Why is this not finally accepted as answer! God how I hate sloppy people!

Andrei Zhytkevich · Accepted Answer · 2016-06-10 15:23:24Z

1

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.

answered Jun 10, 2016 at 15:23

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

1 Comment

Ken Over a year ago

This answer gave me a "ts" file I could find at the top of my file list, for me it is a little cleaner than index.ts. Also the "import" statements are supposed to "export". please correct and I will remove the last part of this comment

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related