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

Posted 2023-03-13

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

【英文标题】：Angular app being able to access json file under assets folder in Microsoft Azure

【发布时间】：2020-09-11 21:06:50

【问题描述】：

目前我有一个 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 。

【问题讨论】：

你上面粘贴的错误没有出现在本地？

@AakashGarg 它没有给出任何错误。它可以毫无问题地访问该文件。

你的项目可以从assets文件夹中加载图片吗？

为访问该 json 而形成的 url 是否正确？你检查网络标签？

你的天蓝色的项目名称是什么？

【参考方案1】：

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

或者试试

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

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

【讨论】：

构建失败，因为它不喜欢第二个参数。我认为我们需要找出以某种方式找到该位置的相对路径。

是的，然后从中删除 --prod。可能是您的代码不兼容。参考devblogs.microsoft.com/premier-developer/…

发生未处理的异常：项目“./”不支持“构建”目标。

请注意我正在使用 AzureDevops 构建并且代码存储库在 Git 中

您可以尝试直接在浏览器中从 azure url 访问您的 json 吗？