Angular 2 Error: (SystemJS) Can't resolve all parameters for Member: (?).(…)

Question

I use this seed application to narrow down an error that keeps popping up (so debugging is easier...)

I keep getting this error when trying to add a data model to my shared module (in my browser console):

Error: (SystemJS) Can't resolve all parameters for Member: (?).(…)

The Member Class in question:

import * as _ from 'lodash';
import { Injectable } from '@angular/core';

@Injectable()
export class Member {

  private id: string;
  [key: string]: any;

  constructor(private data?: any) {
    if (data) {
      this.id = data.id;
      _.extend(this, data.attributes);
    }
  }

}

My SharedModule (the Member Class isn't referenced anywhere else for now):

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { ToolbarComponent } from './toolbar/index';
import { NavbarComponent } from './navbar/index';
import { NameListService } from './name-list/index';

import { Member } from './models/member.model';

@NgModule({
  imports: [CommonModule, RouterModule],
  declarations: [ToolbarComponent, NavbarComponent],
  exports: [ToolbarComponent, NavbarComponent,
    CommonModule, FormsModule, RouterModule]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [NameListService, Member]
    };
  }
}

When I get rid of the constructor in class Member the error disappears:

import * as _ from 'lodash';
import { Injectable } from '@angular/core';

@Injectable()
export class Member {

  private id: string;
  [key: string]: any;

}

I am not using barrel imports as you can see since the order of the imports can cause the same error.

I am a bit stuck on how to solve this... Thanks

What exactly are you trying to inject into `Member`? Angular has no idea what you give you, as there's no token to go by. And are you sure you really want to make a _model_ a provider? What's the point? — Paul Samsotha, Nov 01 '16 at 17:02
Maybe have a look at [this post](http://stackoverflow.com/q/40259357/2587435) and/or [this one](http://stackoverflow.com/q/40017679/2587435) — Paul Samsotha, Nov 01 '16 at 17:06
@peeskillet Sorry, I don't get your comment. 1) I am not trying to inject anything into `Member`. Member should just serve as a data model. I want to pass json attributes into the constructor. 2) How else can I use the class in a model? I need to provide it in order to have a new method, no? — Ole Spaarmann, Nov 01 '16 at 17:08
Then why do you need to add it as a `provider`? Just import the file into your class, and `new` it. See my first link in the previous comment — Paul Samsotha, Nov 01 '16 at 17:09
Well if I don't and get rid of the `@Injectable` decorator, remove it from the providers and just import the class I get this error: `No provider for Member!` — Ole Spaarmann, Nov 01 '16 at 17:13
Don't inject it. You don't inject model classes. You just import the class file, then just use it like a normal (non angular controlled class) — Paul Samsotha, Nov 01 '16 at 17:14
Damn, I finally got it. Trying to inject it was the problem. — Ole Spaarmann, Nov 01 '16 at 17:18

score 2 · Accepted Answer · edited May 23 '17 at 12:02

If the class is just to be used as a model, then don't add it to the @NgModule.providers and don't try to inject it. Just import the class into the class file where you need it, and just use it like you would any other normal class

import { Member } from './member.model';

@Component({})
class MyComponent {
  member = new Member();
}

See Also:

Add Models/Entities/Objects to NgModule in Angular 2

score 2 · Answer 2 · answered Nov 01 '16 at 17:18

Classes with the @Injectable() decorator get instantiated once by Angular as service providers. Angular uses reflection/type hinting to supply the instance with its dependency's.

Angular doesn't know what to give your Member class's constructor since its type is defined as any.

Angular 2 Error: (SystemJS) Can't resolve all parameters for Member: (?).(…)

2 Answers2