Application Angular 18 not working after the build

Question

I am quite new to Angular and I've developed an application which I would like to use as an online portfolio of my programing achievementaz&. Locally, everything works fine, the routing is doing the job. But after the building and having transferred the files on the server, I can access to the "home page" but when I refresh the page or when using a link (target="_blank") of my application to get to another component, I have my new page with "File not found". I did my build then transferred on the server the files of the browser folder included in the dist folder.

As it works well locally, I guess the problem appears during the build and I read something about "configuring the server" to redirect toward the entry file index.html but I don't know how to do that (on https://v17.angular.io/guide/deployment: "Configure the server to redirect requests for missing files to index.html. Learn more about server-side redirects below.").

My project name is SBH and here below my angular.json file if it can be useful to understand the problem

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "SBH": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "outputPath": "dist/SBH",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",

            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              },
              {
                "glob": "**/*",
                "input": "public",
                "output": "/"
              }
            ],
            "styles": ["src/styles.scss"]
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular/build:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "SBH:build:production"
            },
            "development": {
              "buildTarget": "SBH:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular/build:extract-i18n"
        },
        "test": {
          "builder": "@angular/build:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": ["src/styles.scss"]
          }
        }
      }
    }
  }
}

Thanks so much for your help and understanding.

You have to configure the webserver specifically for handling single page applications, you should google "How to deploy SPA in _____" where you enter your server provider and follow the steps to host the Single Page application. — Naren Murali
– Naren Murali, Commented Oct 22 at 18:11
Thanks for your answer Naren, actually I contacted my webserver assistance and they told me that they just had to change the extension of the index.html file on the webserver in "php" (index.php) and it works fine now — MELANIE BLONDIN
– MELANIE BLONDIN, Commented Oct 24 at 16:02

General Grievance · Accepted Answer · 2025-10-22 17:14:24Z

0

try to build with

ng build --base-href ./

edited Oct 22 at 17:14

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Oct 22 at 16:43

ahmed hlaimi

516 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MELANIE BLONDIN Oct 24 at 16:04

Thanks for your answer Ahmed, finally I did nothing more than changing the extension of the index.html file on the webserver in "php" (index.php), that what the webserver assistance recommended me

Collectives™ on Stack Overflow

Application Angular 18 not working after the build

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related