如何用新的API (非比较)在角火v7中创建防空洞

Question

我遇到了错误

TypeError:无法提升未知的可观察类型

当尝试使用v7角火与新的API。

特别是"@angular/fire": "^7.4.1"，它是角14，火基9。

注意，作为开发人员不推荐的故意选择，我在我的应用程序中不使用compat anywhere。

import { User } from '@angular/fire/auth';
import { AuthGuard, AuthPipe, AuthPipeGenerator } from '@angular/fire/auth-guard';

const redirectUnauthorizedAndUnverifiedToAuth: AuthPipe = map((user: User | null) => {
  // if not logged in, redirect to `auth`
  // if logged in and email verified, allow redirect
  // if logged in and email not verified, redirect to `auth/verify`
  return !!user ? (user.emailVerified ? true : ['auth', 'verify']) : ['auth']
})

const routes: Routes = [
  {
    path: "auth",
    loadChildren: () => import("./auth/auth.module").then(m => m.AuthModule)
  },
  {
    path: "my-feature",
    loadChildren: () => import("./my-feature/my-feature.module").then(m => m.MyFeatureModule),
    canActivate: [AuthGuard],
    data: { authGuardPipe: redirectUnauthorizedAndUnverifiedToAuth }
  },
  { path: "", redirectTo: "auth", pathMatch: "full" },
  { path: "**", redirectTo: "auth" }
];

Answer 1

撰写https://github.com/angular/angularfire#developer-guide时的注意事项

AngularFire有了一个新的树型API --摇摆不定的API，但是它仍在积极开发中，文档正在开发中，因此我们建议大多数开发人员暂时坚持使用可兼容API。

尽管名称为AuthPipeGenerator，但新API期望的是AuthPipe而不是authGuardPipe。

https://github.com/angular/angularfire/blame/master/src/auth-guard/auth-guard.ts#L21

const authPipeFactory = next.data.authGuardPipe as AuthPipeGenerator || (() => loggedIn);

在import { AuthPipe, AuthPipeGenerator } from '@angular/fire/auth-guard';中找到的类型定义

被解决

const authPipeGenerator: AuthPipeGenerator = () => redirectUnauthorizedAndUnverifiedToAuth

const routes: Routes = [
  ...
  {
    path: "my-feature",
    ...
    data: { authGuardPipe: authPipeGenerator }
  },