2

I'm building an Angular 2 app which I just upgraded to Net Core RC2. Prior to the upgrade, my webpage would display just fine, but now I am getting errors in my Chrome Dev Tools console:

    Failed to load resource: the server responded with a status of 404 (Not Found): 
http://localhost:5000/lib/bootstrap/dist/js/bootstrap.min.js

    Failed to load resource: the server responded with a status of 404 (Not Found): 
http://localhost:5000/lib/bootstrap/dist/css/bootstrap/bootstrap.min.css

I have bootstrap in my package.json file with version 3.3.6. I installed it with an npm install command. It installed properly in my Visual Studio project. The files are located at:

project -> node_modules -> bootstrap -> dist -> js -> boostrap.min.js

and

project -> node_modules -> bootstrap -> dist -> css -> boostrap.min.css

My gulpfile has this section:

var config = {
libBase: 'node_modules',
lib: [
    require.resolve('bootstrap/dist/css/bootstrap.min.css'),
    require.resolve('bootstrap/dist/js/bootstrap.min.js'),
    path.dirname(require.resolve('bootstrap/dist/fonts/glyphicons-halflings-regular.woff')) + '/**',
    require.resolve('jquery/dist/jquery.min.js'),
    require.resolve('chart.js/dist/Chart.bundle.min.js')
]

};

I'm also seeing a reference to bootstrap.min.js in a _Layout.cshtml file:

<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Homepage WebDev</title>
    <base href="/" />

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="~/lib/chart.js/dist/Chart.bundle.min.js"></script>
</body>
</html>

I'm new to web development so I'm not completely sure what's happening. Could someone point me in the right direction?

Roka545
  • 3,404
  • 20
  • 62
  • 106
  • if you put these urls in the address bar, you can see the files or gives you an 404? – node_modules Jun 28 '16 at 16:10
  • I don't get any errors but I don't see the files either (they're just black webpages). I only get errors when I navigate to http://localhost:5000. Other files like my main.bundle.js do show up however. – Roka545 Jun 28 '16 at 16:13
  • 1
    Maybe you could take a look here: http://stackoverflow.com/questions/17775944/node-js-keep-getting-failed-to-load-resource-error-message I hope this is a helpful article/question – node_modules Jun 28 '16 at 16:20
  • It seems like all files that are located within the 'lib' folder cannot be found. – Roka545 Jun 28 '16 at 16:20
  • This is actually happening to me the first time the map loads. Any idea on why this would be. I have bootstrap included in the "head" of my index file and google maps in a script tag just before the closing tag – Ryan Hamblin Feb 09 '17 at 19:03
  • @RyanHamblin For me the problem was that a 'lib' folder containing the necessary files/resources wasn't being generated. I had a webpack.config.js file that contained a script command that auto-generated the 'lib' folder. I used a command prompt to run the command and generate the folder - after that it worked for me. – Roka545 Feb 09 '17 at 22:44

1 Answers1

4

Looks like the path you gave doesn't have any bootstrap files in them. 

href="~/lib/bootstrap/dist/css/bootstrap.min.css"

Make sure the files exist over there , else point the files to the correct path, which should be in your case 

href="~/node_modules/bootstrap/dist/css/bootstrap.min.css"
Lokesh Pandey
  • 1,739
  • 23
  • 50
Abhishek
  • 102
  • 5
  • 1
    Thanks for the reply. Turns out there was a custom command in my webpack.config.js file that ran a script to auto-generated the 'lib' folder. – Roka545 Jun 28 '16 at 18:07