Angular route 'data' is empty in ActivatedRoute.snapshot when AoT is enabled

Question

I have a few routes in my Angular 7 app that have a data property, used for different purposes - retrieved from activatedRoute.snapshot.data. The issue I'm having is that everything works as expected in development (JIT compiler) but once I move to production with Ahead-of-time, the data is an empty object.

Bare minimum to reproduce: add a data property to a route, e.g.

in app-routing.module.ts:

...
const routes: Routes = [
    {
        path: 'foo',
        component: fooComponent,
        data: {
            bar: 'bar'
        }
    }
];
...

then console.log() the activatedRoute.snapshot.data in the component matching the route e.g.

in foo.component.ts:

...
import { ActivatedRoute } from '@angular/router';
...

constructor(
    private activatedRoute: ActivatedRoute
) { }

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

With ng serve (JIT), you should get the data in console. With ng serve --aot=true (Ahead-of-time) data is an empty object in console.

There is not much else I could try apart from disabling AoT in production, which is not ideal due to the performance benefits. It looks like an issue with AoT itself but here I am wondering if someone else has faced and solved the same issue before?

Try instead `this.activatedRoute.data.subscribe(someData => console.log(data));`. https://angular.io/api/router/ActivatedRoute#data — Alexander Staroselsky, Apr 16 '19 at 15:45
are you just passing static strings in the route data? Are there any console errors? — inorganik, Apr 16 '19 at 15:57
@AlexanderStaroselsky unfortunately the same... empty object! — Luca, Apr 16 '19 at 17:54

score 2 · Answer 1 · answered Apr 17 '19 at 07:52

2

It seems like this issue : https://github.com/angular/angular-cli/issues/5754

Quick solution:

// app.component.ts
constructor(private router: Router) {
  // reset routes
  router.resetConfig(routes);
}

answered Apr 17 '19 at 07:52

qdelettre

1,873
5
25
36

1

not the same issue, but the information in that thread helped me finding the solution - have an upvote on me, thanks – Luca Apr 17 '19 at 14:37

score 2 · Accepted Answer · answered Apr 17 '19 at 14:36

routes need to be exported to work with AoT enabled

export const routes: Routes = [
    {
        path: 'foo',
        component: fooComponent,
        data: {
            bar: 'bar'
        }
    }
];

when running the code in the question, there were warnings that weren't exactly descriptive of what the issue was, but that piece of information together with the issue linked in @user1254498's answer (https://github.com/angular/angular-cli/issues/5754) I was able to figure out a fix.

WARNING in ./src/app/app.module.ngfactory.js 112:9550-9556 "export 'ɵ0' (imported as 'i65') was not found in './modules/pip/pip.module'

Angular route 'data' is empty in ActivatedRoute.snapshot when AoT is enabled

2 Answers2