What causes index.html to be returned instead of app.css?

I deploy my Angular application using an express server.

var express = require('express');
var server = express();
server.use(express.static('./app'));
server.all('*', function(req, res) {
  res.sendFile('index.html', { root: './app' });
});
server.listen(8000);

The complete gulpfile.js can be found here.

Upon navigating to http://localhost:8000, my Angular app automatically redirects to http://localhost:8000/home, and the serving of app.css is successful (CSS is included in the response).

However, upon refreshing the page (http://localhost:8000/home), the response for app.css displays as index.html.

Could you help me understand why this is happening and suggest a solution?

Check out the live demo here

Answer №1

Make sure to utilize an absolute path.

<link rel="stylesheet" type="text/css" href="/app.css">

If not, the call to express for app.css from /home will result in home/app.css instead of /app.css.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am looking to create dynamic MySQL connections in Node.js, where the connections will vary based on the user accessing the server

I have developed an app that caters to different customers, such as customer_1 and customer_2. I have configured Sequelize in the following way: const Sequelize = require('sequelize'); const Op = Sequelize.Op; const fs = require('fs'); ...

Get Onsen UI 2 up and running without the need for Angular

Is it possible to install Onsen UI 2 without Angular? I have tried following various guides from , but when attempting the JavaScript method (> npm install onsenui) I consistently encounter a ReferenceError: angular is not defined. How can I properly ins ...

Error: The variable 'path' has not been declared in the context of Express

Whenever I click a link on the page, even though it renders properly, an error occurs. ReferenceError: path is not defined at app.get (/var/www/example.com/example-domain/server.js:106:19) at Layer.handle [as handle_request] (/var/www/example.com/example- ...

Acquire the xls data angular jax-rs document

I am using jax-ws on the server side, and angularjs on the client side. I am currently facing an issue with downloading an xls file sent from the server side. On the server side, I have the following code: @GET @Path("/exportemployeexls") ...

Using Pug, one can easily define variables within a loop to customize the template as needed

Is it possible to define variables within a loop in pug and reference them later? I sent a variable words from an express-js server to a pug template, where I iterated through the contents of the variable: each word, index in words - var spelling = ...

How can one easily retrieve the callback function arguments from outside the function?

Here is a snippet of my code: var jenkins = require('jenkins')('http://192.168.1.5:8080'); var job_name = undefined; jenkins.job.list(function doneGetting(err, list) { if (err) throw err; job_name = list[0].name; }); jenkins. ...

Is it possible to upload a file using Angular and ASP.NET Web API Core?

I am encountering an issue with CORS policy while making requests. It works fine when the content-type is set to 'application/json'. However, when I try to upload a file using content-type 'multipart/form-data', I receive an error: XML ...

What is the best way to execute a function every 10 seconds?

Is there a way to continuously call a function every 10 seconds? Currently, using $timeout and setTimeout only triggers the function dataTime once. I need it to repeat indefinitely. angular .module('sfcLeftSiteBar') .component('leftSiteBar ...

Completion of Gulp streams through the use of promises

I am currently working on reading a file, performing a promise-based transformation, and pushing the results through a stream. Below is an example of the code I have been using: const gulp = require('gulp') const gutil = require('gulp-util& ...

Can you identify the main principles at the heart of AngularJS framework?

Within the AngularJS framework, there is a wide range of directives available. However, some are regarded as core directives that stand out among the rest. Thank you. ...

Zip streaming is not functioning properly on the browser, although it is working fine on Postman

I have been working with a specific package to directly download a ZIP file in the browser. The frontend code I am using is as follows: await this.$axios .get( `/inspections/defects/download/${this.$route.params.uuid}`, { ...

I am interested in utilizing Selenium to interact with a hyperlink within an HTML table

I am currently using the code snippet below to fetch data from the HTML structure provided: //findTables(driver); WebElement content = driver.findElement(By.id("tblTaskForms")); List<WebElement> elements = content.findElements(By.className("form-nam ...

Automatically update and reload Express.js routes without the need to manually restart the server

I experimented with using express-livereload, but I found that it only reloaded view files. Do you think I should explore other tools, or is there a way to configure express-livereload to monitor my index.js file which hosts the server? I've come ac ...

Implement the use of NextAuth to save the session during registration by utilizing the email and password

When registering a user using email, password and username and storing in mongodb, I am looking to incorporate Next Auth to store sessions at the time of registration. My goal is to redirect the user in the same way during registration as they would experi ...

Utilizing Express for Angular serverside rendering: Best practices explained

I attempted to utilize Angular's Server Side Rendering and encountered difficulties with a very basic scenario. Challenges Challenge 1 Expected outcome : Using express to simplify the angular app by only returning a "welcome object" Actual outcome : ...

AngularJS enables the loading of directives dynamically, but sometimes encounters errors such as "Restricted URI access denied."

Presently, I am in the process of developing a small educational project using HTML5, CSS, JS and AngularJS. Hiccup: Loading an AngularJS Directive in my index.html file Error code [1] - Local browser Error: Access to restricted URI denied Various resp ...

"Tailored Access Per User Based on Database Field: Crafting Customized Login Responses with Express, Node.js

My website features a tutorial page that users must read before accessing certain areas. In my mongo database, I have defined a field to track this: const UserSchema = new Schema({ finished_beta_tutorial: { type: Boolean, default: fal ...

Receiving JSON information rather than frontend markup code

My express backend organizes its routers in the following order: 1. All the API routes (e.g. /notes) 2. The catch-all route that serves all frontend code from the React build folder. On the client side, I use React Router with routes named differently ...

Dealing with non-array responses from Restangular's .getList() method

Dealing with an API that I'm currently using can be tricky. When the client isn't authenticated, it returns a 200 status code along with a string error message. For example: var restSvc = Restangular.service('message'); var deferred = ...

Make sure to always display the status bar and soft keys

Is there a way to set up my ionic app on Android so that the status bar is always displayed at the top and the soft keys are shown at the bottom? I attempted to add this line to the config.xml file, but it didn't work. <preference name="Fullscree ...