What is the best way to import multiple classes from a module folder in Angular2 using TypeScript?

In my Angular2 application, I have organized my modules as follows:

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

        /services
            /whatever
                whatever.service.ts

The content of my models index.ts is shown below:

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

I am trying to load all the models into whatever.service.ts.

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

This is how the barrels loading section in my system-config.js file looks:

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 without any errors, but when I run it in the browser I encounter issues with certain files not being found by the System loader and Zone.

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 its respective .ts file, everything works fine.

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

How can I import modules effectively in Angular2 without encountering these errors?

typescriptmoduleangular

Answer №1

Based on my understanding, this seems to be the solution you are looking for:

Your ./model/index.ts file should contain the following code:

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

Next, if you want to import it into your whatever.service.ts file:

The content of your whatever.service.ts file should be as follows:

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

By specifying an index file in the models folder, you should be able to simply import the entire folder as demonstrated above.

I hope this clarifies things for you.

Answer №2

Start by creating a new .ts file within the models directory:

Name this new file collective_models.ts:

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

After that, you will be able to use the following import statement:

import {Resource, Collection} from '../../models/collective_models';

The main challenge here is making sure to update the all_modules.ts file constantly and include references to any new models in separate .ts files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Anonymous function bundle where the imported namespace is undefined

Here is the code snippet I am working with: import * as Phaser from 'phaser'; new Phaser.Game({ width:300, height:300, scale: { mode: Phaser.Scale.FIT, }, type: Phaser.AUTO, scene: { create() {} }, }); Upon compi ...

typescriptphaser-frameworkrollupjs

How can methods from another class be accessed in a TypeScript constructor?

I need to access a method from UserModel within the constructor of my UserLogic class. How can I achieve this? import { UserModel, ItUser } from '../../models/user.model'; export class UserLogic { public user: ItUser; constructor() { ...

typescriptdependency-injection

Having trouble retrieving spot price using Uniswap SDK due to a transaction error LOK

const quotedAmountOut = await quoterContract.callStatic.quoteExactInputSingle( immutables.token0, immutables.token1, immutables.fee, amountIn, 0 ) I set up a pool on Uniswap V3 for two ERC20 dummy tokens by using the createPool() met ...

node.jstypescriptuniswap

Converting an object into an array using React and TypeScript

Extracted from a form is an object with input, output, and outputType fields that can vary between number, string, and boolean types. To display the information in a table without the output type, I have created a mapped obj. However, I also need to prese ...

reactjstypescriptdictionaryobject

React Native bottom tab navigator not changing between tabs

Hi, I'm new to React Native and I think I might have a structural issue because I can't figure out what I'm doing wrong. I'm trying to create 4 tabs, but when I click on each tab, it doesn't take me to the next page. Nothing happe ...

typescriptreact-native

Encountering NullInjectorError while testing Angular unit tests: DatePipe provider is missing

I have been working on implementing unit tests for a service that has dependencies injected from two other services. One of the injected services utilizes the Angular DatePipe, so I am utilizing the Angular TestBed to automate the process. However, when ru ...

angular

What is the best method for incorporating a variable into an Ionic iframe?

Can anyone help with integrating a variable into an Ionic iframe? <ion-content> <iframe src="http://local/server_api/pr.php?p={{insert-variable-here}}" style="width: 100%; min-height: 100%; height: 100%;" frameborder= ...

angularionic-frameworkionic3ionic4

Export interface for material-ui wrapper to cast any type in TypeScript (React)

I work with React using TypeScript. Recently, I encountered an issue with exporting. I'm creating an interface that encapsulates components from Material-ui. Here is a simplified example: Wrapping.tsx import { default as Component, ComponentProps ...

typescriptimportexportmaterial-ui

Angular Material Textbox with drop shadow

Currently working on a form design and aiming for the input box to resemble the image provided within the angular material matInput framework. Any suggestions on how to accomplish this? Attached is a visual representation of the desired input box appearan ...

angularinputangular-material

Issue: Incorrect parameter supplied for pipe 'AsyncPipe' in MatTable Angular 11

Currently, I am working on integrating Angular MatTable with an async pipe. The data is retrieved from a RESTAPI as an Observable. However, when I attempt to utilize ([dataSource] = "dataSource | async") in this manner, it results in the error described ab ...

angularangular-materialmat-tableasync-pipe

I have a Visual Studio 2019 solution that consists of two projects - one is an Angular project and the other is written in TypeScript. I have successfully configured

We are currently utilizing Visual Studio 2019 (not the VS Code version) for our project. Within this solution, we have multiple projects included. One of these projects contains Angular code that we compile using the traditional 'ng build' comma ...

angulartypescriptvisual-studio-2019

Trying to determine the specific key of an object based on its value in TypeScript?

Looking to create a function that can retrieve the key for a given value. type Items<T> = Exclude<{ [P in keyof T]: [P, T[P]]; }[keyof T], undefined>[]; export const getKeyName = <T extends Record<PropertyKey, unknown>, V>( col ...

typescript

Tips for utilizing automatic type detection in TypeScript when employing the '==' operator

When using '==' to compare a string and number for equality, const a = '1234'; const b = 1234; // The condition will always return 'false' due to the mismatched types of 'string' and 'number'. const c = a = ...

typescript

Enhancing ES6 capabilities with Angular polyfills

While exploring the Angular documentation and various online resources about Angular, I came across a question. If all code is written in Typescript, why would we need ES6 polyfills? My understanding is that webpack eventually transpiles the code to ES5, s ...

angulartypescriptecmascript-6

Tips for executing a type-secure object mapping in Typescript

I am currently working on creating a function in Typescript that will map an object while ensuring that it retains the same keys. I have attempted different methods, but none seem to work as intended: function mapObject1<K extends PropertyKey, A, B>( ...

typescripttyping

Stopping npm build when ESLint detects warnings

Dealing with a particularly immature team, I am determined to make the react-typescript build fail whenever ESLint issues warnings. src/modules/security/components/ForgotPasswordBox/index.tsx Line 8:18: 'FormikHelpers' is defined but never use ...

reactjstypescriptnpmeslint

When working with Angular and evaluating code, I encounter an issue related to the environment that

Here is my code snippet: let var1="environment.test"; console.log(eval(var1)); But when I run it, an error occurs: ERROR ReferenceError: environment is not defined However, if I modify the code to be like this: console.log(environment.test); it works ...

angularevalenvironment

How to access the selectedIndex and handle click events for select options in Angular4

Initially, my aim was to get the selectedIndex and then retrieve the selected data model, but I discovered that I could directly access the selected data model in Angular2 RC2 by following this link: Angular2 RC2 Select Option selectedIndex. However, I e ...

angularhtml-select

Changing environment.ts with custom schematics in angular-cli

Currently, I am working on creating customized schematics for our Angular Cli project. One of the tasks involves adding properties/variables to both the environment.prod.ts and environment.dev.ts files. I am curious if anyone has experience with this and h ...

angularangular-cliangular-schematics

What could be the reason for the Angular2 Component property not appearing on my webpage?

Here is the code snippet I am working with: import {Component} from "@angular/core"; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{secondTitle}}</h2> <main-page></ma ...

angulartypescript