Angular 18 Application 'NOT FOUND' error when deploying to Heroku

I recently upgraded my Angular/Ionic project to Angular 18 and I know that modified the angular.json and probably the project structure a bit.

Now my application returns a NOT FOUND and Heroku gives the error: 2024-11-14T20:35:46.715083+00:00 app[web.1]: Error: ENOENT: no such file or directory, stat '/app/dist/church_website_frontend/index.html'

Again, I never touched anything except upgrading. I didn't mess with my server.js file either.

server.js file:

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist/church_website_frontend'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+
'/dist/church_website_frontend/index.html'));});
app.listen(process.env.PORT || 8080);



manifest.webmanifest:

{
"name": "The Father's House Ministry",
"short_name": "The Father's House Ministry",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/app_home-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/app_home-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/app_home-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/app_home-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/app_home-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/app_home-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/app_home-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/app_home-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable any"
}
]
}



package.json

"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"heroku-postbuild": "ng build --configuration production"
},


angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": {
"base": "dist/church_website_frontend"
},
"index": "src/index.html",
"polyfills": ["zone.js"],
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
},
"src/manifest.webmanifest"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
"src/theme/variables.scss",
"src/global.scss"
],
"scripts": [],
"aot": false,
"extractLicenses": false,
"sourceMap": true,
"optimization": true,
"namedChunks": true,
"serviceWorker": "ngsw-config.json",
"browser": "src/main.ts"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "app:build"
},
"configurations": {
"production": {
"buildTarget": "app:buildroduction"
},
"ci": {
"progress": false
}
}
},


I checked my dist folder because I assume that was the issue and I noticed my index.html is not where it's trying to look for it.

I tried changing my server.js sendfile method to be: res.sendFile(path.join(__dirname+ '/dist/church_website_frontend/browser/index.html'));});

because my dist has a browser folder and the index.html is in there, but that also didn't work. Heroku shows everything is semi-good - showing 200s and 304s?:

2024-11-14T20:57:14.728965+00:00 heroku[router]: at=info method=GET path="/chunk-HV4COAZO.js" host=tfh-website.herokuapp.com request_id=0776ef0b-a41c-4c46-93ca-d2dfe7258363 fwd="98.214.25.29" dyno=web.1 connect=0ms service=1ms status=200 bytes=99574 protocol=https
2024-11-14T20:57:14.746753+00:00 heroku[router]: at=info method=GET path="/polyfills-SCHOHYNV.js" host=tfh-website.herokuapp.com request_id=c0c7f576-702a-419a-9c2a-493dba029d69 fwd="98.214.25.29" dyno=web.1 connect=1ms service=1ms status=200 bytes=99574 protocol=https
2024-11-14T20:57:14.749251+00:00 heroku[router]: at=info method=GET path="/main-UX3TQ3VX.js" host=tfh-website.herokuapp.com request_id=cf071216-fd67-4ee9-9dd2-48fa6fe4fd67 fwd="98.214.25.29" dyno=web.1 connect=0ms service=2ms status=200 bytes=99574 protocol=https
2024-11-14T20:57:14.826664+00:00 heroku[router]: at=info method=GET path="/assets/icon/church-icon-trimmed.webp" host=tfh-website.herokuapp.com request_id=ebf0a91c-8657-4236-9e04-9c94dee03fe4 fwd="98.214.25.29" dyno=web.1 connect=3ms service=2ms status=200 bytes=99574 protocol=https
2024-11-14T20:57:14.861093+00:00 heroku[router]: at=info method=GET path="/assets/icon/church-icon-trimmed.webp" host=tfh-website.herokuapp.com request_id=458950a5-aa14-4ee0-be98-abdb922b73df fwd="98.214.25.29" dyno=web.1 connect=0ms service=1ms status=206 bytes=342 protocol=https
2024-11-14T20:57:14.896648+00:00 heroku[router]: at=info method=GET path="/assets/icon/church-icon-trimmed.webp" host=tfh-website.herokuapp.com request_id=7fa6ee47-1a1f-44b0-bdba-f9e2813a3b91 fwd="98.214.25.29" dyno=web.1 connect=0ms service=1ms status=206 bytes=85439 protocol=https
2024-11-14T20:57:14.905954+00:00 heroku[router]: at=info method=GET path="/assets/icon/church-icon-trimmed.webp" host=tfh-website.herokuapp.com request_id=2bfd4069-0504-4bad-9a54-ae0e1ae81a08 fwd="98.214.25.29" dyno=web.1 connect=0ms service=1ms status=206 bytes=342 protocol=https
2024-11-14T20:57:14.946727+00:00 heroku[router]: at=info method=GET path="/assets/icon/church-icon-trimmed.webp" host=tfh-website.herokuapp.com request_id=fd87cd87-aaa5-4f3b-9614-7c9098164e3b fwd="98.214.25.29" dyno=web.1 connect=0ms service=2ms status=206 bytes=85439 protocol=https
2024-11-14T20:57:14.990030+00:00 heroku[router]: at=info method=GET path="/assets/icon/church-icon-trimmed.webp" host=tfh-website.herokuapp.com request_id=ba1b05b2-170a-4d07-bbfd-9deea0d021cb fwd="98.214.25.29" dyno=web.1 connect=0ms service=1ms status=304 bytes=239 protocol=https
2024-11-14T20:57:15.045759+00:00 heroku[router]: at=info method=GET path="/manifest.webmanifest" host=tfh-website.herokuapp.com request_id=8d41f52a-e3e0-4a73-a301-e1b842133210 fwd="98.214.25.29" dyno=web.1 connect=0ms service=2ms status=200 bytes=99574 protocol=https
2024-11-14T21:01:31.394748+00:00 heroku[router]: at=info method=GET path="/chunk-HV4COAZO.js" host=tfh-website.herokuapp.com request_id=433fb0d1-a420-479d-b955-66b6c2268087 fwd="98.214.25.29" dyno=web.1 connect=0ms service=1ms status=304 bytes=239 protocol=https
2024-11-14T21:01:31.376672+00:00 heroku[router]: at=info method=GET path="/chunk-QM5HIALM.js" host=tfh-website.herokuapp.com request_id=23c70e90-e6ff-423d-8fce-f9591ac72e25 fwd="98.214.25.29" dyno=web.1 connect=0ms service=1ms status=304 bytes=239 protocol=https


BUT the application actually fails in the browser with:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.


&

manifest.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.


Any Help would be greatly appreciated?

Continue reading...