天蓝色应用服务上的角度应用 - 从资源文件夹加载配置文件时出现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>