Angular 6 - 本地文件（js，css，img）添加到运行时未见的资产。如何一次引用所有文件？

Posted 2021-04-11

使用Angular 6和Angular CLI 6，我添加了一个包含许多文件的文件夹myfolder：

src/assets/myfolder

注意：我也尝试过：

src/myfolder

在运行时，文件找不到/工作，除非我在angular.json中单独指定它们：

"assets": [
                  "src/assets",
                  "src/favicon.ico"
              ],
    "scripts": [
                   "src/assets/myfolder/myfile1.js",
                   "src/assets/myfolder/myfile2.js",
                   "src/assets/myfolder/myfile3.js",
                   "src/assets/myfolder/mycss.css",
                   "src/assets/myfolder/myImage.img"
               ]

虽然这个工作，我的文件夹是一个CKEditor插件，并包含超过100个文件形式js，css到图像，这些都相互引用。似乎必须有一种方法来添加所有内容而无需单独引用每个文件？

答案

通配符应该足够了

assets: [
      "src/assets/*",
]

在代码中始终使用

src="assets/..."

另一答案

如果你使用你的html代码

例如：src="assets/myFolder/logo.png"

这应该够了

另一答案

将非javascript文件添加到“脚本”并不是Angular CLI的预期行为。相反，您可以将css文件添加到“styles”数组中，或者将它们直接导入src / styles.scss

对于图像，字体或任何其他资产，只要您通过绝对路径引用它们（从/开始），​​将它们保存到src / assets中应该是安全的。例如，在你的一个模板中你可能有类似<img src="/assets/myfolder/myImage.img"/>的东西，或者你的scss文件中你可以有.some-class { background-image: url(/assets/myfolder/myImage.img); }