Angular 404 (Not Found)

Question

Angular 404 (Not Found)

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I finished my app and circled the command ng build --prod to generate the production version, then rolled http-server into the directory created by the previous command and the server worked normally, however when I put the generated files to run in Apache of the Xampp console returns the following error:

GET link 404 (Not Found) 5localhost /: 13 GET link 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"
  }
}

angular

asked by anonymous 09.08.2018 / 20:06

2 answers

1

Change (or create) the file .htaccess , to 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

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

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

09.08.2018 / 20:11

QrCode appears generated as incorrect image Pass a given sequence number of times in Python 3

score 1 · Accepted Answer

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

ng build --output-path = new_directory

If it does not work, check the routing pattern that Angular is using. There are two HashLocationStrategy and PathLocationStrategy , the latter is the Angular pattern. HashLocationtStrategy is defined as follows:

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

If you have not done this configuration above then your application is using PathLocationStrategy. In this case you need to set the base href within the HEAD tag in the index.html file:

<base href="/">