Why do I have to export the function I use in angular appModule import module?

Question

I have following code

 @NgModule({ declarations: [ ... ], imports: [ RoutingModule, SharedModule, JwtModule.forRoot({ config: { headerName: 'Authorization', tokenGetter: () => localStorage.getItem('token'), // <———— this line has problem whitelistedDomains: ['localhost:4200'] //blacklistedRoutes: ['localhost:3001/auth/', 'foo.com/bar/'] } }) ], ... }) export class AppModule { } 

It works using ng serve , but I got following error when I run ng build --prod

ERROR in Error during template compile of 'AppModule'
  Function expressions are not supported in decorators in 'ɵ0'
    'ɵ0' contains the error at app/app.module.ts(36,22)
      Consider changing the function expression into an exported function.

Then I modified my code to

 function getToken() { return localStorage.getItem('token') } … JwtModule.forRoot({ config: { headerName: 'Authorization', tokenGetter: () => getToken, whitelistedDomains: ['localhost:4200'] ... 

And it's still not happy

ERROR in app/app.module.ts(19,10): Error during template compile of 
'AppModule'
  Reference to a non-exported function.

At the end, I solved the issue by exporting the getToken function.

I have following question

1. Why ng serve works but not ng build --prod ?
2. Why inline lambda doesn't work?
3. Why do I have to export the function?

Answer 1

The issues you are having are due to the Ahead-of-Time (AOT) compiler in Angular. By default, ng serve and ng build use the Just-in-Time (JIT) compiler. However, ng build --prod uses the AOT compiler. You can simulate this same behavior doing ng serve --aot .

So, to your questions.

1. See above explanation.
2. The AOT Collector does not support the arrow function syntax .
3. Angular generates a class factory in a separate module and that factory can only access exported functions .

Hope this helps!