为什么 Angular 不能正确支持 / 中的文件？

Question

我是 Angular 2+ 的新手，我已经在使用 Angular 版本 4 开发一个应用程序，我使用 CLI 创建项目并提供服务。

我正在尝试将 manifest.json 添加到我的项目中，并且我还尝试添加一个网站图标，这是我的代码：

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="manifest" href="manifest.json">

我在 src/ 中添加了两个文件，这是 Angular 应用程序的根目录。当我在浏览器上打开应用程序时，favicon 未显示 (404) 并且也未找到清单 (404)。

当我将 favicon 放入另一个目录 (src/assets/icon/) 时，它按预期工作，但对于 manifest.json，它应该在根目录中.

Angular 所做的对我来说非常有线，当我在 Chrome 上按 Ctrl+U 浏览网页源代码时，当我单击 favicon.ico 或 manifest.json link 在 HTML 页面上，它显示 Angular.

的 index.html

为什么会这样？

如何在 src/ 中添加我的 manifest.json 和 favicon.ico 并访问它们？

Answer 1

您只需在项目根目录下的 .angular-cli.json 文件中定义资源。

在 apps[0].assets 中，您可以为 CLI 添加文件以包含在捆绑包中。只是 select src/ 目录的相对路径。 I've included one I have for a project of mine as reference。（第 10-14 行是你应该看的）

Answer 2

angular 12+ 的正确答案（可能从 angular 6+ 开始有效）

资产现在在项目下的 angular.json 中配置 -> YOUR_NAME -> 架构师 -> 构建 -> 选项 -> 资产和支持字符串或对象值。对象值允许您从资产文件夹添加文件，但将它们移动到根目录，这是 manifest.json.

等文件所必需的

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

glob：要 select 的文件（**/* -> 全部） inout：在哪个文件夹中查找文件输出：dist

应该将它们复制到哪个文件中

Why Angular does not correctly support files that are in /?