Angular 404 (Not Found)

Question

I finished my app and ran the command ng build --prod to generate the production version, then http-server inside the directory created by the previous command and the server worked normally, but when I put the generated files to run in Xampp’s Apache the console returns the following error:

GET http://localhost/Styles.cce9a441d9ef86e1ffb6.css 404 (Not Found) 5localhost/:13 GET http://localhost/polyfills.7a0e6866a34e280f48e7.js 404 (Not Found)

My package.json:

{
  "name": "app12",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular/cli": "~6.1.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

Answer 1

It has already happened to me that the ng command serves to delete the files generated by ng build. Do the following, run ng build and copy the files to Xampp before running ng serves again. To define another directory where Angular will generate the files use the --output-path parameter:

ng build --output-path=new_directory

If this doesn’t work, check which routing pattern Angular is using. There are two, Hashlocationstrategy and Pathlocationstrategy, The latter is the Angular standard. Hashlocationtstrategy is defined as follows:

RouterModule.forRoot(routes, {useHash: true})

If you have not made this setting above then your application is using Pathlocationstrategy. In this case you need to set the base href inside the HEAD tag in the index.html file:

<base href="/">

Answer 2

Change(or create) the file .htaccess, at the root of the site.

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

Edit:

If you want to use Nginx it’s simpler

Just edit the file /etc/nginx/sites-enabled/default

server {
    ...
    root /caminho/do/site;
    ...
    location / {
                    try_files $uri $uri/ /index.html;
            }
    }