This app is meant to reproduce an issue where multiple instances of services are created. It creates a simple service and then has four components with different types of service invocation syntax that are hooked up to buttons that set state on the service. The state is then shown through a table. There is also a console.log within the service's constructor to show when the service is getting instantiated.
The four syntaxes used are:
- @service() - rely on the variable name matching the service name
- @service('<service name>')
- @service('<addon/app name>$<service name>') - this syntax comes from the ember-holy-futuristic-template-namespacing-batman package
- @service('<addon/app name>@<service name>')
From these examples, it seems that 1/2 will create one shared instance of a service and 3/4 will create a separate shared instance of a service. The console.log in the constructor is also shown twice.
This issue came up in a production app where an addon instantiated a service using the syntax in 2 whereas the app used an instance of a service with the syntax of 3, resulting in separate state for a component from the addon vs a component coming from the app.
You will need the following things properly installed on your computer.
git clone <repository-url>this repositorycd repro-service-appyarn install
ember serve- Visit your app at http://localhost:4200.
ember build(development)ember build --environment production(production)