How to add bootstrap and JQuery reference in the index page without Angular CLI

Question

I am using VS2015 and angular 2 in my application. Created application from angular quick start solution, For using bootstrap css, I downloaded the bootstrap and jquery library from the nuget. And I added these reference by dragged file from the Content and scripts folder.

<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)

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.

Answer 1

You can place your required files in ASSETS folder of your solution. After adding these files, you have to add reference of those file into angular.cli.json file.

For more detail, Please refer the below snaps.

Answer 2

For jquery:

How to use jquery with angular 2

For bootstrap:

How to add bootstrap to angular 2

Answer 3

Here the solution build from angular quick start file, there is two way to add bootstrap in to the solution.

1. Using Node.js command prompt.

2. Using Visual Studio NuGet package manager

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. We need to provide the path of the folder in to the bs-config-json file. This configuration is used by the lite-server.

Lite-server is a simple customized wrapper around BrowserSync to make it easy to serve SPAs. lite-server uses BrowserSync, and allows for configuration overrides via a local bs-config.json or bs-config.js file in your project. More info . So we need to provide the folder path into the bs-config-json for the file references.

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