Angular ActivatedRoute data returns an empty object

Question

I have a route registered with some data:

const routes: Routes = 
[
    {path: 'my-route', data: { title: 'MyTitle' }, component: MyComponent},
];

and I'm trying to access to the route's data using ActivatedRoute:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({...})
export class MyComponent implements OnInit {
  private routeData;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.routeData = this.route.data.subscribe((data) => {
      console.log(data); // this is returning an empty object {}
    });
  }
}

but for some reasons data is an empty object.

How to solve this problem?

Check this out: https://stackoverflow.com/a/57447329/5366641 — scopchanov, Aug 11 '19 at 04:36

Francesco Borzi · Accepted Answer · 2018-06-22T08:20:13.763

140

Edit: the problem is that I was trying to access the ActivatedRoute from a Component which is outside the `<router-outlet>`. So it looks like that this is the intended behaviour.

However I still think that my answer below can be useful to anyone who is trying to accomplish the same thing.

I found a workaround on GitHub (thanks manklu) that I used in order to accomplish what I needed:

import { Component, OnInit } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';

@Component({...})
export class MyComponent implements OnInit {
  private routeData;

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.subscribe((data) => {
      if (data instanceof RoutesRecognized) {
        this.routeData = data.state.root.firstChild.data;
      }
    });
  }
}

doing this way this.routeData will hold the route data that I needed (in my case the page title).

edited Jun 22 '18 at 08:20

answered Aug 17 '17 at 14:06

Francesco Borzi

56,083
47
179
252

Hey, where is your github link? I only found this bug report: https://github.com/angular/angular/issues/19420 :) – Guntram Oct 18 '17 at 11:55
Thank you so much! – Soft Bullets Jul 23 '18 at 08:14
2

Thank you for providing this explanation. I was only calling a specific component via app.component.html - not the ``. Cheers! – lakewood Jan 08 '19 at 02:36
struggled with this for a while, your solution worked perfectly. thanks – Ray_Hack Mar 06 '19 at 16:50
3

If you want to get url params instead of your own data use this: `this.router.events.subscribe(val => { if (val instanceof RoutesRecognized) { var strId = val.state.root.firstChild.params["id"]; }});` – Juan José Ramírez Mar 15 '19 at 16:01
For those with data that is nested deeper, this answer worked for me: https://stackoverflow.com/a/49632700/64279 – adam0101 Jun 20 '19 at 12:36
2

This solved my problem.. and by that I mean I forgot to add a router-outlet... I was going crazy. Thanks! – Damian C Aug 18 '21 at 21:57

score 9 · Answer 2 · answered Mar 17 '21 at 10:48

9

Get route custom data for component outside <router-outlet> (Angular 8):

constructor(private router: Router) {}
    
ngOnInit() {
    this.router.events.subscribe(data => {
      if (data instanceof ActivationStart) {
        console.log(`Custom data`, data.snapshot.data);
      }
    });
  }

answered Mar 17 '21 at 10:48

Oleg Averkov

304
3
5

It worked for me in angular 10. I am trying to capture title key under data object in child component which declared in primary router outlet from appComponent. – Mukesh Rathore May 05 '21 at 19:36
6

Only works on navigation, not on page load on Angular 12 – squirtgun Nov 01 '21 at 18:52
Yes this is the Solution if you're getting data To a component that is OUTSIDE – Binary_Hits00 Jan 11 '23 at 03:08

score 4 · Answer 3 · answered Aug 07 '18 at 16:34

4

I Don't know the version spoken, but as of Angular 6, this worked for me:

(Ofcourse thanks to shinDath)

  routeData;
  ngOnInit() {
    //child route param doesnt go up to parent route params.
    this.router.events.subscribe((val) => {
      if (val instanceof ActivationEnd) {
        if(!$.isEmptyObject(val.snapshot.params)){
          this.routeData = val.snapshot.params;
        }
      }
    });
  }

answered Aug 07 '18 at 16:34

Blazzze IL

99
1
6

1

The data that the OP was trying to get was the one defined in the route configuration. This is not what is asked for – alaboudi May 14 '19 at 00:31

score 2 · Answer 4 · answered Oct 30 '19 at 13:55

This is part of my code (NOTE: I'm using Angular 8):

constructor(private _router: Router, private _route: ActivatedRoute) {}

ngOnInit() {
  ...
  this.listenRouting();
}

listenRouting() {
    this._router.events.subscribe((router: any) => {
      routerUrl = router.url;
      if (routerUrl && typeof routerUrl === 'string') {
        routerList = routerUrl.slice(1).split('/');
        console.log("data.breadcrumbs", this._route.snapshot.routeConfig.children.find(child => child.path === routerList[routerList.length - 1]).data.breadcrumbs);
        ...
      }
    });
}

So data is "hiding" under ActivatedRoute.snapshot.routeConfig.children Array. Each child contains, among other things, data. In my case data is configured in routing.module, e.g.:

const routes: Routes = [
  { path: "facility-datas",
    component: FacilityTerminal,
    data: {
      breadcrumbs: "b ft"
    }
  },
...
];

`ActivatedRoute.snapshot.routeConfig.children` is empty. – Ben Racicot Jun 25 '22 at 02:06 — Ben Racicot, Jun 25 '22 at 02:06

score 1 · Answer 5 · answered Mar 28 '22 at 05:55

Answer from Angular contributor, link

this.router.events.pipe(
    filter((e) => e instanceof NavigationEnd),
    map(() => {
        let route = this.activatedRoute;

        while (route.firstChild) {
            route = route.firstChild;
        }

        return route;
    }),
    filter((route) => route.outlet === 'primary'),
    mergeMap((route) => route.data),
    tap(console.log)
);

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
) {}

score -2 · Answer 6 · answered Dec 02 '20 at 09:41

import { AfterViewInit, Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements AfterViewInit {
  paramId: string;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngAfterViewInit(): void {
    this.paramId = this.activatedRoute.snapshot.params.id;
    console.log('paramId =', this.paramId);
  }

}

This will cause ExpressionChangedAfterItHasBeenCheckedError exception — Timothy, Dec 02 '20 at 09:47

score -9 · Answer 7 · edited May 23 '18 at 14:32

-9

Below should work:

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.data);
}

edited May 23 '18 at 14:32

Jeffrey Roosendaal

6,872
8
37
55

answered Aug 17 '17 at 14:22

Rohit Ramname

824
2
9
24

Angular ActivatedRoute data returns an empty object

7 Answers7

Edit: the problem is that I was trying to access the ActivatedRoute from a Component which is outside the `<router-outlet>`. So it looks like that this is the intended behaviour.

Linked

Angular ActivatedRoute data returns an empty object

7 Answers7

Edit: the problem is that I was trying to access the ActivatedRoute from a Component which is outside the <router-outlet>. So it looks like that this is the intended behaviour.

Linked

Edit: the problem is that I was trying to access the ActivatedRoute from a Component which is outside the `<router-outlet>`. So it looks like that this is the intended behaviour.