I am using Angular 5 and I seem to not be able to get data from ActivatedRoute using methods stated in other answers to my question.

app.routes.ts

export const AppRoutes = [
    {
        path : '',
        ponent: HomeView,
        pathMatch: 'full', data: {key: 'home', label: 'Home'}},
    {
        path : 'about',
        loadChildren: './+about/about.module#AboutModule'
    },
    {
        path : 'account/:id',
        loadChildren: './+account/account.module#AccountModule',
        canActivate: [AuthGuard],
        data: {key: 'account', label: 'My Account'}
    },
];

appponent.ts

@Component({
    selector: 'ou-app',
    templateUrl: 'appponent.html',
    styleUrls: ['../styles/main.scss'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
    constructor(
        private router: Router,
        private route: ActivatedRoute,
    ){}

    ngOnInit(){
        this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
            console.log('router events console... ', this.route);
        });
    }
}

I can't seem to get the data from the route under snapshot, root, children, firstChild, everything is null, or undefined

I am using Angular 5 and I seem to not be able to get data from ActivatedRoute using methods stated in other answers to my question.

app.routes.ts

export const AppRoutes = [
    {
        path : '',
        ponent: HomeView,
        pathMatch: 'full', data: {key: 'home', label: 'Home'}},
    {
        path : 'about',
        loadChildren: './+about/about.module#AboutModule'
    },
    {
        path : 'account/:id',
        loadChildren: './+account/account.module#AccountModule',
        canActivate: [AuthGuard],
        data: {key: 'account', label: 'My Account'}
    },
];

app.ponent.ts

@Component({
    selector: 'ou-app',
    templateUrl: 'app.ponent.html',
    styleUrls: ['../styles/main.scss'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
    constructor(
        private router: Router,
        private route: ActivatedRoute,
    ){}

    ngOnInit(){
        this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => {
            console.log('router events console... ', this.route);
        });
    }
}

I can't seem to get the data from the route under snapshot, root, children, firstChild, everything is null, or undefined

• javascript
• angular
• typescript

• Why are you trying to console log this.route? Are you interested in something in particular? – callback Commented Mar 15, 2018 at 20:47
• I'm trying to get the data obj from the activated route. I wasn't finding anything in this.route.snapshot.data or route.firstChild, .children etc. so I consoled this.route to look at the whole activated route and it looks blank which leaves me to believe I'm not getting it correctly – Lukas Sorensen Commented Mar 16, 2018 at 17:19

2 Answers 2

The issue is that you are not at the route that you are trying to look at. You need to go through the child routes. There is an example here: Retrieving a data property on an Angular2 route regardless of the level of route nesting using ActivatedRoute

I was able to modify your code as follows using the info from the above link.

  router.events
    .filter(event => event instanceof NavigationEnd)
    .map(() => this.activatedRoute)
    .map(route  => {
      console.log(route.snapshot.data);
      while (route .firstChild) route = route.firstChild;
      return route;
    })
    .mergeMap(route => route.data)
    .subscribe(x => {
      console.log('router events console... ', x);
    });

With this code I was able to get this:

Update: With RxJs v5.5 and above

ngOnInit() {
    this.router.events
        .pipe(
            filter((event) => event instanceof NavigationEnd),
            map(() => this.activatedRoute),
            map((route) => {
                while (route.firstChild) {
                    route = route.firstChild;
                }
                return route;
            }),
            mergeMap((route) => route.data))
        .subscribe((event) => console.log('router events console... ', event));
}

I was able to solve my problem following this github issue: https://github./angular/angular/issues/11812

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