如何在Angular中添加公共静态对象（css，js，供应商）并用作全局CSS，js

Question

我的团队希望将旧项目迁移到angular。我们喜欢angular 6中的组件和aot。但是，问题是我们的项目很复杂，我们不想按照angular的作用域重写css（css插件的js），这真的很难。这是结构文件夹

https://i.imgur.com/BlO4mEy.png

（插件的使用结合了js和css）

问：如何在Angular中添加公用文件夹用作全局CSS，JS？我们只是重组html并深入研究组件。

Answer 1

在资产，样式和脚本部分中添加angular.json的路径：

"assets": [
    "src/favicon.ico",
    "public/assets"
 ],
 "styles": [
    "public/styles.css"
 ],
 "scripts": [
    "public/script.js"
 ]

Answer 2

您可以使用glob模式执行此操作

默认情况下，src / assets /文件夹和src / favicon.ico被复制。

"assets": [
  "src/assets",
  "src/favicon.ico"
]

您还可以通过使用对象作为配置来进一步配置要复制的资产。

下面的数组与默认数组相同：

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

• glob是使用输入作为基本目录的node-glob。
• 输入相对于工作空间根目录。
• ignore是要从复制中忽略的全局列表。
• 输出相对于outDir（默认为dist / project-name）。

可以找到详细信息here