在 Angular 中将 api 添加到工作流

Posted 2023-02-19

【中文标题】在 Angular 中将 api 添加到工作流

【英文标题】：In Angular add api to workflow

【发布时间】：2022-01-19 07:52:03

【问题描述】：

我更新了我的前端应用程序以使用 Angular 调用 API，如下示例所示

import  BrowserModule  from "@angular/platform-browser";
import  NgModule  from "@angular/core";
import  HttpClientModule  from '@angular/common/http';

import  AppComponent  from "./app.component";

@NgModule(
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
)
export class AppModule 

为此，我为其创建了 API 和 Web 应用程序。

我正在尝试执行以下操作，但无法执行。

如何将此添加到我的工作流程中？ 如何配置我的设置？

【问题讨论】：

您是否看到此MS Doc 来配置您的 Azure 静态 Web 应用设置？这可能有助于您的要点 #2

【参考方案1】：

您可以按照以下步骤和documentation 来检查#1：

在添加 API 之前构建静态 webapp。

创建 API（您可以为静态网站 API 创建 Azure 函数）

由于您已在 Angular 中添加前端代码以获取 API（MS Docs 中提到了相同的代码）

使用以下命令在本地运行前端和 API：

 npm install -g @azure/static-web-apps-cli
 npm install -g azure-functions-core-tools@3

 #build frontend app:
 npm run build --prod
 #start CLI
 swa start dist/angular-basic --api-location api

通过以下步骤将 API 添加到工作流：

在 .github/workflows/azure-static-web-apps-.yml 中打开您的工作流。 搜索属性api_location并将值设置为api。 保存文件。

#2 你可以参考这个MS Docs