Exporting a class from an index.ts file may result in a problem where the injected constructor is

Utilizing an index.ts file to manage exports, following the guidelines outlined in the Angular 2 style guide (https://github.com/mgechev/angular2-style-guide/blob/master/old/README.md#directory-structure), has been successful throughout my application development. However, I encountered a peculiar error when attempting to inject one service into another.

The class being exported:

import {Injectable} from "angular2/core";
@Injectable()
export class UserIds{
   private _signature_id:string;
   private _role_id:number;
   get signature_id():string{
      return this._signature_id;
   }
   set signature_id(id:string){
      this._signature_id = id;
   }
   get role_id():number{
      return this._role_id;
   }
   set role_id(id:number){
      this._role_id = id;
   }
}

The contents of the index.ts file:

export {Midiate} from "./midiate.service/midiate.service";
export {HttpRest} from "./http_rest.service/http_rest.service";
export {UserIds} from "./user_ids.service/user_ids.service"

The code snippet that triggered the error (the importing file):

import {UserIds} from "../index";
import {Http} from 'angular2/http';
@Injectable()
export class HttpRest{
 constructor(
    public _http: Http,
    public userIdsx: UserIds
 ){}
...
}

The browser threw the following error:

EXCEPTION: Cannot resolve all parameters for 'HttpRest'(Http, undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'HttpRest' is decorated with Injectable.

As observed, the UserIds class was undefined in the constructor parameters.

Resolving the issue by importing UserIds directly from the source file:

import {UserIds} from "../user_ids.service/user_ids.service";

Despite resolving the problem, my preference is to maintain the older style utilizing the index.ts like other services and components in my application, while also seeking to understand the cause of this occurrence.

Answer №1

It appears that the order in which you list your exports in index.ts is important! Whether this is a bug or not, it's worth taking note of...

When using classes with metadata, make sure they are placed at the beginning of index.ts file. If one class injects another, ensure that the injected class comes before the injecting one.

Answer №2

In Minko Gechev's style guide, he mentions referring to the file by its name directly. When I faced a similar issue, I resolved it by relocating my facade file to a higher level folder and referring to it using its name. To prevent any naming conflicts with the facade file causing confusion in the paths due to the absence of a file extension in the path, I also renamed the folder.

While exploring solutions, I stumbled upon this question where someone suggested creating an index.ts file within the folder to address the same issue.

Transforming the structure from:

| shared
    | services
        | login.service.ts
        | blog.service.ts

To:

| shared
    | _services
        | login.service.ts
        | blog.service.ts
    | services.ts

With the content of services.ts being:

export {LoginService} from './_services/login.service'
export * from './_services/blog.service'

I then import my services like this:

import {LoginService, BlogService} from './shared/services'

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

Troubleshooting the tabindex issue with buttons in MatMenu in Angular

I am currently using Angular 17 in my project and I am working on adding ADA compliance to it by placing tabindex where needed. However, I am encountering an issue with a button inside a mat menu. The tabindex="0" attribute is not focusing on th ...

React - Parent Component not successfully passing Ajax data to Child Component

I have a parent component and a child component. I am using the fetch method within the componentDidMount() callback to retrieve data from an API and then set the state with key items to that data. The intention is for this data to be passed down to the ch ...

"Effortlessly Engage Users with Rails and AJAX Comment Posting

Running a simple blog app dedicated to video game reviews, I encountered an issue with AJAX. As a self-taught student developer, I'm facing a challenge where posting comments on review pages triggers a full page refresh instead of dynamically updating ...

Troubleshooting: The issue with applying 'style' in react-draft-wysiwyg

Is there a way to style my textboxes within a rectangle with a default height? I attempted to use the style attribute in my <Editor /> but it didn't work. import { Editor } from "react-draft-wysiwyg"; import { EditorState } from " ...

using the useEffect hook to create a loop that runs infinitely

For my project, I am working on updating data in firebase. The issue that I'm facing is that the data seems to be constantly looping, causing potential crashes. Is there a way to stop this loop and prevent any crashing? import "./App.css"; ...

Exploring the Concept of Callbacks in JavaScript

What happens behind the scenes when a function is passed as a parameter in JavaScript and how does the engine recognize it as a callback? ...

Invoke Observable.subscribe() sequentially

I have an array of objects and need to iterate over each element, making a request to the service for each one. However, I want to ensure that the next iteration only occurs when the current request is successfully completed, or block any further requests. ...

Tips for incorporating the camera from fbxloader into your three.js scene

I am currently utilizing fbxloader from three.js to incorporate a model into my scene. I have noticed that the most recent version of fbxloader.js (https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/FBXLoader.js) has the capability to read ...

If the input is marked as checked, apply a class to the corresponding HTML element

I need to manipulate the .form-group class by adding it if the nearest hotelObj element is checked, and removing it when hotelObj is unchecked. Instead of using addClass(), I prefer to utilize css(). $(".form-group").click(function() { if ($(this).ch ...

The worth of the scope is evident, yet it remains undefined when trying to access it

Currently, I am in the process of developing an AngularJS directive. However, I have encountered an issue where a scope variable appears to be undefined when attempting to access it. Interestingly, upon printing out the scope, it is evident that the variab ...

Is there more to AJAX than just fetching a JSON file?

I am in need of using AJAX to achieve my goal. My aim is to have the content of specific subpages displayed in the HTML markup below when a particular link in a list is clicked. This data can be readily accessed from the database via the CMS's API (I ...

The loading spinner isn't appearing while the function is running

Having trouble displaying a loading spinner while a function is running. I've tried different methods, but the spinner just won't appear. Here's the HTML snippet: <div class="row pt-3" id="firstRow"> <div class="col"> <bu ...

Alter the background color of the text input when it is selected for exit

How can I adjust the input field color when text is selected? I'm looking to get rid of the dark grey box highlighting. (Check out the image below) https://i.sstatic.net/OgWaz.gif <div id="ember1102" class="ember-view"> <i class="fa fa ...

Unable to properly delete data in Express/Postgres

After developing a Kanban board using JavaScript without any frameworks on the front end, I integrated Express/Postgres on the back end. However, I am encountering an issue with the 'Delete' operation. While all other CRUD operations are functio ...

An Angular application made up of various Angular modules

Currently, my team and I are brainstorming the most effective way to structure an angular application that will inevitably grow in size. This project involves rewriting a large legacy system that has been a nightmare to maintain. Our key objective is to k ...

What is the correct process for authenticating requests from SSR to the Feathers JS API?

There are some examples available on how to access FeathersJS API from SSR, but the important aspect of authorizing such requests is missing. Is it feasible to create a feathers-client app for each request? Wouldn't that put too much load on the syste ...

Add the content script to a webpage just one time

I am looking to inject a content script on context menu click in an extension manifest version 3. I need a way to determine if the script is already injected or not. If it hasn't been injected yet, I want to inject the content script. This condition m ...

Retrieving the value of a submit button within the `onSubmit` event handler in a React application

In my usual process, I typically handle the form submission by utilizing the onSubmit handler. <form onSubmit={e => { ... } }> <input ... /> <input ... /> <button type="submit">Save</button> </form> ...

Angular Resolve Upon Application Reloading

Is there a way to postpone the initialization of my Application Controller (similar to using the 'resolve' attribute in the router) when reloading a page? Or more importantly, how can I delay the rendering of the view until my controller has succ ...

What steps can I take to replicate a 'heap limit Allocation failed' error?

Context I encountered a challenging issue where my program displayed a FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory This occurred when the memory usage reached around 512 mb Scavenge (reduce) 507.8 (518.9) -> 507.2 ...