在 Angular 中将 api 添加到工作流

【问题标题】：In Angular add api to workflow在 Angular 中将 api 添加到工作流
【发布时间】：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

标签： angular azure azure-web-app-service

【解决方案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 添加到工作流：
1. 在 .github/workflows/azure-static-web-apps-.yml 中打开您的工作流。
2. 搜索属性api_location并将值设置为api。
3. 保存文件。

#2 你可以参考这个MS Docs

【讨论】：