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

Question

我正在尝试在 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 unable to load settings file assets/appsettings.local.json due to {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not Found","url":"https://mydomain/assets/appsettings.local.json","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://mydomain/assets/appsettings.local.json: 404 Not Found","error":"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."}

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

Answer 1

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

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

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

Angular app on azure app service - 404 errors when loading config file from assets folder

azure

node.js

http-status-code-404

azure-devops

angular