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
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 :
But I don’t understand why it’s bloking the request, since I’ve specified
type="text/css" when referencing the stylesheet.