[Bug] Initializing a service does not work in ember glimmer components
See original GitHub issue🐞 Describe the Bug
Initializing a service does not work in ember glimmer components
🔬 Minimal Reproduction
app/initializers/pandaui.js
export function initialize( application ) {
application.inject('route', 'pandaui', 'service:pandaui');
application.inject('component', 'pandaui', 'service:pandaui');
application.inject('controller', 'pandaui', 'service:pandaui');
}
export default {
initialize
};
app/pods/pandaui/service.js
import Service from '@ember/service';
export default class PandauiService extends Service {
block() {
...
}
unblock() {
...
}
}
app/components/test-form/component.js
import Component from '@glimmer/component';
import { action } from '@ember/object';
export default class TestFormComponent extends Component {
@action
testPandaService() {
this.pandaui.block() **ERROR: Cannot read property 'block' of undefined**
}
}
😕 Actual Behavior
The line this.pandaui.block()
throws Cannot read property 'block' of undefined
When I explicitly inject the service like below it works.
import { inject as service } from '@ember/service';
@service pandaui;
🤔 Expected Behavior
When I initialize a service, I think it is not needed to inject explicitly
Am i missing something? OR its a bug?
I think according to the doc that is all I need to do https://guides.emberjs.com/release/applications/initializers/#toc_application-initializers
🌍 Environment
- Ember: - 3.26.0
- Node.js/npm: - 10.16.3
- OS: - MacOS darwin x64
- Browser: - Chrome 89.0.4389.128
Issue Analytics
- State:
- Created 2 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
Glimmer Components - Octane Upgrade Guide - Ember Guides
In classic components, arguments are assigned directly to the class instance. This has caused a lot of issues over the years, from methods...
Read more >How to set initial state of glimmer component based on ...
To track changes to currentModel in your editor component and set a default value, use the get accessor: get model() { return this.args....
Read more >Converting Your Ember App to TypeScript - Inside Skylight
The first step is to run ember install ember-cli-typescript . ... is to mark offending parts of your code with a @ts-expect-error directive....
Read more >Services - ember-cli-typescript
Any attempt to access a property or method not defined on the service will fail type-checking: import Component from '@glimmer/component';.
Read more >The 8 Most Common Mistakes That Ember.js Developers Make
Ember.js is an awesome framework for building rich and powerful front-ends, ... Again, the dawn of routeable components will solve this problem, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Implicit injections should work, but not for Glimmer components (which is by design, mentioned here). The example in the guides shows an implicit injection for routes, so even though deprecated, that example is still correct AFAICT.
EDIT: Created https://github.com/ember-learn/guides-source/issues/1684.
I’m referring to the guide https://guides.emberjs.com/v3.26.0/applications/initializers/ (3.26.0) - which has implicit injection in the example.
According to the above discussions, implicit injection is not working in 3.26 and it has been deprecated in 3.26? Correct? So the guide for 3.26 https://guides.emberjs.com/v3.26.0/applications/initializers/ should not have that example? Correct?