Ways to cite a vendor in static class functions?

Is there a method to access a service provided at bootstrap within static class methods?

I don't have any code to share right now, but I've been experimenting with the standard syntax using Injector (you can find more information here). Whenever I use resolveAndCreate() on a service (I've also tried other Injector methods), a new instance is created and it overwrites the bootstrapped instance.

The scenario intended for this is when using the @CanActivate() decorator. My current workaround involves setting window["__ready__"] once the service is ready and then utilizing that in the decorator...

typescriptangular

Answer №1

To ensure efficient management of injectors in Angular, one approach is to save a reference to the injector generated during bootstrap within a dedicated singleton.

bootstrap(App, [Auth, ROUTER_PROVIDERS])
.then((appRef: ComponentRef) => {
  // Keep a reference to the injector
  appInjector(appRef.injector);
});

The designated singleton function looks like this:

let appInjectorRef: Injector;
export const appInjector = (injector?: Injector):Injector => {
    if (injector) {
      appInjectorRef = injector;
    }

    return appInjectorRef;
};

Subsequently, you are able to retrieve the service using these steps:

let injector: Injector = appInjector(); // Obtain the stored injector reference
let auth: Auth = injector.get(Auth); // Access the service through the injector

For a demonstration of this process in action, refer to the following Plunker example. (Note that credit for this Plunker goes to its original creator): http://plnkr.co/edit/SF8gsYN1SvmUbkosHjqQ?p=preview

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

Having trouble deploying Firebase Cloud function following the migration to Typescript

After following the steps outlined in the firebase documentation to convert my cloud functions project to TypeScript (see https://firebase.google.com/docs/functions/typescript), I encountered an error when attempting to deploy using 'firebase deploy - ...

typescriptfirebasegoogle-cloud-firestoregoogle-cloud-functionstslint

Associating an event with a newly created element in Angular2

I'm looking to add a new row with just one click on the + button. This new row will come equipped with a - button that can then be used to delete the newly created row. However, I've encountered an issue in attaching a click event to this new - b ...

javascriptangularjsangular

Having trouble importing Bootstrap CSS into a TypeScript file

I'm having trouble importing the bootstrap css file from node_modules. It's not importing, even though I can import the scss file successfully. The following import is not working: import bs from "bootstrap/dist/css/bootstrap.css"; Ho ...

typescriptbootstrap-4import

Losing scope of "this" when accessing an Angular2 app through the window

My Angular2 app has exposed certain methods to code running outside of ng2. However, the issue arises when calling these methods outside of ng2 as the context of this is different compared to when called inside. Take a look at this link to see what exactl ...

javascriptangulartypescriptangularjs-scopethis

Guide on integrating TLS into a specific context path within a Tomcat server

Is it possible to add TLS to a specific context path in a Tomcat server instead of applying it to a port? I have set up a Spring Boot gateway service and an Angular app on the same port within Tomcat, each with its own unique context path. I would like to ...

angularspring-bootssltls1.2tomcat9

Module not found when attempting to import a newly created TypeScript module

A fresh Typescript project called puppeteer-jquery has just been released on the NPM registry. The code is functioning perfectly well. However, when attempting to integrate it into another project: npm install puppeteer-jquery and trying to import it lik ...

node.jstypescriptnpmtypescript-typings

How to format numbers in Angular without a leading zero using the decimal pipe?

Is it possible to format decimal numbers in Angular without displaying a leading zero? I want to display statistics such as baseball batting averages in the format of .xxx instead of 0.xxx. The exception is when the average is equal to or greater than 1.0 ...

angularangular-pipe

becoming a member of cdk scroll strategy notifications

In the process of creating a unique service that generates cdk overlays, I am faced with the challenge of listening to cdk scroll strategy events. Specifically, I am interested in detecting when the cdk closes an overlay using the "close" scroll strategy. ...

angularoverlayangular-cdk

mongodb is experiencing issues with the findOneAndUpdate operation

Below is the code snippet for updating the database. let profileUrl = 'example' UserSchemaModel.findOneAndUpdate({_id:userId}, {$set: {profileUrl:profileUrl} }, {new:true}) .then((updatedUser:UserModel) => { console.log(updatedUser.profil ...

node.jsmongodbtypescriptmongoose

The function signature '() => Element' is incompatible with the type 'string'

Greetings! I have a standard function that returns a span with a prop (if I'm not mistaken). In my TS code, I am encountering this error: Error image Below is the code from the file named qCard.tsx: import { QuestionAnswerTwoTone } from "@material- ...

reactjstypescriptfunctionreact-propsdangerouslysetinnerhtml

The 'in' operator is unable to find 'colour' within true (function return type)

Here's the TypeScript code I'm working with: let a: unknown = true; if(hasColour(a)) { console.log(a.colour); // Using a.colour after confirming a has the colour property } I've created a function to check if the color property exist ...

typescript

Troubleshooting the display of API-generated lists in Angular 8

I am encountering an issue in Angular 8 when trying to display my list on a page. Below is the code from my proposal-component.ts file: import { Component, OnInit, Input } from "@angular/core"; import { ActivatedRoute, Params } from "@angular/router"; imp ...

javascriptangulartypescript

Issues arising from an aging Angular project

I'm currently facing an issue with installing node and typescript for an older angular project that I have inherited. This project is using angular 2.4.10 After downloading and installing node version 6.9.5 from the executable file, I proceeded to in ...

node.jsangulartypescriptnpm

Create a unique look for Angular components by customizing the hosting style

Is there a way to dynamically style the component host from within the component itself using the :host selector in a .css file? For instance, for a component like <app-test> </app-test>, I would like to be able to set the top property on the ...

angular

Firestore data displaying as null values

Recently, I encountered CORS errors while polling the weather every 30 seconds in my program. Upon investigating, I discovered that the city and country were being interpreted as undefined. To fetch user data from my users' table, I utilize an Axios ...

javascriptreactjstypescriptfirebasegoogle-cloud-firestore

Issue with Reusable Component in Angular 11- not functioning as expected

Attempting to grasp and implement the concept of reusability in Angular. I am working on creating a reusable component using <mat-card> which I intend to use across different modules' components. Currently, I have set up a framework for reusabi ...

angularangular-material

Can a form component be recycled through the use of inheritance?

Greetings to the Stackoverflow Community, As I delve into this question, I realize that examples on this topic are scarce. Before diving into specifics, let me outline my strategy. I currently have three pages with numerous FormGroups that overlap signif ...

angularformstypescript

Challenges in mimicking the search functionality of Angular's Tour of Heroes due to issues with Observers

I'm facing an issue while trying to incorporate a search bar with autocomplete suggestions in Angular 9. It worked perfectly in the tour of heroes tutorial, but when I attempt to replicate it, the searchTerms pipe seems to be inactive (the service is ...

typescriptrxjsangular9

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

htmltypescriptimagevue.js

Utilize IDE's capabilities to recommend mutations and actions during the process of committing or dispatching

In my current Vue 3 Typescript project, I am utilizing Vuex. The code snippet below showcases how I have implemented it: import { createStore, useStore as baseUseStore, Store } from 'vuex'; import { InjectionKey } from 'vue'; export i ...

typescriptvue.jsvisual-studio-codevuexintellisense