Experiencing Trouble with Dependency Injection in Angular 5

I'm encountering an error in my angular 5 application ("@angular/core": "5.1.2") and need some assistance.

Uncaught Error: Can't resolve all parameters for FooComponent: (?).

Service:

@Injectable()
export class FooService { }

Component:

@Component({template: '<p></p>'})
export class FooComponent {
    constructor(private s: FooService) { }
}

Module:

@NgModule({
    declarations: [ AppComponent, FooComponent ],
    bootstrap:[ AppComponent ],
    providers: [ FooService ] })
export class AppModule {}

My tsconfig:

{
    "compilerOptions": {
        "baseUrl": "",
        "declaration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": false,
        "lib": [
            "es6",
            "dom"
        ],
        "mapRoot": "./",
        "module": "commonjs",
        "moduleResolution": "node",
        "rootDir": "./app",
        "outDir": "../dist",
        "sourceMap": true,
        "target": "es5",
        "noEmitOnError": true,
        "typeRoots": [
          "./node_modules/@types"
        ]
    },
    "include": [
      "./**/*.ts"
    ]
}

I am unsure of what I might be missing here. I am using the es6 lib and it's worth noting that @Injectable should not have any parameters. Do you have any insights or examples that could help me?

Could you provide guidance on how to debug DI in Angular in general?

angulartypescriptecmascript-6ecmascript-5

Answer №1

@Component({
    template: '<p></p>'
})
export class FooComponent {
    constructor(@Inject("FooService") private s: FooService) { }
}

Don't forget to use the @Inject decorator.

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

Error message indicating that a module cannot be located without utilizing the require function

