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

我正在尝试在azure应用程序服务平台（Windows机器）上部署Angular 6应用程序。应用程序本身只是一个新的角度应用程序（从 ng new appname 生成的基本代码）。我在本教程之后添加了一些次要代码，以便使用配置文件并利用 vsts 发布管道中的变量替换 -使用 vsts 管理 Angular 应用程序的设置 https://blog.bennymichielsen.be/2017/07/27/managing-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/"
}

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

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

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

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

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