I have been adding the following files in my cshtml page.
<script src="http://code.highcharts.com/maps/highmaps.js" )"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="~/Content/js/balochistan.geojson"></script>
And the code for higmaps is present on the same page with script tag. Everything is working fine but hte map is not displaying and giving error for geojson file not being loaded.
http://localhost:9090/Content/js/balochistan.geojson net::ERR_ABORTED 404 (Not Found)
Can anyone please helpthat how a geojson file can be loaded properly and how to give static path to it correctly?
the file ends with .geojson can not be loaded like that - as script - because is a json file
Add this file is a set of json data - you need to loaded them on highcharts either with ajax load, either add them as variable at the beginning and connected to the chart.
Resolved:
The problem resolved by doing few steps like:
adding script tags in proper order.
secondly highmaps.js and highcharts.js file conflict with each other when used on the same page.
In order to resolve this issue you have to add
<script src="http://code.highcharts.com/highcharts-more.js"></script>
script tag in addition to highcharts.js and also replace the highmaps.js with:
<script src="//code.highcharts.com/maps/modules/map.js"></script>
like this:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//code.highcharts.com/maps/modules/map.js"></script>
This resolved my problem and map is showing now.
I am developing an Angular 4 app and I want to apply some global styles. Following the tutorial at the angular site, I've created a "styles.css" file in the root directory of my app, and I'm referring to that stylesheet in the index.html of my app:
<link rel="stylesheet" type="text/css" href="styles.css">
The angular app is successfully compiled:
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
[...]
webpack: Compiled successfully.
But when I visit http://localhost:4200 in a Chromium browser, the console shows an error at
GET http://localhost:4200/styles.css
In a Firefox browser, the error is a bit more explicit:
GET
http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms]
The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
Both files, index.html and styles.css are located in the root directory of my angular app.
I've tried to get more info about the problem :
nosniff
Blocks a request if the requested type is
"style" and the MIME type is not "text/css", or
"script" and the MIME type is not a JavaScript MIME type.
But I don't understand why it's bloking the request, since I've specified type="text/css" when referencing the stylesheet.
I just ran into the same issue. It appears to be a quirk of Express that can manifest itself for a few different reasons, judging by the number of hits from searching the web for "nodejs express css mime type".
Despite the type="text/css" attribute we put in our <link elements, Express is returning the CSS file as
Content-Type: "text/html; charset=utf-8"
whereas it really should be returning it as
Content-Type: "text/css"
For me, the quick and dirty workaround was to simply remove the rel= attribute, i.e., change
<link rel="stylesheet" type="text/css" href="styles.css">
to
<link type="text/css" href="styles.css">
Testing confirmed that the CSS file was downloaded and the styles did actually work, and that was good enough for my purposes.
I also removed rel = "stylesheet", and I no longer get the MIME type error, but the styles are not being loaded
Some answers suggested removing rel="stylesheet", that didn't work out for me however.
According to the expressjs documentation: https://expressjs.com/en/starter/static-files.html
use express.static function to serve static files such as CSS, JavaScript,etc...
app.use(express.static('public'))
and from there you should be able to load any file under the public directory
for example, if you have a style.css file inside the directory {PROJECT_PATH}/public/css/
http://localhost:3000/css/style.css will work.
In running into the same kind of issue for a full stack web application (in development), I simply solved the problem by correctly linking the css file to the page rendered. Removing the rel = stylesheet, as suggested above, prevents the error to show up in the browser but it does not load the styles that should be applied to the page. In short, it isn't a solution.
If you are using express-static you can use this as an example:
Server-side:
app.use(express.static(__dirname + "/public", {
index: false,
immutable: true,
cacheControl: true,
maxAge: "30d"
}));
Client-side:
<link type="text/css" rel="stylesheet" href="/main.css">
Just add a forward slash in front of the file you wish to link to the html page (if you are rendering html pages without using any template engines) and express-static will do the rest automatically for you.
Had a similar problem with a javascript file (as opposed to css) in an Angular app. In reality, the problem wasn't with the Mime type (as the outer error message indicated) but was ultimately a "404 Not Found" error.
In my case, putting the script file anywhere but in the "assets" folder resulted in the 404 and eventually the mime type error. The following tag worked for me in the head section of index.html:
<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>
The assets folder is a sibling of the Index.html file.
This is solved my problem:
app.use('/public', express.static(path.join(__dirname, "public")));
A simple hack is to add a forward slash / before the the path to the stylesheet used. For me it was href='css/style.css', changed it to href='/css/style.css'. Worked like a charm.
I also had this issue.
I moved the script file to a different location and now there is no error:
from <script src="./scripts/simple-keyboard/keyboard.index.min.js" type="text/html"></script>
to <script src="./scripts/keyboard.index.min.js" type="text/javascript"></script>
As noted by Davelli, the issue wasn't a file mismatch but an error not found. It's strange it returned the wrong error!
if this solutions does not help:
app.use(express.static('public'))//for server
<link rel="stylesheet" href="/index.css">//for styles
Then make sure that "public" folder exists in the root directory. This was my case.
I was facing the same problem. But I found out that it has to do with using the right directory for your style.css file. So I tried this line of code below and it worked perfectly.
<link rel="stylesheet" type="text/css" href="/app/scss/style.css">
In my case I just include "/" before "css/style.css"
<link rel="stylesheet" href="css/styles.css" />
to
<link rel="stylesheet" href="/css/styles.css" />
I also use express.static('public')
What seemed to work for me was changing
<script type="text/javascript" src="/lib/matrix.js"></script>
to
<script type="text/javascript" src="./lib/matrix.js"></script>
I ran into this problem as well. I was able to fix the problem with the tip from Kirankumar Gonti.
Use the following line:
app.use('/public', express.static(path.join(__dirname, "public")));
Make sure to set the const path.
You also want to make sure your css folder is nested inside a public folder.
I ran into this problem as well. I was able to fix the problem with the tip from Kirankumar Gonti.
I used the following line of code in my app.js file, I didn't have a public folder but had my style.css stored in a css folder:
app.use('/css', express.static(path.join(__dirname, "css")));
In my /css/style.css file I used:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
For anyone still having this error I was able to solve it by including "src/assets" in my angular.json file
"assets": ["src/favicon.ico", "src/assets", "src/upload.php"]
also the directory of your index.html should not be included in the assets. meaning you should not include "src" in "assets"
In my case I had jumbled up the code blocks below in reverse order so I was getting this error. If you have this issue, follow the below order and it might help
1.
app.use(express.static(path.join(__dirname, 'public')));
2.
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/index.html'));
});
3.
app.use('/api', cors(corsOptions), indexRouter);
This is what happened at me,
My site was archieved, so the css and js files are not available. After restore my webhost everything goes well.
So, please check are the URLs is correct or not.
I have just created some directories and tidied up my growing ASP.NET project but it has caused some issues that I can't solve. I have a directory in the root of the project called js and another one called Pages.
In Pages I have a file called MasterPage.master which is a master page. The Pages directory has Default.aspx and some subdirectories of other pages.
I have two main issues. In MasterPage.master I have code like this to reference javascript files:
<script src="js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
However none of my javascript can be found any more. I tried <script src="/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> and I tried <script src="~/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> but it still doesn't work.
The other issue is that I have a menu system written is CSS and that has some strange behaviour. When the page loads the menu works fine. If I navigate to /Pages/Trades/TradeInfo.aspx and then hover over that item the page path now says /Pages/Trades/Trades/TradeInfo.aspx
Why has the Trades directory been added twice?
Have you tried ResolveUrl?
It sure works for the script tags and your anchor tags.
<script src='<%=ResolveUrl("~/Scripts/jquery/ui/jquery-ui-1.8.11.custom.min.js") %>' type="text/javascript"></script>
Refer to my this question: Page not redirecting properly, URL rewriting (Asp.NET)
Which is resolved except one thing.
Though I have put the code to eliminate post back for .jpg and other file extension, JQuery at the web page is not working.
<script type="text/javascript" src="JS/jquery.js"></script>
I have written it like the above. I have tried to change the path like
<script type="text/javascript" src="~/JS/jquery.js"></script>
but no luck.
Any suggestion
Try this.
<script type="text/javascript" src= "<%=ResolveUrl("~/JS/jquery.js")%>" ></script>
you first check if the string contains /web/
if (app.Request.RawUrl.ToLower().Contains("/web/"))
and your .js file doesn't contain /web/
so either put the js file in the web folder, or check for the string to contain /js/ as well...
if (app.Request.RawUrl.ToLower().Contains("/web/") || if (app.Request.RawUrl.ToLower().Contains("/js/")))
I have an ASP.net master page. In this master, I have all my css and javascript files defined. I also have a few images and a few buttons and hyperlinks.
All the urls are all declared as relative ie "/scripts/ian.js"
Everything works fine if this site is the root website, but I need it to work in a virtual directory.
My problem is when I place this website in a virtual directory under a root site, all my links are pointing to the root site. so my links point to www.root.com/scripts/ian.js but it should be pointing to www.root.com/virtualDir/scripts/ian.js
I thought the Base Href tag in the header would help, but so far it does not seem to be helping in anyway. All the links are still pointing to the root website when i hover over them.
What I would like is a single setting either in IIS or the config file that I can set a root url and any image, script or link either on the master page or content page, would point to the right place.
Any suggestions or ideas are welcome.
Thanks
All the urls are all declared as
relative ie "/scripts/ian.js"
Those seem to be absolute URL's that you're using, rather than relative URL's, which is probably why the <base /> tag isn't having the desired effect:
This attribute specifies an absolute
URI that acts as the base URI for
resolving relative URIs.
-- from http://www.w3.org/TR/html401/struct/links.html#h-12.4
You could try removing the leading '/' from your URL's to see if that works?
Failing that, I tend to use ResolveClientUrl to get around issues like this, which you'd use in the same way as others have suggested using ResolveUrl:
<script type="text/javascript" src="<%= ResolveClientUrl("~/path/to/js") %>"></script>
...
<img src="<%= ResolveClientUrl("~/path/to/img") %>" alt="..." />
Hope this helps.
Most tags, including regular HTML tags like <link>, <img>, etc can use the ~/ as the application root path if the *'runat="server"' attribute is set.
eg.
<img src="~/images/test.png" runat="server" />
This makes tag a server tag and the tilde is replaced with the application root before the output is returned to the browser.
This doesn't work as expected for the <script> though. When 'runat="server' is set for the script tag, then the script is considered to be server-side javascript and execution is attempted.
To work around this you can either inject the javascript using one of the register client script methods. your you can use the <%= ResolveUrl('~')%> tag in your script tag.
This static method returns you full http path to root folder of your application (web site or virtual directory)
public static string GetAppRootUrl(bool endSlash)
{
string host = HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority);
string appRootUrl = HttpContext.Current.Request.ApplicationPath;
if (!appRootUrl.EndsWith("/")) //a virtual
{
appRootUrl += "/";
}
if (!endSlash)
{
appRootUrl = appRootUrl.Substring(0, appRootUrl.Length - 1);
}
return host + appRootUrl;
}
So, you can write in master page:
<script src="<%= Server.HtmlEncode(GetAppRootUrl(false)) %>/scripts/ian.js" language="javascript" type="text/javascript"></script>
Use tilde(~) in yout reference (i.e ~/scrips/ian.js)...see if it works
For links try Page.ResolveUrl in the .aspx page.
So I found this IIS weirdness last night:
<script src="/js/file.js"></script>
Will not work properly in a virtual application that's in a subdirectory of the main IIS site.
Instead, you MUST do it like this:
<script src="/js/file.js" type="text/javascript"></script>
Which is the standard way to do it, but if you're not looking for it, it can surprise you that that additional tag makes the relative path issues go away.