CODEWITHSUNDEEP
angularrouteshttp-status-code-404
Matthias Neubert
Matthias Neubert

Reputation: 335

Angular routing shows only 404 Not found

I use Angular routing. But if I go to route I get 404 error.
If I use it with localhost it works:

enter image description here

But if I try to access on server it doesn't work: enter image description here

My app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SchwarzesBrettComponent } from './schwarzes-brett/schwarzes-brett.component';

const routes: Routes = [
  { path: 'bla/:abteilung', component: SchwarzesBrettComponent, pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I have <base-href='/schwarzes-brett/'> in index.html so "schwarzes-brett/" must be in URL

If I only type ns400gt:8020/schwarzes-brett/ it works - but not as expected:

enter image description here

It adds "SchwarzesBrettComponent" automaticly to URL. Thats wrong

Of course I have <router-outlet></router-outlet> in my app.component.html

At least here is my html-file schwarzes-brett.component.html:

<div class="p-grid">
  <div class="p-col-10" style="background-color: #008800; text-align: center;">
    <span class="uberschrift">Schwarzes Brett {{abt}}</span>
  </div>
  <div class="p-col-2" style="background-color: #008800;">
    <img src="/schwarzes-brett/assets/gw2.png" class="logo">
  </div>
  <div class="p-col-2" class="hintergrund">
    <ul>
      <li *ngFor="let dokument of dokumente" class="liste">
        <p-button [label]="dokument.titel" styleClass="p-button-success" 
         (onClick)="openDokument(dokument.id)"></p-button>
      </li>
    </ul>
  </div>
  <div class="p-col-10" class="hintergrund-dokument">
    <app-dokument class="hintergrund-dokument"></app-dokument>
  </div>
</div>

and here my schwarzes-brett.component.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Dokument, ID } from '../_model/dokument';
import { ComponentCommunicationService } from '../_service/component-communication.service';
import { DbService } from '../_service/db.service';

@Component({
  selector: 'app-schwarzes-brett',
  templateUrl: './schwarzes-brett.component.html',
  styleUrls: ['./schwarzes-brett.component.scss']
})
export class SchwarzesBrettComponent implements OnInit {

  dokumente: Array<Dokument>;
  abteilung: string;
  abt: string;

  constructor(
    private dbService: DbService,
    private ccs: ComponentCommunicationService,
    private route: ActivatedRoute
   ) { }

  ngOnInit(): void {
    this.abteilung = this.route.snapshot.paramMap.get('abteilung');
    this.abt = this.abteilung.charAt(0).toUpperCase() + this.abteilung.slice(1);
    this.dbService.getDokumente(this.abteilung).subscribe(
      data => {
        this.dokumente = data;
        this.openDokument(this.dokumente[0].id);
      }
    );
  }

  openDokument(id: number): void {
    const mId = new ID();
    mId.id = id;
    this.ccs.push(mId);
  }
}

Upvotes: 0

Views: 3296

Answers (1)

Nivaldo Qui&#241;ones
Nivaldo Qui&#241;ones

Reputation: 121

There are several alternatives as to why this problem occurs, the ones that I have found and have been able to solve this type of problem are the following

  1. You need an .htaccess file from your server where the project folder is located, to solve the 404 problem. In this link you will find more information, it depends on what server you have. https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

  2. What you upload to the server is not the "src" folder nor the "app" folder, you need to execute a command to compile the project and generate a "dist" folder, and inside this folder you will find the files that you will have to put in the server.

the command to send to production the application is

ng built -prod -base-href="./"

if the problem persists but still remains in production with an error similar to "unexpected token", try the following command

ng build --aot --prod --output-hashing none

  1. In the image of your application mounted on the server, you have an error of access to the path of your server, you need to enable your server requests from the domain that will perform the requests, you can search for CORS errors to configure the server.

I HOPE I HELPED YOU

comment: In my opinion and experience it is not necessary in your "app-routing.module.ts" file to use the "{useHash: true}" in your imports, because that makes include in the route in # and aesthetically is not the best and for me would not be good practice

Upvotes: 2

Related Questions