Two instances of the same service

[alescdb]

When a service is use on the same "page" by two components, we have two differents instances of the same service, this does not seems to be a normal behaviour.
In Angular 2 (ts), I do not have the same behaviour.

Note that I've tried adding the class to bootstrap() but it does not make a difference.

Example :

If we take the stater project of IntelliJ (I think it's https://github.com/google/stagehand)
and change AppComponent to this :

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [materialDirectives, TodoListComponent],
  providers: const [materialProviders, TodoListService],
)
class AppComponent implements OnInit {
  TodoListService todoListService;

  AppComponent(this.todoListService);

  @override
  ngOnInit() {
    print("AppComponent::ngOnInit() : " + this.todoListService.hashCode.toString());
  }
}

And change the ngOnInit() in TodoListComponent to this :

Future<Null> ngOnInit() async {
  print("TodoListComponent::ngOnInit() : " + this.todoListService.hashCode.toString());
  items = await todoListService.getTodoList();
}

The output will look like this :

Observatory listening at http://127.0.0.1:60762/
 AppComponent::ngOnInit() : 683014649
 TodoListComponent::ngOnInit() : 655556724

Using Dart : 1.24.2

pubspec.yaml

name: test
description: A web app that uses AngularDart Components
version: 0.0.1
#homepage: https://www.example.com
#author: adb <[email protected]>

environment:
  sdk: '>=1.23.0 <2.0.0'

dependencies:
  angular2: ^3.0.0
  angular_components: ^0.5.1

dev_dependencies:
  angular_test: ^1.0.0-beta+2
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
  test: ^0.12.0

transformers:
- angular2:
    entry_points: web/main.dart
- angular2/transform/reflection_remover:
    $include: test/**_test.dart
- test/pub_serve:
    $include: test/**_test.dart
- dart_to_js_script_rewriter

# Uncomment the following in sdk 1.24+ to make pub serve
# use dartdevc (webdev.dartlang.org/tools/dartdevc).
#web:
#  compiler:
#    debug: dartdevc

[alescdb]

Side note : For now I've resolved this "issue" by using the factory keyword with something like this :

@Injectable()
class MyService {
  static MyService _Instance;
  final BrowserClient _http;

  MyService._internal(this._http) {
    MyService._Instance = this;
  }

  factory MyService(BrowserClient client) {
    if (MyService._Instance != null)
      return (MyService._Instance);
    return (new MyService._internal(client));
  }
}

[matanlurey]

Hi @alescdb thanks for asking and the details provided.

Anything you put in the providers: [ ... ] list of a @Component signifies a new instance of all of those services. If AngularTS has changed this I'd be surprised (they have their own "modules" now which might have different behavior?).

Does your TodoListComponent also have the same providers? If so, simply remove.

[alescdb]

Indeed, the service was defined into both components providers, in AngularTS i've set my service in a module.
I've removed the service from providers in TodoListComponent and everything works fine !

Thanks !

[matanlurey]

I'll try to document this as part of #465. Cheers!