javascript - 为什么我必须导出我在 angular appModule 导入模块中使用的函数？

Question

我有以下代码

@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 { }

它可以使用 ng serve，但是当我运行 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.

然后我修改了我的代码

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

还是不开心

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

最后，我通过导出getToken函数解决了这个问题。

我有以下问题

1. 为什么 ng serve 有效但 ng build --prod 无效？
2. 为什么内联 lambda 不起作用？
3. 为什么我必须导出函数？

Answer 1

您遇到的问题是由 Ahead-of-Time (AOT) 引起的Angular 中的编译器。默认情况下，ng serve 和 ng build 使用即时 (JIT) 编译器。但是，ng build --prod 使用 AOT 编译器。您可以通过 ng serve --aot 来模拟同样的行为。

所以，对于你的问题。

1. 参见上面的解释。
2. AOT 收集器不支持箭头功能 syntax .
3. Angular 在一个单独的模块中生成一个类工厂，然后工厂只能访问exportedfunctions .

希望这对您有所帮助!