Unable to inject ActivatedRouteSnapshot

Question

Injecting ActivatedRouteSnapshot into a component is not working (and neither is injecting ActivatedRoute). Here the 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)"

In the component, ActivatedRouteSnapshot is injected as follows:

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

ActivatedRouteSnapshot is provided in app.component.ts:

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

I'm trying to access the query params similarly to how it is done here: https://stackoverflow.com/a/38997116/3433306

According to the docs it should be as simple as adding it to the constructor parameters: https://angular.io/docs/ts/latest/api/router/index/ActivatedRouteSnapshot-interface.html

What am I missing to successfully inject ActivatedRouteSnapshot?

AFAIK `ActivatedRouteSnapshot` is not a provider. So long as you have a router for your app which routes to your component, you can simply inject the snapshot into it with nothing else needed. — Zircon, May 26 '17 at 16:06
remove `ActivatedRouteSnapshot` from the `providers: [[...], ActivatedRouteSnapshot]`. it's provided automatically by the routing module — Max Koretskyi, May 26 '17 at 16:07
When I remove it from the list of providers I get an error saying `Error: Error in ./LoginPageComponent class LoginPageComponent - inline template:6:10 caused by: No provider for ActivatedRouteSnapshot!` (note that I'm trying to inject in LoginFormComponent which is a child of the LoginPageComponent mentioned in the error) — studersi, May 26 '17 at 16:24

score 213 · Accepted Answer · answered May 26 '17 at 16:52

213

Use ActivatedRoute instead of ActivatedRouteSnapshot. Then you can use the snapshot like this:

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

answered May 26 '17 at 16:52

Markus Kollers

3,508
1
13
17

4

I couldn't understand why it caused issue? – Akshay Feb 12 '18 at 10:41
16

@Akshay Apparently, `ActivatedRouteSnapshot` is not a provider and cannot be injected (see comment below original question). However, if you inject `ActivatedRoute`, you can access the snapshot that comes with it. – studersi Feb 28 '18 at 10:47
activatedRoute.snapshot.url returns empty array whatever the url – Mohamed Abo Elmagd Oct 30 '18 at 11:18
@MohamedAboElmagd: I suppose you are working with lazy loading, and the component, in which you are inspecting ```activatedRoute.snapshot.url``` belongs to a route with an empty path. Try to print out the property of the parent snapshot: ```activatedRoute.snapshot.parent.url``` – Markus Kollers Oct 30 '18 at 13:08
@MohamedAboElmagd: Please open a new question with more detailed informations and i'm going to answer it :) – Markus Kollers Oct 30 '18 at 16:33
4

If you understand main difference between activatedRoute and ActivatedRouteSnapshot, then i will easy to understand why ActivatedRouteSnapshot injection given error. Diff => Since ActivatedRoute can be reused, ActivatedRouteSnapshot is an immutable object representing a particular version of ActivatedRoute. It exposes all the same properties as ActivatedRoute as plain values, while ActivatedRoute exposes them as observables. ActivatedRouteSnapshot is working in resolve which is getting invoked when one of the route gets active. – surekha shelake Jun 11 '19 at 08:19
If you are not supposed to use it, why do the Angular docs provide it as an example? https://angular.io/guide/router#resolve-pre-fetching-component-data – Vincil Bishop Jan 01 '20 at 23:57
If you notice in the documentation it is used as a parameter in the canLoad() method for example, not in the constructor as an injected service. This is the difference between ActivatedRoute and ActivatedRouteSnapshot. ActivatedRoute is injectable and can be injected into constructors/classes. ActivtedRouteSnapshot is just an instance that is passed as a parameter to methods such as canLoad, canActivate etc... – Canolyb1 Apr 22 '20 at 15:46
grate solution, its helping me – Victor Orletchi Aug 26 '21 at 11:00

Unable to inject ActivatedRouteSnapshot

1 Answers1

Linked