Utilizing Ember and Typescript: Guide on Injecting Router Service

Question

Utilizing Ember and Typescript: Guide on Injecting Router Service

I am currently facing an issue while trying to inject RouterService into my controller:

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import RouterService from '@ember/routing/router-service';


export default class Search extends Controller.extend({
  // anything which *must* be merged to prototype here
}) {
    @service router!: RouterService;


    @action
    actionClick(){
        this.router.transitionTo('protected.apk.detail')
    }
}

// DO NOT DELETE: this is how TypeScript knows how to look up your controllers.
declare module '@ember/controller' {
  interface Registry {
    'search': Search;
  }
}

Unfortunately, I encountered an error message that reads:

Error: Assertion Failed: Attempting to inject an unknown injection: 'service:router'

It seems like the correct syntax should be router:main instead of service:router. Could you please provide guidance on how I can properly inject RouterService? Please note that this controller is part of my engine. Ember version: 3.18.0

Your help is greatly appreciated.

typescript ember.js

Answer 1

Answer №1

Clues to the type definitions can be found by looking at the bottom of the service.

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import { Registry as Services } from '@ember/service';

export default class Search extends Controller {
    @service router!: Services['router'];

    @action
    actionClick(){
        this.router.transitionTo('protected.apk.detail')
    }
}

Answer 2

Clues to the type definitions can be found by looking at the bottom of the service.

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import { Registry as Services } from '@ember/service';

export default class Search extends Controller {
    @service router!: Services['router'];

    @action
    actionClick(){
        this.router.transitionTo('protected.apk.detail')
    }
}

Answer 3

Answer №2

Here's a solution:

import Service from '@ember/service';
import type RouterService from '@ember/routing/router-service';

export default class MyService extends Service {
  @service declare router: RouterService;
}

Answer 4

Here's a solution:

import Service from '@ember/service';
import type RouterService from '@ember/routing/router-service';

export default class MyService extends Service {
  @service declare router: RouterService;
}

Answer 5

Answer №3

Injecting the router service is done like this:

@service router;

Answer 6

Injecting the router service is done like this:

@service router;

Utilizing Ember and Typescript: Guide on Injecting Router Service

Answer №1

Answer №2

Answer №3

Similar questions

Closing a bootbox alert by clicking on a href link

fetching data with Contentful and GatsbyJS

The data type 'number | undefined' cannot be assigned to type 'string' in TypeScript

Utilizing the URL path name for data retrieval in Next.js 14 - A step-by-step guide

Why does Angular open the debugger on localhost after a refresh today?

Configuring Typescript target and library to utilize Promise.allSettled on outdated web browsers

Generating Pulumi Outputs for exporting as an external configuration file

unable to form the directory named tns_modules

The Action-Reducer Mapping feature is encountering a type error when handling multiple types of actions

What is the best way to configure eslint or implement tslint and prettier for typescript?

How can a parent's method be activated only after receiving an event emitter from the child and ensuring that the parent's ngIf condition is met?

Configuring Typescript for src and test directories

Using TypeScript with Vue and Pinia to access the store

Navigating a SwipeableDrawer in React with scrolling functionality

What could be causing the "buffer is not a function" error to occur?

How to programmatically generate buttons with click functionality in Angular 2 and above

Issue encountered: Jest-dom is throwing a TypeError because $toString is not recognized as a function on a project using Typescript, React

Add information to an array by simply modifying the existing data that shares the same key/value pair

Preserving reactivity while swapping an item in Vue 3 using the composition API

ng2-select is experiencing difficulties when attempting to retrieve and process data from an API while also casting it within the initData