Question

我的文件夹结构如下图所示

root
 |- angular_app
 |- middleware_app (holds external scripts loaded into angular)
 |- assets
      |- images
      |- fonts
      |- ...

问题

我正在通过.angular-cli.json脚本数组加载脚本。除了一个小细节，它们正在加载并运行良好。这些脚本正在使用Assets文件夹中的图像，因此每当它们尝试获取该图像时，由于该图像的路径不再正确，我会在控制台中看到404。

脚本正在尝试通过相对路径访问图像，例如：

const ASSET_IMAGE_1_URL = '/images/asset_image_1.svg'

由于其他应用程序对脚本的依赖性，上述语法必须保持不变。

解决方案？

如果我可以像使用脚本一样将这些外部资源加载到我的角度应用程序中，并维护该文件夹结构，那就太好了。如果可以做到，请有人指导我。谢谢！

附注

问：为什么不只是将外部资产添加到您的角度应用程序内的资产文件夹中？

A。其他应用程序依赖于那些外部资产以及脚本。这意味着我无法在我的Angle Assets文件夹中创建这些资产的本地副本，也无法在外部脚本中更新该资产的路径。

Answer 1

您可以像使用angular.json文件中的node glob加载脚本一样，将它们加载到您的角度应用程序中。在angular.json中，将您的assets修改为如下形式（保留所有现有资产，例如默认图标）：

    "assets": [
      { "glob": "**/*", "input": "../assets/images", "output": "/images/" }
    ]

在构建期间，这会将../assets/images复制到您的相对/images/路径。有关详细信息，请参见this angular CLI story。