ng如何配置css,js路径

在Angular中, 我们通常会使用一些外部的CSS和JavaScript文件来为我们的应用程序添加样式和功能。在这种情况下，我们需要配置Angular来确保它能够正确找到这些文件。在本文中，我们将详细介绍如何在Angular应用程序中配置CSS和JavaScript文件的路径。

配置CSS文件路径

在Angular中，我们可以使用angular.json文件来配置应用程序的样式文件路径。在项目根目录下找到angular.json文件，打开它并找到styles数组。在styles数组中，我们可以添加外部CSS文件的路径，Angular会自动引入这些文件。

例如，我们有一个外部的CSS文件styles.css放在src目录下的assets文件夹中，我们可以像下面这样配置angular.json文件：

"styles": [
  "src/styles.css",
  "src/assets/styles.css"
]

在上面的配置中，我们将src/assets/styles.css文件添加到了应用程序的样式文件路径中。当我们运行应用程序时，Angular将会自动引入这个外部的CSS文件。

配置JavaScript文件路径

对于JavaScript文件，我们可以使用angular.json文件中的scripts数组来配置。同样，在项目根目录下找到angular.json文件，打开它并找到scripts数组。在scripts数组中，我们可以添加外部JavaScript文件的路径，Angular会自动引入这些文件。

例如，我们有一个外部的JavaScript文件app.js放在src目录下的assets文件夹中，我们可以像下面这样配置angular.json文件：

"scripts": [
  "src/app.js",
  "src/assets/app.js"
]

在上面的配置中，我们将src/assets/app.js文件添加到了应用程序的JavaScript文件路径中。当我们运行应用程序时，Angular会自动引入这个外部的JavaScript文件。

示例代码

为了演示如何配置CSS和JavaScript文件的路径，我们可以创建一个简单的Angular应用程序，并添加一个外部的CSS文件和一个外部的JavaScript文件。

首先，创建一个新的Angular应用程序：

ng new my-app

切换到应用程序目录并安装Bootstrap和jQuery:

cd my-app
npm install bootstrap jquery

创建一个外部的CSS文件styles.css在src目录下的assets文件夹中，添加一些样式：

/* styles.css */
body {
  font-family: Arial, sans-serif;
}

创建一个外部的JavaScript文件app.js在src目录下的assets文件夹中，添加一些JavaScript代码：

// app.js
$(document).ready(function() {
  console.log("Hello, world!");
});

配置angular.json文件中的styles和scripts数组：

"styles": [
  "src/styles.css",
  "src/assets/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "src/app.js",
  "src/assets/app.js"
]