# @frontegg/angular 中文文档

规范地址：https://npmcn.com/package/%40frontegg/angular/

版本：7\.24\.2
npm 元数据更新时间：2026-11-11T12:31:03.879Z
中文译文更新时间：2026-11-15T14:50:34.146Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40frontegg/angular
原文对照：https://npmcn.com/package/%40frontegg/angular/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：744 kB，50 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：@angular/core \>=12\.0\.0，@angular/common \>=12\.0\.0
- 首次发布：2021-06-14T20:29:13.411Z
- 最新版本发布：2026-11-11T12:31:03.632Z
- 近 30 天下载量：9183（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：645（近 12 个月 73 个）

## 中文简介

![Frontegg Logo](https://fronteggstuff.blob.core.windows.net/frongegg-logos/logo-transparent.png)

### 前额巨角

Frontegg是一个网络平台,其中

## 安装

```sh
npm install @frontegg/angular
```

也可以使用：`pnpm add @frontegg/angular`、`yarn add @frontegg/angular`、`bun add @frontegg/angular`

## README

![Frontegg Logo](https://fronteggstuff.blob.core.windows.net/frongegg-logos/logo-transparent.png)

### 前额巨角

Frontegg是一个网络平台,SaaS公司可以在此设置其完全管理,可伸缩和品牌意识的-SaaS功能,并整合到其SaaS门户网站中,最多有5行代码.  

  

## 第3.0.1版以来的变化

如果你从 `@frontegg/angular` 版本2或更早,您可以找到 [这里的移民指南](https://docs.frontegg.com/docs/migration-guide-fronteggangular-v2-v3)

### 1\. 安装Frontegg图书馆

运行以下命令以安装 Frontegg 角库 :

```bash
npm install @frontegg/angular
```

### 2\. 配置

1.  添加 `FronteggAppModule` 改为 `AppModule.imports[]`
2.  添加 `FronteggComponent` 改为 `AppModule.entryComponents[]`

```ts
/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';
import { FronteggAppModule, FronteggComponent } from '@frontegg/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,

    /** 1. Import Frontegg Module **/
    FronteggAppModule.forRoot(
      {
        contextOptions: {
          baseUrl: 'https://[YOUR_SUBDOMAIN].frontegg.com',
          clientId: '[YOUR_CLIENT_ID]'
        },
      }
    ),
  ],

  /** 2. Add Frontetgg Component to your entryComponents **/
  entryComponents: [FronteggComponent],

  bootstrap: [AppComponent],
})
export class AppModule { }
```

#### 连接您的应用程序靴子组件 `fronteggService` 以查看前置加载状态

```ts
//app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FronteggAuthService, FronteggAppService } from '@frontegg/angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnDestroy {
  isLoading = true;
  loadingSubscription: Subscription;
  constructor(private fronteggAppService: FronteggAppService) {
    this.loadingSubscription = fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
  }
  ngOnDestroy(): void {
    this.loadingSubscription.unsubscribe()
  }
}
```

#### 把你的申请包起来 `*ngIf="!isLoading"` 选择器以确保您有正确的上下文

```html
<!-- app.component.html -->

<div *ngIf="!isLoading">
    <router-outlet></router-outlet>
</div>
```

### 3\. 了解用户背景

Frontegg通过 a 显示用户上下文和认证状态 `FronteggAppService`您可以通过 `FronteggAppService`. 获得纪念 用户状态、 SSO 状态、 MFA 状态等认证子状态使用 `FronteggAuthService` 如下所示: 样本 :

```ts
// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FronteggAuthService, FronteggAppService } from '@frontegg/angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
  isLoading = true;
  loadingSubscription: Subscription;
  user?: any;

  constructor(
    private fronteggAuthService: FronteggAuthService, 
    private fronteggAppService: FronteggAppService) {
    this.loadingSubscription = 
      fronteggAppService.isLoading$.subscribe((isLoading) => this.isLoading = isLoading)
  }

  ngOnInit(): void {
    this.fronteggAuthService?.user$.subscribe((user) => {
      this.user = user
    })
  }

  ngOnDestroy(): void {
    this.loadingSubscription.unsubscribe()
  }
}
```

更新 `app.component.html` 显示用户名和外观:

```html
<!-- app.component.html-->

<div *ngIf="!isLoading">
    <img src={{user?.profilePictureUrl}} alt={{user?.name}} />
    <div>User name: {{user?.name}}</div>
</div>

```

### 4\. 在您的路由模块中添加 FronteggAuthGuard

使用 `FronteggAuthGuard` 如果用户未认证并试图到达私人路线,则将用户重定向到登录页面.

```ts
// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProtectedAppComponent } from './components/protected.component';
import { NotFoundComponent } from './components/not-found.component';
import { HomeComponent } from './components/home.component';
import { UsersComponent } from './components/users.component';
import { FronteggAuthGuard } from '@frontegg/angular';

/** Option to protect a specific route **/
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'test-private-route', canActivate: [FronteggAuthGuard], component: ProtectedAppComponent },
  { path: '**', component: NotFoundComponent },
]

/** Option to protect all routes **/
const routes: Routes = [
  {
    path: '',
    canActivate: [FronteggAuthGuard],
    children: [
      { path: '', component: HomeComponent },
      { path: 'users', component: UsersComponent },
      { path: '**', component: NotFoundComponent },
    ]
  },
]

@NgModule({
  declarations: [ProtectedAppComponent, HomeComponent, UsersComponent, NotFoundComponent],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}
```

### 5\. 运行 App, 注册和登录

我们都准备好了 让我们运行应用程序 并看到Frontegg行动.

```
npm run serve
```

好极了 Frontegg现在和你的应用软件结合了!

在您的应用程序中添加了登录和登录路径 :

注册屏幕将在http://localhost:4200/account/sign-up上公布

登录屏幕将在 http://localhost:4200/account/login 上显示

如果您已经登录, 请访问 http://localhost: 4200/ account/logout并登录出 .

通过注册和登录来尝试一下.

试试看! 开通http://localhost:8080/account/sign-up 与您的第一个用户签约.

# Frontegg 管理员门户整合

为了让终端用户能够控制安全设置、配置、团队管理等等,下一步将 要嵌入 `Admin Portal` 在您的申请.

对于Frontegg 管理员门户集成,我们将导入`FronteggAppService` 从 `frontegg-app` 软件包和 使用情况 `showAdminPortal` 方法.

```ts
import { Component, OnInit } from '@angular/core';
import { FronteggAppService } from '@frontegg/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(private fronteggAppService: FronteggAppService) { }

  showApp(): void {
    this.fronteggAppService?.showAdminPortal()
  }
}
```

6.  慢慢来!

## 常见问题

### @frontegg/angular 是什么？

前额巨角 Frontegg是一个网络平台,其中

### 如何安装 @frontegg/angular？

在项目目录运行 npm install @frontegg/angular，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>=12\.0\.0）、@angular/common（\>=12\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @frontegg/angular 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @frontegg/angular 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @frontegg/angular 可以商用吗？

@frontegg/angular 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @frontegg/angular 的下载量有多少？

根据 npm 官方下载统计，@frontegg/angular 在 2026/10/16 – 2026/11/14 这 30 天内被下载 9,183 次，日均约 306 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @frontegg/angular 还在维护吗？

最新版本 7\.24\.2 发布于 2026/11/11（4 天前）；至今共发布 645 个版本，其中过去 12 个月发布了 73 个；首次发布于 2021/06/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。