Unable to access injector in Angular 2

In my application, I have a service called DrawingDataService which contains an array of data and various tools to draw this data. To ensure that DrawingDataService acts as a singleton across all tools, I included it in the providers list of the AppModule:

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    FormsModule,
    HttpModule
],
providers: [
    DrawingDataService
],
bootstrap: [AppComponent]
})
export class AppModule { }

Next, I added an injector to one of my tools:

export class LineTool extends BaseTool {

constructor(private injector: Injector) {

    super();

    let drawingDataService2 = this.injector.get(DrawingDataService);

However, I encountered an issue where this.injector was null. I am now questioning whether creating a singleton service for storing data is considered good practice.

Answer №1

If you want to achieve this, consider following these steps:

constructor( private dataService: DataService)

Then, utilize it like this:

this.dataService.someFunction()

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

The PrimeNG pie chart will sporadically appear and adjust its display when the resolution changes

I recently encountered an issue with a primeng pie chart that I am using, which pulls dynamic data from the back-end. Previously, when using static data, the pie chart functioned perfectly. However, after integrating dynamic data, the chart now seems to di ...

React Native (or React) utilizes separate TypeScript modules to detect and respond to style adjustments for dark mode

Objective: Add a dark mode feature to a react native application. A brief overview of the system: File structure: Profile.ts ProfileCss.ts constants.ts In my app, I've organized styles in separate .ts files and exported them as modules to keep them ...

What is the best way to define the entry points for all files in tsup/typescript that compile into the root dist

In my TypeScript project, I am utilizing the tsup build tool for bundling. I have a requirement to specify all the folders and files within the components directory to the root dist folder. src/ components/ card/ card.tsx ...

Maintain the spacing of an element when utilizing *ngFor

Using Angular.js and *ngFor to loop over an array and display the values. The goal is to preserve the spaces of elements in the array: string arr1 = [" Welcome Angular ", "Line1", "Line2", " Done "] The ...

Only one choice for discriminated unions in react props

Looking to create a typescript type for react component props, specifically a basic button that can accept either an icon prop or a text prop, but not both. My initial attempt with a discriminated union didn't quite produce the desired outcome: inter ...

Secure method of utilizing key remapped combined type of functions

Imagine having a union type called Action, which is discriminated on a single field @type, defined as follows: interface Sum { '@type': 'sum' a: number b: number } interface Square { '@type': 'square&apos ...

Leveraging TypeScript global variables in SharePoint operations

In TypeScript and Angular, I've developed a function called getTasks() that should run when a modal is closed. Here's the code for the function: getTasks() { this.http.get(`https://example.com/_api/web/lists/getbytitle('Tasks')/items` ...

Add adhesive dashes to the text box

I am looking to add sticky hyphens in a text input field. I have included an image illustrating my requirement. The areas that need fixing are highlighted in red. The first hyphen should appear after every three number inputs, followed by the next one afte ...

Tips for accessing data from a local JSON file in your React JS + Typescript application

I'm currently attempting to read a local JSON file within a ReactJS + Typescript office add-in app. To achieve this, I created a typings.d.ts file in the src directory with the following content. declare module "*.json" { const value: any; ex ...

Exploring code coverage for the sortmethod in Angular applications

Within my project, I have a file named sorting.helper.ts that contains all of my sorting methods: In another file, I then called upon these methods. How can I ensure that both files are included in the code coverage analysis for my .spec file? import { C ...

Unit testing in Angular2 with external components

I've encountered an issue while writing a unit test for a component of mine that utilizes the PrimeNG piechart directive. PrimeNG makes use of Chart.js, which is loaded in my index.html file and included in the files list of my test configuration. How ...

Issues with Cognito integration in setting up a Cloudfront Distribution for hosting static content on S3

I've been facing an issue with my S3 website behind a CloudFront distribution when trying to authenticate with Cognito. Everything works perfectly when testing my Angular app locally with Callback URL and Sign out URL set to localhost:4200/. https:// ...

Encountering an error in testing with Typescript, Express, Mocha, and Chai

After successfully creating my first server using Express in TypeScript, I decided to test the routes in the app. import app from './Server' const server = app.listen(8080, '0.0.0.0', () => { console.log("Server is listening on ...

The error message indicates that the Python executable "C:UsersAdminAnaconda3python.EXE" cannot be found, but you have the option to configure the PYTHON environment variable as a workaround

After downloading a project from github, I attempted to run npm install in my application. Unfortunately, I encountered the following error: > [email protected] install C:\Users\Admin\Desktop\New folder\flow\node_modu ...

Issue with capturing events in Angular through emitting events

Apologies for my inexperience with Angular (V12), if I am not explaining my issue clearly. I am facing a problem with the $Event not capturing the custom object data emitted from another component. Upon setting up the function in the parent component, I en ...

What is the best way to retrieve a value from async/await functions?

async function fetchNetworkStatus() { const network = await Network.getConnection(); setConnection(network.isConnected); console.log(connectionStatus); if (network.isConnected) { return true; } else { ...

When receiveMessage is triggered, the FCM push notification fails to refresh the view

After following this helpful tutorial on Push Notifications with Angular 6 + Firebase Cloud Messaging, everything is working perfectly. I am able to receive notifications when using another browser. To ensure that my notification list and the length of no ...

Is it possible to implement typed metaprogramming in TypeScript?

I am in the process of developing a function that takes multiple keys and values as input and should return an object with those keys and their corresponding values. The value types should match the ones provided when calling the function. Currently, the ...

Storing Passport.js Token Locally: Best Practices

Struggling to save the jwt token provided by passport.js in browser localStorage, I am facing challenges with transferring it from the server to the client as it is generated on the server side. If anyone can assist me with setting the server-generated to ...

What is the process for creating a unit test case for an Angular service page?

How can I create test cases for the service page using Jasmine? I attempted to write unit tests for the following function. service.page.ts get(): Observable<Array<modelsample>> { const endpoint = "URL" ; return ...