Encountered a hiccup during the deployment of an Angular application on Heroku

I've been working on deploying an Angular app called "test-app" to Heroku via GitHub and everything seems to be going smoothly, except for setting up the express routing function.

I've tried different paths, but Heroku keeps throwing this error:

Error: ENOENT: no such file or directory, stat '/app/test-app/index.html'

Here is my "server.js" file:


const express = require("express");
const path = require("path");
const app = express();

app.use(express.static(__dirname + "/dist"));

app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "/dist/test-app/index.html"));
});

app.listen(process.env.PORT || 8080, () => {
console.log("Connected to the server");
});

I believe I might have made a mistake in the "path join" section. Could someone please assist me with this?

Answer №1

Have you compiled your angular application using ng build? If so, have you placed the build output into the dist folder?

My recommendation would be as follows: 1. Separate your express server from your angular app. 2. Compile your angular app and transfer the output (only the HTML and JS files, not the folder with the project name) to a directory within your express app (let's call it dist as well). 3. In your express app, all you need is:

app.use(express.static(__dirname + "/dist"));
rather than

app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "/dist/test-app/index.html"));
});.

You can make it work just by following step 3 even if you have both your express and angular app in the same workspace. However, it's advisable to separate them in the future since they are distinct entities that interact but may require separate development paths.

Edit: Print out your __dirname to see its contents. Often, app.use(express.static("dist")); is sufficient.

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

Typescript defines types for parameters used in callbacks for an event bus

Encountering a TypeScript error with our custom event bus: TS2345: Argument of type 'unknown' is not assignable to parameter of type 'AccountInfo | undefined'. Type 'unknown The event bus utilizes unknown[] as an argument for ca ...

Recently updated to the latest versions of Angular, AngularCLI, and Rxjs (version 6), however encountering an error stating "Property 'take' does not exist on type 'Observable'"

Recently, I made the decision to update my Angular5 project to Angular6 and upgraded all dependencies along with it (such as rxjs now at version 6 and angular-cli). However, I have encountered a problem that is proving difficult to resolve: ERROR in src/ ...

Angular reloads content when language is switched

I am facing an issue with my language selector and default pipes for number or currency format. Even after changing the language (e.g., from en-US to fr-FR), the thousands separator remains unchanged despite the correct updates in LOCALE_ID and TranslateSe ...

Error: Unable to access the property 'fn' of an undefined object in electron version 2 using Angular 6

I am currently utilizing Angular 6.0.3 and electronjs 2.0.2 with the package.json configuration shown below: { "name": "test", "version": "1.0.0", "license": "MIT", "main": "electron-main.js", "author": { "name": "Moh ...

Validation is a must in Angular 2

I am facing an issue with the default required validator in angular forms. My form has one input field and a submit button. There are two important files: example.form.ts example.form.template.html Here is my code setup: In the .ts file, I create ...

Should the getDownloadURL() from Firebase Storage be regenerated every time, or can it be reused?

Should I store and reuse the URL received from angularfire2's getDownloadURL() in the database instead of calling getDownloadURL() every time I want to show an image from Firebase Storage? Whenever I use getDownloadURL() in my component, the images a ...

Leverage the process.env variable within an npm script

Currently, I am in the process of developing and hosting a node.js app on Heroku. My goal is to utilize the environment variables that have been set on Heroku during the application building process, specifically in the package.json file. "scripts": { ...

What is the method to incorporate type hints for my unique global Vue directives?

When I import or create a directive in an SFC file, I can receive TypeScript hints like this: import vFocus from 'my-custom-component-library'; View demo with ts hints However, if I globally register it in main.ts, the type hints are not availa ...

Determining the argument data type when calling the function

const func = <T>( obj: T, attr: keyof T, arr: T[typeof attr][], ) => { } const obj = {foo: 1, bar: true}; func(obj, 'foo', [1]); func(obj, 'bar', [1]); // shouln't be ok func(obj, 'foo', [true]); // shoul ...

What is the process for defining a collection of strings as a data type?

Is there a way to define a strict type for a group of strings that users must adhere to? I want to restrict input to only be one of the predefined strings in the group. How can I achieve this? This is my current approach: const validTypes: Array<strin ...

What are the benefits of using material-ui@next without the need for

Thinking about creating a project using material-ui@next, but trying to avoid using withStyles. However, encountering issues with the draft of TypeScript that includes the decorator @withStyles. This leads to one question - is it possible to use material ...

Angular - Show a table of items from a given list

I recently started using Angular and I'm facing a challenge in displaying multiple tables based on a list of values. Each rule refNo should have its own separate rule conditions table displayed sequentially. Currently, all the tables are showing the s ...

Opening a modal in Angular2+ when selecting an item from ngx-chips (tag-input)

I need to implement a functionality where clicking on a tag in a dropdown should trigger the opening of a modal window in my Angular application. Below is the code snippet related to this feature: <div class="force-to-the-bottom"> <tag-input [ ...

How can Angular provide a visual indication when a component change occurs?

Facing a dilemma as an Angular beginner... Imagine having an application that displays the most recent price of AAPL stock. You have a component where this price is received. Each time you request data from the API, a new price is retrieved and passed to ...

Creating a primary index file as part of the package building process in a node environment

Currently, I have a software package that creates the following directory structure: package_name -- README.md -- package.json ---- /dist ---- /node_modules Unfortunately, this package cannot be used by consumers because it lacks an index.js file in the r ...

Issue with accessing container client in Azure Storage JavaScript library

When working on my Angular project, I incorporated the @azure/storage-blob library. I successfully got the BlobServiceClient and proceeded to call the getContainerClient method, only to encounter this error: "Uncaught (in promise): TypeError: Failed ...

A blank canvas emerges upon utilizing the Angular-Bootstrap Carousel feature

This is my first experience using Angular with Bootstrap's carousel component, and I'm encountering a peculiar issue where a white slide appears before each transition (refer to the GIF below). Despite following the setup instructions on ng-boots ...

Is there a way to establish a connection between two excel entries using Angular?

In order to connect xlsx file records with their corresponding ids using angular, I am seeking a solution. To elaborate further: Let me provide an example for better understanding: Scenario 1 https://i.stack.imgur.com/25Uns.png Scenario 2 https://i ...

Encountering the error below while attempting to run ng serve

Having an issue with VSCode as a new user. When running ng serve, I encountered the following error message: PS C:\Windows\System32\x-app> ng serve --configuration=it An unhandled exception occurred: Workspace config file cannot le loa ...

What causes the website to malfunction when I refresh the page?

I utilized a Fuse template to construct my angular project. However, upon reloading the page, I encountered broken website elements. The error message displayed is as follows: Server Error 404 - File or directory not found. The resource you are looking fo ...