azure 应用服务上的 Angular 应用 - 从资产文件夹加载配置文件时出现 404 错误

Posted 2023-03-25

【中文标题】azure 应用服务上的 Angular 应用 - 从资产文件夹加载配置文件时出现 404 错误

【英文标题】：Angular app on azure app service - 404 errors when loading config file from assets folder

【发布时间】：2019-03-05 07:48:57

【问题描述】：

我正在尝试在 azure 应用服务平台（Windows 机器）上部署 Angular 6 应用。该应用程序本身只是一个新的 Angular 应用程序（由 ng new appname 生成的基本代码）。我在本教程之后添加了一些小代码，以便在 vsts 发布管道中使用配置文件并利用变量替换 - manage settings for an angular app with vsts。

这些是我对生成的应用所做的代码更改。 在 app.module.ts 中

export function initializeAppSettings(appSettings: AppSettings) 
  return () => appSettings.load();

...

providers: [AppSettings, 
    provide: APP_INITIALIZER,
    useFactory: initializeAppSettings,
    deps: [AppSettings],
    multi: true
  ]

对于我的 appsettings.ts 文件

export interface AppConfiguration 
  apiUrl: string;


@Injectable()
export class AppSettings 
  static config: AppConfiguration;

  constructor(private http: HttpClient) 

  load(): Promise<any> 
    const appSettingsJson = environment.production ? 'assets/appsettings.json' : 'assets/appsettings.local.json';
    return new Promise<any>(((resolve, reject) => 
      this.http.get<AppConfiguration>(appSettingsJson)
        .toPromise()
        .then(result => 
          AppSettings.config = result;
          resolve();
        ).catch(reason => 
          reject(`unable to load settings file $appSettingsJson due to $JSON.stringify(reason)`);
      );
    ));
  

在我的 angular.json 文件中

"assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ]

还有下面的 web.config 文件

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="REQUEST_FILENAME" matchType="IsFile" negate="true" />
            <add input="REQUEST_FILENAME" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

我的 src/assets/appsettings.json 文件 atm 中有一个设置

  "apiUrl": "https://localhost:5001/api/"

当使用 ng serve 在本地运行甚至使用 ng build 部署到本地 IIS 时，此设置完全可以正常工作。我在 app.component.ts 和 app.component.html 中使用加载的设置来验证它是否正确加载。但是当我将应用程序部署到 azure 时，出现 404 错误。

ERROR 由于无法加载设置文件 assets/appsettings.local.json 到 "headers":"normalizedNames":,"lazyUpdate":null,"status":404,"statusText":"不是 找到","url":"https://mydomain/assets/appsettings.local.json","ok":false,"name":"HttpErrorResponse","message":"Http https://mydomain/assets/appsettings.local.json 的失败响应： 404 Not Found","error":"您要查找的资源已被 已删除、更改名称或暂时不可用。"

我已尝试将单个 appsettings.json 文件显式添加到 angular.json 中的资产数组中，并且还尝试了使用和不使用 web.config 文件。如果我只将一个基本的 Angular 应用程序部署到 azure（即没有额外的代码来加载 appsettings.json 文件）它可以工作（即使没有 web.config 文件）。我对 Angular（以及一般的 Web 开发）还很陌生，并且已经在所有可能的地方搜索了解决方案，但到目前为止还没有解决它。

【问题讨论】：

您是否验证了 appsettings.local.json 位于 wwwroot/assets/appsettings.local.json 中？另外请尝试在您的 web.config 中添加 <staticContent><mimeMap fileExtension=".json" mimeType="application/json" /></staticContent> <rewrite> 标签之前。

<staticContent><mimeMap fileExtension=".json" mimeType="application/json" /></staticContent> 成功了。谢谢

【参考方案1】：

根据@Martin Brandl 的评论，将以下内容添加到我的 web.config 文件中就可以了。谢谢。

<staticContent><mimeMap fileExtension=".json" mimeType="application/json" /></staticContent>