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?
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'