脚本应该放入 angular.json 还是放入 index.html？

Question

使用 Angular，您有两个选项来加载脚本（js 和 css）：

1. 在index.html：<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
2. 在angular.json："styles": ["node_modules/font-awesome/css/font-awesome.css"]

每个选项的优势是什么？据我了解，其中的内容angular.json捆绑在一起，而链接的脚本index.html则是动态加载的。所以它归结为讨论是使用预捆绑脚本还是从 CDN 加载它们更好？或者将脚本放入angular.json例如组织性质中是否还有其他好处？出于某种原因它“更干净”吗？

Answer 1

基本上这是由 Angular 团队有意设计的。简而言之，是的，您可以使用任何一种，并且对于更简单的项目，您不会看到任何区别。但两者之间几乎没有区别。

• 如果您将样式/脚本文件添加到项目的全局上下文中，则angular.json在构建时将其添加到项目的全局上下文中的一组样式/脚本文件也将包含在构建包中，就像您在其中定义的文件/CDNindex.html将单独加载一样。

• 根据我的理解，通过索引文件加载的资产不会被复制到包中，而是会显示在网络选项卡中。

• 通过angular.json文件定义的资产将具有更多功能，例如 -

  1. glob：使用输入作为基本目录的节点全局。
  2. 输入：相对于工作区根的路径。
  3. 输出：相对于 outDir 的路径（默认为 dist/project-name）。由于安全隐患，CLI 永远不会在项目输出路径之外写入文件。
  4. 忽略：要排除的 glob 列表。

例如 -

{ "glob": "**/*", "input": "src/assets/", "output": "/assets/" },

或者

{ "input": "src/external-module/styles.scss", "inject": false, "bundleName": "external-module" }

有关更多信息，我强烈建议您阅读此内容-

• https://angular.io/guide/workspace-config