Angular 应用程序能够访问 Microsoft Azure 中资产文件夹下的 json 文件

Question

目前我有一个 Angular 9 应用程序，它能够访问位于 assets 文件夹下的 config.json 文件。我有负责从该文件读取的配置服务。当我在本地运行时，这没有问题。文件路径是/dist/assets/config.json。

但是，当我在 Azure 上将此应用程序部署为 Azure 应用程序服务（Windows 操作系统）时，即使我可以清楚地看到该文件位于 assets 文件夹下，该应用程序也无法找到此 config.json 文件。以下是每个文件的相关代码。当配置服务尝试获取文件 config.json 并显示错误消息时，代码会失败

Error occured while grabbing config files
config.service.ts:65 TypeError: You provided 'undefined' where a stream was expected. You can provide 
an Observable, Promise, Array, or Iterable.
at subscribeTo (subscribeTo.js:27)
at subscribeToResult (subscribeToResult.js:11)
at MergeMapSubscriber._innerSub (mergeMap.js:59)
at MergeMapSubscriber._tryNext (mergeMap.js:53)
at MergeMapSubscriber._next (mergeMap.js:36)
at MergeMapSubscriber.next (Subscriber.js:49)
at Observable._subscribe (subscribeToArray.js:3)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at MergeMapOperator.call (mergeMap.js:21)

appmodule.ts

 function configFactory(configService: ConfigService) {
    return () => configService.loadConfig();
 }     

 providers: [
{
  provide: APP_INITIALIZER,
  deps: [ConfigService],
  multi: true,
  useFactory: configFactory
},

配置服务.ts

 loadConfig() {
    return this.http.get<Config>("assets/config.json").subscribe(x=>{
        console.log("Successfully grabbed config files");
        this.config=x;
    },error=>{
        console.log("Error in grabbing config files");
        console.log(error);
    });
}

web.config

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
 <system.webServer>
    <staticContent>
    <!-- this is so that app can find json file when deployed in azure -->
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
 </system.webServer>

angular.json

          "assets": [
          "src/favicon.ico",
          "src/assets",
          "src/web.config"
        ],

我也提到了这个链接Angular app unable to find asset files on Azure，但那里提出的解决方案在我的情况下不起作用。我还在 tsconfig.app.json 文件中设置了 "allowSyntheticDefaultImports": true 。

Answer 1

ng build --prod --base-href /unrc-willis-web/

或者试试

ng build --prod --base-href "./"

拦截器也有问题。拦截器被用于非必需调用