[英]How to add bootstrap and JQuery reference in the index page without Angular CLI
I am using VS2015 and angular 2 in my application. 我在应用程序中使用VS2015和angular 2。 Created application from angular quick start solution, For using bootstrap css, I downloaded the bootstrap and jquery library from the nuget. 从角度快速入门解决方案创建了应用程序,对于使用bootstrap css,我从nuget下载了bootstrap和jquery库。 And I added these reference by dragged file from the Content and scripts folder. 我通过从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>
While run the application it shows below errors 在运行应用程序时,它显示以下错误
http://localhost:2123/Content/bootstrap.css net::ERR_ABORTED http://localhost:2123/scripts/jquery-3.2.1.min.js net::ERR_ABORTED http://localhost:2123/scripts/bootstrap.min.js 404 (Not Found) http:// localhost:2123 / Content / bootstrap.css net :: ERR_ABORTED http:// localhost:2123 / scripts / jquery-3.2.1.min.js net :: ERR_ABORTED http:// localhost:2123 / scripts / bootstrap.min.js 404(未找到)
I tried the below 我尝试了以下
href="~/Content/ , href="./Content/ , href="Content/ Etc.
But still it is not loaded. 但是仍然没有加载。 How can add these files in to the Index page? 如何将这些文件添加到“索引”页面? I am new to angular2 please suggest me one solution. 我是angular2的新手,请为我建议一种解决方案。
Here the solution build from angular quick start file, there is two way to add bootstrap in to the solution. 在此,解决方案是从角度快速启动文件构建的,有两种方法可以将引导程序添加到解决方案中。
Using Node.js command prompt. 使用Node.js命令提示符。
Using Visual Studio NuGet package manager 使用Visual Studio NuGet程序包管理器
While adding bootstrap using nuget and we dragged the file in to the index.html file its does not loaded in to the web browser. 使用nuget添加引导程序时,我们将文件拖入了index.html文件中,但该文件没有加载到Web浏览器中。 We need to provide the path of the folder in to the bs-config-json file. 我们需要在bs-config-json文件中提供文件夹的路径。 This configuration is used by the lite-server. lite服务器使用此配置。
Lite-server is a simple customized wrapper around BrowserSync to make it easy to serve SPAs. Lite-server是围绕BrowserSync的简单自定义包装,可轻松提供SPA。 lite-server uses BrowserSync, and allows for configuration overrides via a local bs-config.json or bs-config.js file in your project. lite-server使用BrowserSync,并允许通过项目中的本地bs-config.json或bs-config.js文件进行配置覆盖。 More info . 更多信息 。 So we need to provide the folder path into the bs-config-json for the file references. 因此,我们需要将bs-config-json的文件夹路径提供给文件引用。
{
"port" : 2123,
"server": {
"baseDir": "src",
"routes": {
"/node_modules": "node_modules",
"/Scripts": "Scripts",
"/Content": "Content"
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.