Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 879
Soviut Avatar asked Jun 10 '16 15:06

Soviut


2 Answers

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.

like image 128
Andrei Zhytkevich Avatar answered Oct 31 '22 18:10

Andrei Zhytkevich


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.

like image 16
Nige Avatar answered Oct 31 '22 19:10

Nige