Question

我正在尝试在azure应用服务平台（Windows机器）上部署angular 6应用。该应用程序本身只是一个新的角度应用程序（由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中已加载的设置来验证其是否正确加载。但是，当我将应用程序部署到天蓝色时，会出现404错误。

由于无法加载设置文件asset / appsettings.local.json而导致的错误至 {“ headers”：{“ normalizedNames”：{}，“ lazyUpdate”：null}，“ status”：404，“ statusText”：“ Not 找到“，” url“：” https://mydomain/assets/appsettings.local.json“，” ok“：false，”名称“：” HttpErrorResponse“，”消息“：” Http https://mydomain/assets/appsettings.local.json的失败响应： 404 Not Found“，”错误“：”您正在寻找的资源已经删除，更名或暂时不可用。“}

我尝试将各个appsettings.json文件显式添加到我在angular.json中的资产数组中，并且尝试使用web.config文件和不使用web.config文件。如果我仅将基本的角度应用程序部署到Azure（即无需额外的代码来加载appsettings.json文件），它就可以工作（甚至没有web.config文件）。我对angular（和一般而言的Web开发）还很陌生，已经在我能找到的所有地方进行了搜索，但是到目前为止，还没有任何解决方案。

Answer 1

每个@Martin Brandl注释都将以下内容添加到我的web.config文件中。谢谢。

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

Azure App Service上的Angular App-从Assets文件夹加载配置文件时出现404错误

1 个答案: