It is not possible to create a cyclic dependency

Currently, I am utilizing @ngrx/effects along with @angular/router in my Angular 2 project (version RC4).

Upon adding the line private router: Router within the effects:

@Injectable()
export class RouterEffects {
  constructor(
    private updates$: StateUpdates<AppState>,
    private router: Router   // <- this line
  ) {}
}

An error is triggered and it reads as follows:

EXCEPTION: Cannot instantiate cyclic dependency! (Token Application Initializer -> Token @ngrx/effects Bootstrap Effects -> Router -> ApplicationRef -> ApplicationRef_)

I am seeking a solution to resolve this issue. Thank you for any assistance.

Answer №1

Shoutout to Anthony @qdouble and Mike Ryan @MikeRyan52 for the helpful advice on gitter.

Check out the conversation here

Looks like application initializers will no longer be supported in the upcoming RC, so keep an eye out for updates.

Also, Anthony shared a workaround solution here: Here's the link for more information

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with calling a public method from an onchange event triggered by a custom Google Maps control in the Ionic framework has been encountered

Hello, fellow developers! I am relatively new to Ionic and web programming in general. Currently, I am working on a small app that involves integrating the Google Maps JS API. While I have successfully created and loaded the map, as well as added a custom ...

execute a function within a dynamic component upon the execution of a function in the parent Angular component

How can I trigger a function in a child component to execute when a function in the parent component is called, without modifying the parent component? Any suggestions on how to communicate this requirement from the parent to the child components? ...

Basic exam but located in a place that is not valid

Here is a test I am working on: // import {by, element, browser} from "protractor"; describe('intro', () => { beforeEach(() => { browser.get(''); }); it('should have multiple pages', () => { let buttonOn ...

Is there a way to track the loading time of a page using the nextjs router?

As I navigate through a next.js page, I often notice a noticeable delay between triggering a router.push and the subsequent loading of the next page. How can I accurately measure this delay? The process of router push involves actual work before transitio ...

Guide to passing parameters in the pop method of Ionic 2

When using the push method in Ionic2, I attempted to pass parameters like so: this.nav.push(SecondPage, { thing1: data1, thing2: data2 }); However, I'm curious if there is a way to pass parameters in the pop() method. ...

Angular obtains an undefined response from a service

Having trouble retrieving the data from my service. Working with Angular 8. Here's the code snippet: Within the service: query(url: string) { this.subscription = this.socket$.subscribe( (message) => { return message; }, ...

Tips for showcasing an array containing two different types of objects in Angular

After sending a request to a remote server, I am returned with a JSON array. However, the array can contain two different types of JSON objects: [ { "country": "USA", "caseCount": 561, "caseDates": [], ...

The View is not reflecting changes in the Variable

Is there a way to disable all the buttons when selectedplace is null in the Dialog, as it currently works when the Dialog first starts but remains activated all the time when the option is changed? I have attempted the following: Customized HTML: ...

Issue with TagCloud functionality when deployed on Vercel platform

Everything functions perfectly on my local machine, but once deployed to Vercel, the display disappears. I've double-checked the text, container, and TagCloud - all showing the correct responses. I even tried uninstalling and reinstalling TagCloud wit ...

Different methods for organizing an array of strings based on eslint/prettier

I possess an assortment of keys that I desire to sort in alphabetical order whenever I execute eslint --fix/prettier. My inference is that such a feature does not exist by default due to its potential impact on the code's behavior. Therefore, my quer ...

Encountering an issue with undefined error when performing two-way form binding with an object that implements an interface

I have defined an User interface: export interface User{ name:string; email:string: address:string; } After importing this interface on my Ionic page, I declared the following code in the class, just before the constructor: user:User; Later, in the ngO ...

The module is missing a declaration file and therefore has an implicit type of 'any'. This error (TS7016) occurs in TypeScript version 2.0

So I've been experimenting with the module react-image-gallery. Surprisingly, there seems to be no types available for this package when trying to install it using npm. When attempting npm install @types/react-image-gallery, all I get is a 404 error. ...

What could be causing the media queries to not take effect at a max-width of 425px?

When I try to apply media queries for max-width 768px and max-width 425px, I noticed that the styles intended for max-width 768px are also being applied when the width is 425px. This results in the al-articles-tags-chip-list-container having a width of 600 ...

In TypeScript, it can be challenging to determine the equality between a value and an enum

I am encountering an issue with my simple code: enum Color { BLUE, RED } class Brush { color: Color constructor(values) { this.color = values.color } } let JSON_RESPONSE = `{"color": "BLUE"}` let brush = new Brush(JSON.parse(JSON ...

The URL is reverted back to the previous address

Currently in the process of developing an Angular application, I've encountered a minor visual issue. On one of the pages, there is a ReactiveForm implemented, but whenever I navigate to that page, the URL reverts back to the previous one (even though ...

Collaborating with numerous security personnel on a route schedule

Seeking assistance with navigating routes in my app. Currently, upon starting the app at http://localhost:4200, it directs to the login page. After a successful authentication, the app then navigates to the dashboard at http://localhost:4200/dashboard. I ...

Transporting a Typescript file to the customer using JavaScript

As a newcomer to typescript and in the process of creating a small application in visual studio 2013, I have noticed that when viewing the project in Chrome's developer tools, typescript files (*.ts) are being downloaded to the client. This could pote ...

Navigating back to the previous page with data in Angular 4 after switching from Angular 2

One scenario to consider is when page C features a Go Back button. On Page A, navigate to Page C with data and click the Go Back button to return to Page A with data. Similarly, on Page B, go to Page C with data and press the Go Back button to go back to ...

What sets the do/tap operator apart from other observable operators?

Can anyone clarify the distinction in simple terms between the typical observable operators used for observing output and why do/tap appear to serve the same purpose? What is the reason for utilizing do/tap? ...

Tips to declare a return type for a function that includes an optional formatter function parameter

I'm currently exploring how to correctly define the return value when working with an object that includes optional formatter functions. Everything is running smoothly for a function with a single value. type Params = { id?: number created?: ...