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.

You can add assets folder and add all file to assets and then load in HTML like this — bipin patel, Dec 13 '17 at 13:45
Possible duplicate of [Angular 4: How to include Bootstrap?](https://stackoverflow.com/questions/43557321/angular-4-how-to-include-bootstrap) — stojevskimilan, Dec 13 '17 at 14:12

score 8 · Answer 1 · answered Dec 13 '17 at 13:50

8

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.

answered Dec 13 '17 at 13:50

Dipak Delvadiya

2,112
2
19
33

I am using VS2015, not CLI, there is no angular.cli.json file – Sanjeev S Dec 13 '17 at 13:59
You can add directly in your index.html page – Dipak Delvadiya Dec 13 '17 at 14:03
I tried but it shows the /Content/bootstrap.css net::ERR_ABORTED error – Sanjeev S Dec 13 '17 at 14:05
1

@SanjeevS Have you added bootstrap.css file into Content folder? – Karan Patel Dec 25 '17 at 10:53

score 0 · Answer 2 · answered Dec 13 '17 at 13:45

0

For jquery:

How to use jquery with angular 2

For bootstrap:

How to add bootstrap to angular 2

answered Dec 13 '17 at 13:45

Barr J

10,636
1
28
46

score 0 · Accepted Answer · answered Dec 14 '17 at 09:31

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.
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"
  }
 }
}

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

3 Answers3