Having trouble injecting ActivatedRouteSnapshot into the component

Struggling to inject ActivatedRouteSnapshot into a component, encountering errors when trying to access query params. Here is the error stack trace:

"Error: Can't resolve all parameters for ActivatedRouteSnapshot: (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?).
at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7042:33)
at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73735:16)
at new SyntaxError (http://localhost:4200/vendor.bundle.js:6140:16)
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:4200/vendor.bundle.js:19345:31)
at CompileMetadataResolver._getTypeMetadata (http://localhost:4200/vendor.bundle.js:19220:26)
at CompileMetadataResolver._getInjectableMetadata (http://localhost:4200/vendor.bundle.js:19208:21)
at CompileMetadataResolver.getProviderMetadata (http://localhost:4200/vendor.bundle.js:19450:40)
at http://localhost:4200/vendor.bundle.js:19408:49
at Array.forEach (native)
at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/vendor.bundle.js:19375:19)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18848:30)
at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18736:23)
at http://localhost:4200/vendor.bundle.js:18937:54
at Array.forEach (native)
at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:18936:41)"

The attempt to inject ActivatedRouteSnapshot in the component is done through this constructor:

constructor([...], private router: Router,
          private route: ActivatedRouteSnapshot) {
    [...]
}

In app.component.ts, ActivatedRouteSnapshot is provided like so:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [[...], ActivatedRouteSnapshot]
})

Attempting to access query params following the example from here.

According to Angular docs, injecting ActivatedRouteSnapshot should be straight forward. What could be missing?

Answer №1

Opt for ActivatedRoute over ActivatedRouteSnapshot for better functionality. Utilize the snapshot as shown below:

constructor(activatedRoute: ActivatedRoute) { 
  var snapshot = activatedRoute.snapshot;
}

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

Removing a value from an array of objects in Angular 2

There is a single array that holds objects: one = [ {name: 'Name', key: '4868466'}, {name: 'Name', key: '4868466'}, {name: 'Name', key: '4868466'}, {name: 'Name', key: & ...

Deploying Angular application on IIS results in errors specific to the IIS environment

I developed an application using .net 3.0 and Angular 8 in Visual Studio. I then updated Angular to version 10. While everything runs smoothly when I test the app locally, I encountered an error after publishing it on IIS: no such file or directory, open ...

Endpoint path for reverse matching in Mongodb API

I am currently in the process of setting up a webhook system that allows users to connect to any method on my express server by specifying a method and an endpoint to listen to (for example PUT /movies/*). This setup will then send the updated movie to the ...

Navigating through child routes in Angular can be tricky, especially when dealing with unknown routes

I'm having some trouble with routing today. I have a collection of components each associated with a unique route. I am trying to include a 'PageNotFoundComponent' for any incorrect route in both the parent and child components. Let me expla ...

Can anyone offer any suggestions for this issue with Angular? I've tried following a Mosh tutorial but it's

Just finished watching a video at around 1 hour and 35 minutes mark where they added the courses part. However, I encountered an error during compilation. ../src/app/app.component.html:2:1 - error NG8001: 'courses' is not recognized as an elemen ...

The error message "this.startLoginAnimatioon is not defined as a function" popped up

I've been developing a login system using TypeScript but I keep encountering an error that I can't figure out. Here's the issue in detail: The problem arises when the this.startLoginAnimation() function is called within the attemptLog ...

A step-by-step guide on dynamically binding an array to a column in an ag

I am currently working with the ag-grid component and I need to bind a single column in a vertical format. Let's say I have an array ["0.1", "0.4", "cn", "abc"] that I want to display in the ag-grid component as shown below, without using any rowData. ...

What is the best way to trigger a 'Save As' dialog box on a browser when a button is activated within an Angular application, guaranteeing cross-browser compatibility?

The solution needs to be compatible with both Windows and Mac operating systems. Additionally, we should be able to specify a default file name and type. ...

Restricting a checkbox to a maximum of 5 checkmarks

In a multi-column table, each column is represented by a checkmark. I want to limit the ability to tick a checkmark to only 5 checkmarks. Here is the code that has been implemented: <tbody> <ng-container *ngFor="let col of testData" ...

Responding to modifications occurring beyond the Angular2 framework

I have a traditional non-angular web page built with basic JavaScript, and I am interested in integrating Angular2 for some new functionalities. My idea was to bind an Angular2 component to an object being updated by the existing JS code, allowing Angular2 ...

Guide on how to duplicate a form upon clicking an "add" link in Angular 2

Is it possible to dynamically repeat a form in Angular2 when clicking on a link? I am looking for a way to add the same form below the previous one when a specific link is clicked. Any suggestions or immediate replies would be greatly appreciated. For ins ...

Newest Angular package.json

Each time I attempt to update my Angular components to the latest version, I encounter the same error. It seems like a never-ending cycle... npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/ ...

What is the process for connecting a date/time form control?

My code seems to only be working for the 'title' element, while the 'docdatetime' control remains blank. Can anyone spot what I'm doing wrong? //template =================================================== <div class="form-grou ...

Angular: ViewContainer is failing to correctly insert the component next to the anchor element, instead it is placing the component inside the anchor element

I have successfully implemented a tab view with the following structure: <tabs> <ul #getVCRefHERE > <li>tab1</li> <li>tab2</li> </ul> <tab> <ng ...

Issue: Unable to resolve all parameters for setupRouter function

I encountered an error stating "Can't resolve all parameters for RouteParams" while setting up a basic app for routing. Here is how my app.module.ts file is structured: import { NgModule } from '@angular/core'; import { BrowserModule ...

The global CSS styles in Angular are not being applied to other components as expected

Currently utilizing Angular v10, I have a set of CSS styles that are meant to be used across the entire application. To achieve this, I added them to our global styles.css file. However, I'm encountering an issue where the CSS is not being applied to ...

Angular successfully compiled without any issues despite the explicit cast of a number into a string variable

As I delve into the initial concepts of Angular, I have come across a puzzling situation. Here is the code snippet: import { Component } from '@angular/core'; @Component({ selector: 'sandbox', template: ` <h1>Hello {{ nam ...

Determine the data type of an index within an array declaration

Imagine we have the following array literal: const list = ['foo', 'bar', 'baz'] as const; We are attempting to create a type that represents potential indices of this array. This is what we tried: const list = ['foo&ap ...

Leverage the key-value pairs in JSON to automatically suggest types within the function parameters

If we have data structured like this: { "key1": "hardcoded string", "key2": "another hardcoded string", } Imagine a function with 2 parameters where the first parameter should refer to key1 and the second to i ...

Having trouble with @HostListener on iPad or iOS devices? I'm currently using a Bluetooth keyboard to navigate and interact with an Angular app

I am currently creating a web application using Angular 6 for an iPad with a screen size of 9.7 inches. I have implemented code similar to the one found at this link. import { Component, HostListener } from '@angular/core'; export enum KEY_CODE ...