If I don't utilize dependency injection in Angular, it prompts me for arguments

Attempting to implement a service like this but encountering some issues

translateService = new TranslateService();

An error message pops up stating that there are 9 missing arguments. However, when I modify it to look like this

 constructor(private translateService: TranslateService)

it no longer requires any arguments to be passed in. I'm curious to know where these missing arguments originate from when using dependency injection.

Answer №1

When you instantiate your TranslateService without passing any arguments, Angular will automatically handle the dependencies for you using its Injector mechanism. This approach allows Angular to build all necessary dependencies and inject them into TranslateService's constructor.

translateService = new TranslateService();

On the other hand, if you manually create an instance of TranslateService with specific arguments, it becomes your responsibility to provide and manage those dependencies.

constructor(private translateService: TranslateService)

Whether TranslateService is a custom implementation or part of a third-party package, Angular treats all Injectables in the same way. The TranslateModule.forRoot() method simply ensures that services like TranslateService are registered at the root level as singleton instances, allowing you to inject TranslateService anywhere within your application.

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

Ways to display the ChaptersButton in Videojs-Player

I'm trying to incorporate videojs (version 8.10.0) into my project and provide viewers with a way to select chapters within the video. According to the official documentation, it seems that simply including a track element linking to a VTT file within ...

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

I am seeking assistance with implementing a Javascript onclick Dropdown Menu. The current issue I am facing is that when one menu is opened and another menu is clicked, the previous menu remains open. My desired solution is to have the previously open menu ...

In development, Next.js dynamic routes function correctly, but in production they are displaying a 404 error page

I am currently working on implementing dynamic routes in my Next.js project to render pages based on user input. I have set up a route that should display the page content along with the id extracted from the URL using the useRouter() hook. Everything is f ...

Adding JSON to the data attribute within a set of DOM elements

I am in the process of developing a website dedicated to recipes, where I am using a Mustache.js template to load recipe information from a JSON file. The structure of my JSON file is as follows: { "recipes":[ {"name": "A", preparationTime: "40min", "serv ...

Exploring a different approach to utilizing Ant Design Table Columns and ColumnGroups

As per the demo on how Ant Design groups columns, tables from Ant Design are typically set up using the following structure, assuming that you have correctly predefined your columns and data: <Table columns={columns} dataSource={data} // .. ...

The Angular application shell build has produced two new folders within the dist directory. I'm curious about their purpose and how they can

Whenever I execute the ng run my-app:app-shell -c production command, it creates 2 folders within the dist directory - one for the browser and one for the server. Now, I find myself with 2 different commands to use: npm build --prod (for a regular build) ...

Can you explain the distinction between using angular.copy() and simply using an assignment (=) to assign values

When a button is clicked, I want to assign certain values using the event parameter. Here is the code: $scope.update = function(context) { $scope.master = context; }; The $scope.master has been assigned the values of user. Recently, I came across th ...

Pagination in PrimeNG datatable with checkbox selection

I am currently working on incorporating a data table layout with pagination that includes checkbox selection for the data. I have encountered an issue where I can select data on one page, but when I navigate to another page and select different data, the s ...

Remember to store a reference of ViewChild within the parent class

In order to access my graph in a child component using @ViewChild, which is declared in the parent class, I am looking for a way to avoid having to create a new variable for each child class instance. Parent class: import { Component, ViewChild} from &ap ...

Interactive PNG Sequence Rotation: Explore 360 Degrees

I am facing an issue with my PNG sequence of 360 images, where each image corresponds to a degree of rotation. Currently, I have a React component that updates the rotation based on the mouse position in the window - with x = 0 corresponding to rotation = ...

View real-time data in Vuejs 3 as it executes

I am currently working on a form that populates a table with data retrieved from a Laravel API. I am using Vue.js 3 and Composition API to build my entire application. When the button is clicked, I want the table to be filled with data from the form. The b ...

The yarn installation process is not utilizing the latest available version

Working with a custom React component library my-ui hosted on a personal GitLab instance. In the package.json, I include the library like this: "my-ui": "git+ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6 ...

Extract information from one webpage, proceed to the following page, and repeat the process, utilizing JavaScript on the site

Exploring various web scraping techniques, I've hit a roadblock and could use some assistance. Currently, my Python code successfully extracts data from the first page of my website. response = requests.get(url) soup = BeautifulSoup(r.text, 'ht ...

Unraveling JavaScript using regular expressions in Python

I need to parse some JavaScript text using Python. Within the JS code, there is a variable like this: this.products = ko.observableArray([#here is some json, #here is some json]) The observableArray can hold a single JSON object like: observableArray({&a ...

The selected value of the PrimeNG p-checkbox cannot be determined using a function when binding to [ngModel]

These are the rows of my custom p-table <tr> <td>{{user.userName}}</td> <td>{{use.userSurname}}</td> <td *ngFor="let group of groups"><p-checkbox [(ngModel)]="showVal ...

Once upon a time in the land of Storybook, a mysterious error message appeared: "Invalid version. You must provide a string

I keep encountering an issue while attempting to set up storybook. Can anyone help me figure out what's causing this problem? npx storybook@latest init • Detecting project type. ✓ TypeError: Invalid version. Must be a string. Got type "obje ...

Tips on implementing CSS to the subpar class in Vuejs

I am working on an HTML file that operates with button in Vue.js. The v-bind:class can be utilized for a single tag as shown below. It disappears based on the boolean value of bool data. <h3 v-bind:class="{active: bool}">{{counter.document}}&l ...

What are the steps for implementing CORS?

I recently attempted to set up Ajax calls and stumbled upon the following code snippet: <!DOCTYPE html> <html> <body> <p id="demo">Let AJAX update this text.</p> <button type="button" onclick="loadDoc()">Updat ...

What is the method for asynchronously loading a javascript file that includes an ajax call?

Within my JavaScript file named JScript.js, there is a function that includes an AJAX call to a dot-net page. alert('jscript.js called'); function AddTag() { var htag = document.getElementById("hdntag").value.split('|'); var texttag = ...

Connecting two sets of data from a mongoDB database using vue.js

Hey there, I'm a newcomer to vue and mongodb. I've set up two collections - one for storing user details and the other for business details. When a business registers through a form, their information is saved in mongodb. Now, I've created a ...