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?

Answer 1

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'