So I'm making an app with nodejs, express, and angularjs. I was following a couple of tutorials and decided to integrate into my project.
I have a index.html and there there is a button to create a multi-step form using Angularjs and UI-route. Form link
Then I found a youtube playlist for MEAN Stack, server works fine. As everyone I routed /public also.
app.use(express.static(__dirname + '/public'));
The problem starts here,
Button in the index.html it supposly goes to /app/views/forms/main-form.html to create the ui-view.
<div class="btn">
<form action="/app/views/forms/main-form.html">
<input type="submit" value="Get Started" />
</form>
</div>
Before I integrated express into my project, the path was working fine. Somehow, I think something to do with Express, when I click I get the following 404 error.
Refused to apply style from 'http://localhost:8080/app/views/forms/assets/css/form.css'
because its MIME type ('text/html') is not a supported stylesheet MIME type, and
strict MIME checking is enabled.
My problem is not about being a MIME type. The original path to CSS is /assets/css/form.css, but somehow it takes the form-main.html path at the beginning which is /app/views/forms also.
It is the same with formController as well. The controller normally is in the path of /app/controllers/formCtrl.js but the error goes like /app/views/forms/app/controllers/formCtrl.js
I would like to know how it takes two directories and combines them and why?
Edit
After using the CDN of Angularjs instead of local lib, it can get the link directly. But combining two directories is still continue to happening.
Related
I'm learning about database doing a walk through to build a project. I don't have full knowledge about how the code works and I ended up having the following issue:
The project has 3 pages until now, and all use one Bulma file for the stylesheet. It is working for the first full pages, but on the third one the CSS is not loading with the page.
It appoints the following error on the browser console:
Refused to apply style from
'http://localhost:3000/checklists/stylesheets/bulma.min.css' because
its MIME type ('text/html') is not a supported stylesheet MIME type,
and strict MIME checking is enabled.
Going straight to the directory it gives:
Cannot GET /checklists/stylesheets/bulma.min.css
On the network tab it shows that X-Content-Type-Options = nosniff, and the Content-Type = text/html when it should be text/css.
Also, according to this site, it seems that the CSS file is not being found for some reason.
I've checked the link and it seems to be right and it also work properly on the other pages, and from what I understand about the subject, the rest of the code should be working as well.
<link rel="stylesheet" type="text/css" href="stylesheets/bulma.min.css" />
I checked the code and changed some stuff trying to solve, but nothing worked and I've reverted the changes.
Could someone help me to solve this issue?
You can check the files here.
For the the project it is being used:
MongoDB
Mongoose
Express
Path
EJS
Thanks in advance.
I have deployed a React + NodeJS app in Heroku and the deployment went well and worked for a few hours. However, after a cache deletion, it now refuses to load the page. The errors are the following ones:
Refused to apply style from 'https://flix-reloaded.herokuapp.com/src.78399e21.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
and
GET https://flix-reloaded.herokuapp.com/src.78399e21.js net::ERR_ABORTED 404 (Not Found)
The first one, the MIME error refers to a minified file produced by a Parcel build. It is called in a index.html file that lives inside the dist folder. This is the line calling it:
<link rel="stylesheet" href="/src.78399e21.css">
Its twin .js file is also called within index.html:
<script src="/src.78399e21.js"></script>
Problem 1): I don' know what to do to make the CSS file accepted. within it, there are some comments imported from the SCSS original files related to each component. I tried both to remove the comments and add the type of the file as CSS but it hasn't worked. It should be a subtle detail, but I don't know what else to attempt.
Problem 2: The JS file that Heroku is not finding it is at the same folder of the index.html. However, the routing of the app has been defined to have client (Router basename="/client") as root (https://flix-reloaded.herokuapp.com/client). If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
I tried to run another Parcel build, commiting changes, clean caches, but nothing worked. Can anyone provide me some help? I'll be happy to provide further details if necessary.
The index.html file code that lives inside the dist folder (where the production files live):
<html>
<head>
<title>myFlix</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/src.78399e21.css"></head>
<body>
<div class="app-container"></div>
<script src="/src.78399e21.js"></script>
</body>
</html>
Thanks in advance
If I manually type the URL with client (https://flix-reloaded.herokuapp.com/client/src.78399e21.css), the file is found, but changing the path to the file in the index.html (you can see below) solves the 404 problem, but brings another one (says that a "<" token is unexpected within a system js file that is out of bounds).
This is because you need to make the same /client/ fix to the <script src="/src.78399e21.js"></script> line.
In both cases, you've got the wrong URL for your CSS/JS files, and as a result the CSS/JS parsers are trying (and failing) to process the resulting 404 page's HTML as CSS/JS.
I was wondering if its possible to call a localhost url hosted on a flask app from another flask app (also running on localhost but on a different port). I currently have a simple flask app that shows a single image inside its html. The code is the following:
<head>
</head>
<body>
<img src="{{url_for('static', filename='image1.png')}}" alt="Image 1" height="100" width="100" />
</body>
</html>
I run it on localhost:5001 and it runs absolutely fine. That is I see a single image inside the browser.
Once I get this running within a browser, I open a second app that references this url in the form:
<img src="http://localhost:5001/"/>
inside index.html. This app is then run on localhost:5000
However, the image inside the second app doesn't show, even though I can see the domain for the image running just fine when I load localhost:5001 inside the browser. I understand I could do this simply within one app if I just wanted to show the image (by having the image resources inside one app), but I need to do something like this to test the certificates for separate domains, each one hosting a different image.
I was wondering is something like this possible. If so, what would be the best way to approach it, and if the way I am doing is not correct?
Thanks!
<img src="http://localhost:5001/"/>
The above is invalid, because you're loading the root of that page which returns the HTML.
You ought to reference it as something like:
<img src='http://localhost:5001/static/image1.png' />
If this doesn't work then load up the working image again, and right click to view in a new tab, noting the correct URL and substitute it here.
One of the views (.cshtml file) of my ASP.NET MVC application is using A-Frame. I am trying to load a 3-D model using GLTF file inside the <a-scene> tag.
<body>
<a-scene>
<a-assets timeout="5000">
<a-asset-item id="tree" src="~/Assets/scene.gltf">
</a-assets>
<a-gltf-model src="#tree"></a-gltf-model>
</a-scene>
</body>
I have already tested the src path in the same page by putting a .png file and loading it in <img/>, it works. The problem is just with the .gltf file.
What is possibly wrong with the .gltf file in particular?
The URL doesn't seem like a valid URL. It seems like a Unix path. Host the GLTF somewhere the website can reach it (like the same directory) and fix the path. src="scene.gltf".
I am creating a node.js web application where I am using Yeoman angular scaffolding for client side.
I have an index.html which has all the javascript files included to load.
What i want to do is have a header file that will contain users name using model binding. These need to be included in all pages.
How can i achieve this?
You need to use ng-include directive to include partials.
Your index page would be structure something like
<body>
<div id='header' ng-include='/partials/header'/>
<div ng-view />
</body>