如何将自定义css和js添加到angular 4

Posted 2023-03-07

【中文标题】如何将自定义css和js添加到angular 4

【英文标题】：How to add custom css and js to angular 4

【发布时间】：2017-10-29 19:05:32

【问题描述】：

在 Angular 2 中，我可以像这样将它们添加到 index.html 中：

<link rel="stylesheet" href="css/mycss.css">

但在 Angular 4 中，它必须添加到样式和脚本数组部分的 angular-cli.json 文件中。

在我的情况下，它们似乎根本没有加载。没有错误，但是当我在浏览器中查看应用程序时，我知道样式没有加载。 当我将样式和 js 添加到 index.html 文件时，它也没有加载，我在控制台中得到 404。

我该如何解决这个问题？以下是我的 Angular cli 版本： @角/cli：1.0.2 节点：6.9.2

【问题讨论】：

将 css 文件添加到 styles 数组后是否重新启动服务器？尝试破坏您的服务器并重新运行ng serve

你在 angular-cli.json 中配置了什么？

您仍然可以将它们作为链接标签。 Angular-cli 创建一个assets 文件夹，将它们放入并在您的 index.html 文件中引用它们（在src="assets/yourPath.css" 下）

【参考方案1】：

如果您使用的是 angular cli，请转到您的 .angular-cli.json，然后您可以获得 "styles":[ ] 以及 "scripts":[ ]强> 在这些里面你可以添加你的css文件和js文件

 "styles": [
            yourfirst-css-file , //comma (,)is important
            your-second-css-file
          ],

例如：-

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

和404错误意味着找不到文件。尝试附加完整的“url”文件夹（src）。