如何在没有 Angular CLI 的情况下在索引页面中添加引导程序和 JQuery 引用答案

【问题标题】：How to add bootstrap and JQuery reference in the index page without Angular CLI如何在没有 Angular CLI 的情况下在索引页面中添加引导程序和 JQuery 引用
【发布时间】：2018-03-21 11:56:57
【问题描述】：

我在我的应用程序中使用 VS2015 和 angular 2。从角度快速启动解决方案创建应用程序，为了使用引导 css，我从 nuget 下载了引导和 jquery 库。我通过从 Content and scripts 文件夹中拖动文件添加了这些引用。

<link href="../Content/bootstrap.css" rel="stylesheet" />
<script src="../scripts/jquery-3.2.1.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>

在运行应用程序时，它会显示以下错误

http://localhost:2123/Content/bootstrap.cssnet::ERR_ABORTED http://localhost:2123/scripts/jquery-3.2.1.min.jsnet::ERR_ABORTED http://localhost:2123/scripts/bootstrap.min.js 404（未找到）

我尝试了以下

href="~/Content/ , href="./Content/ ,  href="Content/ Etc.

但它仍然没有加载。如何将这些文件添加到索引页面？我是 angular2 的新手，请给我一个解决方案。

【问题讨论】：

您可以添加资产文件夹并将所有文件添加到资产中，然后像这样在 HTML 中加载
Angular 4: How to include Bootstrap?的可能重复

标签： jquery twitter-bootstrap angular visual-studio

【解决方案1】：

您可以将所需的文件放在解决方案的 ASSETS 文件夹中。添加这些文件后，您必须将这些文件的引用添加到 angular.cli.json 文件中。

更多详情，请参考以下快照。

【讨论】：

我用的是VS2015，不是CLI，没有angular.cli.json文件
你可以直接在你的index.html页面中添加
我试过了，但它显示 /Content/bootstrap.css net::ERR_ABORTED 错误
@SanjeevS 您是否将 bootstrap.css 文件添加到 Content 文件夹中？

【解决方案2】：

对于 jquery：

How to use jquery with angular 2

对于引导程序：

How to add bootstrap to angular 2

【讨论】：

【解决方案3】：

这里的解决方案是从角度快速启动文件构建的，有两种方法可以将引导程序添加到解决方案中。

使用 Node.js 命令提示符。
使用 Visual Studio NuGet 包管理器

在使用 nuget 添加引导程序时，我们将文件拖到 index.html 文件中，但它不会加载到 Web 浏览器中。我们需要在 bs-config-json 文件中提供文件夹的路径。此配置由 lite-server 使用。

Lite-server 是一个简单的 BrowserSync 自定义包装器，可以轻松地为 SPA 提供服务。 lite-server 使用 BrowserSync，并允许通过项目中的本地 bs-config.json 或 bs-config.js 文件进行配置覆盖。 More info。所以我们需要为文件引用提供到 bs-config-json 的文件夹路径。

{
"port" :  2123,
"server": {
"baseDir": "src",
"routes": {
  "/node_modules": "node_modules",
  "/Scripts": "Scripts",
  "/Content": "Content"
  }
 }
}

【讨论】：