Angular 2 DI - Can't resolve all parameters

Question

I've build a basic app in Angular 2, and cannot inject a service into one of my components through a module.

After compiling with webpack i get this following Error: "Angular 2 DI - Can't resolve all parameters"

// UserModule
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {UserService} from "../services/user.service";
import {UserComponent} from "./user.component";

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        UserComponent
    ],
    exports: [UserComponent],
    providers: [UserService]
})
export class UserModule {}

// UserComponent
import {Component, Inject} from '@angular/core';
import {UserService, IUser} from "../services/user.service";
import {FormGroup, ReactiveFormsModule} from "@angular/forms";

@Component({
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
})

export class UserComponent {
    user: IUser[] = [];

    // constructor(private userService: UserService) {
    // does not work too
    constructor(@Inject(UserService) private userService: UserService) {
        this.user = this.userService.get({id: 1});
    }
}

// UserService
import {Injectable} from '@angular/core';
import {RequestMethod} from '@angular/http';

import {ResourceMethod} from 'ngx-resource/src/Interfaces';
import {ResourceAction, ResourceParams} from 'ng2-resource-rest';
import {RestClient} from '../shared/rest-client';

interface IQueryInput {
    id: number;
}

export interface IUser {
    id: number;
    name: string;
    description: string;
    user_content: IUserContent[];
}

export interface IUserContent {
    url: string;
    type: string;
    title: string;
}

@Injectable()
@ResourceParams({
    url: 'users'
})
export class UserService extends RestClient {
    @ResourceAction({
        path: '/',
        isArray: true
    })
    query: ResourceMethod<IQueryInput, IUser[]>;

    @ResourceAction({
        path: '/{!id}'
    })
    get: ResourceMethod<{id: any}, IUser[]>;
}

That is from the browser console:

Uncaught Error: Can't resolve all parameters for UserService: (?, ?).
    at syntaxError (http://127.0.0.1:8000/vendor.bundle.js:41458:34) [<root>]
    at CompileMetadataResolver._getDependenciesMetadata (http://127.0.0.1:8000/vendor.bundle.js:54735:35) [<root>]
    at CompileMetadataResolver._getTypeMetadata (http://127.0.0.1:8000/vendor.bundle.js:54603:26) [<root>]
    at CompileMetadataResolver._getInjectableMetadata (http://127.0.0.1:8000/vendor.bundle.js:54589:21) [<root>]
    at CompileMetadataResolver.getProviderMetadata (http://127.0.0.1:8000/vendor.bundle.js:54878:40) [<root>]
    at http://127.0.0.1:8000/vendor.bundle.js:54808:49 [<root>]
    at Array.forEach (native) [<root>]
    at CompileMetadataResolver._getProvidersMetadata (http://127.0.0.1:8000/vendor.bundle.js:54769:19) [<root>]
    at CompileMetadataResolver.getNgModuleMetadata (http://127.0.0.1:8000/vendor.bundle.js:54424:50) [<root>]
    at CompileMetadataResolver.getNgModuleSummary (http://127.0.0.1:8000/vendor.bundle.js:54277:52) [<root>]
    at http://127.0.0.1:8000/vendor.bundle.js:54350:72 [<root>]
    at Array.forEach (native) [<root>]
    at CompileMetadataResolver.getNgModuleMetadata (http://127.0.0.1:8000/vendor.bundle.js:54335:49) [<root>]
    at JitCompiler._loadModules (http://127.0.0.1:8000/vendor.bundle.js:65516:64) [<root>]

why (@Inject(CampaignService) private userService: UserService you can directly use the service . For info on using services check this repo (@Inject(CampaignService) private userService: UserService — Rahul Singh, May 07 '17 at 08:34
No ... same error ... I think its a problem with the module. But I can´t find the problem. — user2588688, May 07 '17 at 08:43
Is that literally all of the information in the error message? If you look in the developer console or at whatever's serving the app, what else does it say? Do you have `ResourceModule.forRoot()` in your root module per [the docs](https://www.npmjs.com/package/ngx-resource)? — jonrsharpe, May 07 '17 at 08:44
Where does `extends RestClient` come from? In the docs I see `extends Resource`. It's coming from elsewhere in your app, apparently, but you don't show it. Also the problem isn't the component, it's the service itself, so changing the component isn't going to help at all. Please give a [mcve] that actually provides enough information to recreate the problem. — jonrsharpe, May 07 '17 at 09:09

score 0 · Answer 1 · answered May 07 '17 at 08:49

I think you need to add ResourceModule.forRoot() to your imports.

And you should remove @Inject() if you are using Typescript.

IMO, Your problem is more like how to use ngx-resource correctly.

You might wanna try their example first

https://github.com/troyanskiy/ngx-resource

Angular 2 DI - Can't resolve all parameters

1 Answers1