While following a video tutorial, I noticed the use of 'require' to import modules from one file to another. However, when I tried using 'import', I encountered an issue. Can anyone offer some assistance? The tutorial showed: app.use(" ...

reactjsecmascript-6import

The requirement is for TypeScript to be cast as Partial<T>, with the condition that the keys

I'm currently looking for two different utility types: one that consists of a subset of a type with matching value types, and another that only requires the keys to exist in another type. I've devised the following solution, which appears to be ...

typescript

Typescript/Three.js encounters the issue of game objects becoming undefined

Something in my code seems to have broken unexpectedly. I can't figure out why the "Game" object is defined before calling this.render() in the constructor, but becomes undefined in the render method. Before render(), the console shows: Game camera: ...

javascripttypescriptthree.jstypeerror

Having difficulty accessing the 'makeCurrent' property of an undefined object in Angular mobile application

I have followed the steps outlined in the Angular mobile toolkit guide found at https://github.com/angular/mobile-toolkit/blob/master/guides/cli-setup.md My Node version is v4.4.3 NPM version is 2.15.1 The issue arises when I run the command $ ng serve, ...

javascriptangularjsangular

The vscode/eslint parser is throwing a fit: "Parsing error: Only declares and type imports can be found inside declare module

The contents of my index.d.ts file are as follows: declare module 'mytypes' { interface Constructor<T> { new (...args: any[]): T; } //etc. When working in VSCode, I noticed the keyword "interface" is being highlighted: https:/ ...

typescriptvisual-studio-codeeslint

How do I go about creating shades when working with material theming?

Hello everyone! I am interested in developing a unique theme with Angular Material theming, incorporating my own set of three colors. Typically, the Angular Material themes are defined with shades like this: $mat-red: ( 50: #ffebee, 100: #ffcdd2, 20 ...

angularangular-materialmaterial-uimaterial-designtheming

Steps for creating a TypeScript project for exporting purposes

Forgive me for my lack of experience in the js ecosystem. Transitioning from static languages to typescript has been a positive change, though I still find myself struggling to grasp the packaging/module system, especially when coupled with typescript defi ...

javascriptnode.jstypescriptnpm

What is the process for importing a .webp file into a TypeScript file to be utilized in an Angular project down the line?

I created a Weapon class with at least one icon. export default abstract class Weapon { icons: string[]; // Possibly incorrect type constructor(iconOrIcons: string | string[]) { this.icons = typeof iconOrIcons === 'string' ? [iconOrIcons ...

angulartypescript

The data retrieved from the backend is being stored in an object, however, it is not directly accessible through

After receiving data from the backend and storing it in an object, I am facing an issue where trying to print it using object properties shows undefined values. Here is a snapshot of my output: view image here Snippet of my code: this.documentService.getD ...

javascriptjavaangularspring-boot

cutting the limit of table rows in Angular by half

I have an array called carsList with 5 values. I am trying to slice it 2 by 2. <table> <tr *ngFor="#item of carsList | slice:0:2; #i = index"> <td>{{i}}. {{item}}</td> </tr> </table> The code above is o ...

javascriptangulartypescript

Investigating the Angular signals that triggered the effect

Is there a way to determine which Angular signal triggered an effect? I have two signals and one effect in a component. One signal is used to start a timer function within a service, while the other signal reacts to changing conditions in the timer functio ...

angularsignalsangular-signals

Why does "excess property checking" seem pleased when I utilize a key from set A or set B, even though "keyof (A|B)" is consistently "never"?

I am diving deeper into Typescript types and encountering some puzzling behavior: interface Person { name: string; } interface Lifespan { birth: number; death?: number; } let k: keyof (Person | Lifespan); //k is never let test1: Person | Life ...

typescript

The type 'Document<any>' cannot be assigned to type 'Pick<Pick<_LeanDocument<TicketDoc>>'

My terminal is throwing an error that seems as clear as mud: TSError: ⨯ Unable to compile TypeScript: [orders-depl-9fbcb84ff-ngt2z orders] src/models/ticket.ts(47,5): error TS2322: Type 'Document' is not assignable to type 'Pick<Pick& ...

mongodbtypescriptmongoose

Utilizing Leaflet-geotiff in an Angular 6 Environment

I'm currently facing an issue where I am unable to display any .tif image on my map using the leaflet-geotiff plugin. I downloaded a file from gis-lab.info (you can download it from this link) and attempted to add it to my map, but I keep encountering ...

angulartypescriptleafletgeotiff

Tips for configuring Visual Studio Code to utilize path mappings for handling automatic imports

In order to streamline my project and avoid messy paths, I am implementing absolute paths that will allow for consistent imports regardless of the file's location in the project tree. For this purpose, I made adjustments to the tsconfig.json: "paths ...

javascriptangulartypescriptvisual-studio-code

pressing the switch will adjust the size of the container

I am looking to implement a feature where clicking on an icon will resize a div to full screen in the browser. Below is the HTML code I have set up for this functionality, and I am open to suggestions on how to achieve this. <div> <a (click)= ...

javascriptcssangulariframe

After refreshing the page, RouterLinkActive in Angular 6 fails to work

Scenario In my application, there is a menu with various items. The selected item is distinguished by adding the selected class to it, which changes its appearance. https://i.sstatic.net/JEPHH.png Problem While navigating between routes works smoothly, ...

htmlangulartypescriptangular6

Difficulty with AMCharts Map displaying in production environment

I have successfully created an Angular application using AMCharts Map. During development mode (ng serve), the map renders correctly. Even when building the app without production mode (using the command ng build), the map displays as expected. However, ...

angularamcharts

Clarifying the concept of invoking generic methods in TypeScript

I'm currently working on creating a versatile method that will execute a function on a list of instances: private exec<Method extends keyof Klass>( method: Method, ...params: Parameters<Klass[Method]> ) { th ...

typescriptgenerics

What is the best way to transfer data from a component to a .ts file that contains an array?

I am currently developing a budgeting application and I have a component that is responsible for holding values that I want to pass to an array stored in a separate file. While I can retrieve data from the array, I am facing difficulty in figuring out how ...

javascriptangulartypescript