天藍色應用服務上的角度應用 - 從資源文件夾加載配置文件時出現404錯誤

Question

我試圖在azure app服務平台（windows機器）上部署一個角度6應用程序。 該應用程序本身只是一個新的角度應用程序（從新的appname生成的基本代碼）。 我在本教程后面添加了一些次要代碼，以便使用配置文件並在vsts發布管道中利用變量替換 - 管理帶有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服務本地運行或甚至使用ng build部署到本地IIS時，此設置完全正常。 我使用app.component.ts和app.component.html中加載的設置來驗證它是否正確加載。 但是，當我將應用程序部署到azure時，我收到404錯誤。

由於{“headers”：{“normalizedNames”：{}，“lazyUpdate”：null}，“status”：404，“statusText”：“Not Found”，ERROR無法加載設置文件assets / appsettings.local.json， “url”：“ https：//mydomain/assets/appsettings.local.json ”，“ok”：false，“name”：“HttpErrorResponse”，“message”：“ https：// mydomain / assets的 Http失敗響應/appsettings.local.json:404 Not Found“，”error“：”您要查找的資源已被刪除，名稱已更改或暫時不可用。“}

我已經嘗試將單獨的appsettings.json文件顯式添加到angular.json中的assets數組中，並嘗試使用和不使用web.config文件。 如果我只將一個基本的角度應用程序部署到azure（即沒有附加代碼來加載appsettings.json文件），它就可以工作（即使沒有web.config文件）。 我對角度（以及一般的網絡開發）都是新手，並且我已經到處尋找解決方案，但到目前為止還沒有任何修復。

Answer 1

根據@Martin Brandl評論將以下內容添加到我的web.config文件中。 謝謝。

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