时间戳

首页 > 解决方案 > 将外部静态内容加载到 Angular 应用程序中

angular - 将外部静态内容加载到 Angular 应用程序中

问题描述

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

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

问题

我正在通过 .angular-cli.json 脚本数组加载脚本。除了一个小细节外，它们正在加载和运行良好。这些脚本使用资产文件夹中的图像，因此每当他们尝试抓取该图像时，我的控制台中都会出现 404，因为该图像的路径不再正确。

脚本试图通过相对路径访问图像，如下所示：

const ASSET_IMAGE_1_URL = '/images/asset_image_1.svg'

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

解决方案？

如果我可以像处理脚本一样将这些外部资产加载到我的 Angular 应用程序中，并保持该文件夹结构，那就太棒了。如果可以做到这一点，有人可以指导我完成它。谢谢！

旁注

问：为什么不直接将外部资产添加到 Angular 应用程序内的资产文件夹中？

A. 其他应用程序依赖于这些外部资产以及脚本。这意味着我无法在我的角度资产文件夹中创建这些资产的本地副本并更新外部脚本中所述资产的路径。

标签： angularangular-cliassets

解决方案

您可以将它们加载到您的 Angular 应用程序中，就像您使用文件中的节点 glob 加载脚本一样angular.json。在angular.json修改您assets的外观时（保留任何现有资产，如默认网站图标）：

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

在构建期间，它将复制../assets/images到您的相对/images/路径。有关详细信息，请参阅这个角度 CLI 故事。

推荐阅读