Can't resolve all parameters for User

Question

I am trying to create a shared User data provider:

import {Injectable} from '@angular/core';


@Injectable()

export class User {

  public name: string;
  public email: string;
  public password: string;
  public birthday: string;
  public settings: Settings;
  public loggedIn: boolean;

  constructor({
                name = null, email = null, password = null, birthday = null,
                settings = new Settings(),loggedIn = false
              }: {
    name?: string; email?: string; password?: string; birthday?: string;
     settings?: Settings; loggedIn?: boolean;
  } = {}) {

    this.name = name;
    this.email = email;
    this.password = password;
    this.birthday = birthday;
    this.settings = settings;
    this.loggedIn = loggedIn;
  }

  /**
   * @returns {number} the user's age.
   */
  get age(): number {
    let age = Math.abs(Date.now() - new Date(this.birthday).getTime());
    return Math.floor(age * 3.16887646E-11);
  }

}

@Injectable()
export class Settings {
  notificationSettings: NotificationSettings;
  preferencesSettings: PreferencesSettings;

  constructor({
                notificationSettings = new NotificationSettings(),
                preferencesSettings = new PreferencesSettings()
              }: {
    notificationSettings?: NotificationSettings;
    preferencesSettings?: PreferencesSettings;
  } = {}) {

    this.notificationSettings = notificationSettings;
    this.preferencesSettings = preferencesSettings;
  }
}

@Injectable()
export class NotificationSettings {
  // TODO
}

@Injectable()
export class PreferencesSettings {
  // TODO
}

At the app component, I am declaring the provider, in order to make a user globally available.

When I am trying to build the project, I get a Can't resolve all parameters for User: (?) error.

The problem occurs because of the settings in the User constructor, but I am having a difficulty to find the error in my logic.

Check typo in your `constructor` and are you using `barrels` — Aravind, May 29 '17 at 16:58
I don't think that is injectable, or that it should be; it's just a data class. If you want to inject it, use an InjectionToken. — jonrsharpe, May 29 '17 at 17:02
@Aravind the constructor doesn't seem to have any typo. Also I am not using barrels. — Manos, May 29 '17 at 17:13
@Aravind I am trying to implement something similar to this answer: https://stackoverflow.com/questions/40841612/ionic-2-how-to-manage-global-variables — Manos, May 29 '17 at 17:18
You'd use it to specify which object you want injected. See https://angular.io/docs/ts/latest/guide/dependency-injection.html#!%23injection-token — jonrsharpe, May 29 '17 at 17:31
So, basically you want to create a shared service to hold the information of the current logged in user, right? — sebaferreras, May 29 '17 at 17:34
please take a look at the answer and let me know what do you think :) — sebaferreras, May 29 '17 at 17:58
@sebaferreras Great explanation, thank you. I will keep those things in mind next time. — Manos, May 29 '17 at 18:30

score 2 · Accepted Answer · answered May 29 '17 at 17:58

I'm not sure of the exact scenario, but the problem with your code is that you need to know that one thing is a shared service, and another thing is a model that will be used in that service (and probably in some other services as well).

Models should not be injectables, they are just classes. Only services should. So in your case, we can start by creating the models of your app, and then we can add an AccountService to hold the instance of the user.

I've changed the name of the classes used as models just to avoid confusion (I think it's easier to know that something is a model if the name ends with -Model)

import { Injectable } from '@angular/core';

export class NotificationSettingsModel {
  // TODO
}

export class PreferencesSettingsModel {
  // TODO
}

export class SettingsModel {
  public notificationSettings: NotificationSettingsModel;
  public preferencesSettings: PreferencesSettingsModel;

  constructor() {
    this.notificationSettings = new NotificationSettingsModel();
    this.preferencesSettings = new PreferencesSettingsModel();
  }
}

export class UserModel {
    public name: string;
    public email: string;
    public password: string;
    public birthday: string;
    public settings: SettingsModel;

    constructor() {
        this.name = null;
        this.email = null;
        this.password = null;
        this.birthday = null;
        this.settings = new SettingsModel();
    }

    /**
    * @returns {number} the user's age.
    */
    get age(): number {
        let age = Math.abs(Date.now() - new Date(this.birthday).getTime());
        return Math.floor(age * 3.16887646E-11);
    }
}


@Injectable()
export class AccountService {

    public currentUser: UserModel = null;
    constructor() {}

    public isLoggedIn(): boolean {
        return this.currentUser !== null;
    }

}

After this, you'll need to add the AccountService in your main app module (or shared module). So for instance, you can add it in the app.module.ts file:

@NgModule({
  declarations: [...],
  imports: [...],
  bootstrap: [IonicApp],
  entryComponents: [...],
  providers: [AccountService] // <- Here!
})
export class AppModule { }

Then in your pages, just inject it and use it:

// imports...

@Component({...})
export class HomePage{

    constructor(public accountService: AccountService) {}

    public someMethod(): void {
      // You can access the properties
      // this.accountService.currentUser;

      // And also the methods: 
      // this.accountService.isLoggedIn();
    }

}

Can't resolve all parameters for User

1 Answers1