在NgModule中访问location.host

Question

我试图使用Angular Adal来验证我的应用程序与Azure AD的管理界面，但我遇到了一些问题，其中包括 redirectUri. 我想获取当前应用程序的主机(location.host)，并将其代入 redirectUri 参数，这样无论这个应用程序在哪里运行，它都会在调用 AD

理想情况下，我的配置在 admin.module.ts 会是这样的。

MsAdalAngular6Module.forRoot({
  tenant: '[Removed]',
  clientId: '[Removed]',
  redirectUri: `https://${location.host}/admin`,
  endpoints: {
  },
  navigateToLoginRequestUrl: false,
  cacheLocation: 'localStorage',
  postLogoutRedirectUri: `https://${location.host}/logout`,
})

这在开发模式下工作得很好，但是由于Angular的AOT的缘故 location.host 被替换为 null 一旦我做了这个应用程序的prod构建。我做了一些调查，建议使用一个 InjectionToken 来在运行时替换这个值。现在我在 admin.module.ts 档案，在 @NgModule 节。

const REDIRECT_URI = new InjectionToken<string>('REDIRECT_URI');

export function redirectUriFactory() {
  console.warn('redirect to', `https://${location.host}/admin`); //debug correct uri
  return `https://${location.host}/admin`
}

然后在我的 NgModule 我在做

MsAdalAngular6Module.forRoot({
  tenant: '[Removed]',
  clientId: '[Removed]',
  redirectUri: REDIRECT_URI,
  endpoints: {
  },
  navigateToLoginRequestUrl: false,
  cacheLocation: 'localStorage',
  postLogoutRedirectUri: `https://${location.host}/logout`,
})

与我的供应商，包括 REDIRECT_URI 如下。

providers: [
...
  { provide: REDIRECT_URI, useFactory: redirectUriFactory }
]

但是，当我试图进行身份验证时，这导致了一个错误，因为它把RedirectUri传给了我。InjectionToken REDIRECT_URI 而不是我的 redirectUriFactory 功能。

我如何才能获得 location.host 在我 admin.module.ts 文件成功？

谢谢!

Answer 1

正如正确的说法，angular AOT编译器在编译过程中用null替换了这个变量，因为location.host不可用。避免这个问题的方法之一是使用JIT编译器而不是AOT编译器，因为在JIT编译过程中这个变量应该是可用的。(选择编译器)

除此以外，我相信传递hostname到重定向url是很困难的，如果是函数的话，你可以写函数来实现，但这是期待属性变量，因此很难做到。如果是函数的话，你可以写函数来实现，但这是期望属性变量，因此很难做到。