Angular-routing funktioniert nicht – Fehler 404 nicht gefunden

Habe ich eine einfache Eckige Beispiel, wo das routing funktioniert einfach nicht. Alle anderen Komponenten habe ich bereits dort funktioniert, aber seit heute keine anderen Komponenten arbeiten. Beim aufrufen den Pfad bekomme ich immer „error 404 /test“ form, Winkel-CLI.

Hier ist meine app.- Modul.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RouterModule } from '@angular/router'

import { EventAppComponent } from './events-app.component'
import { EventsListComponent } from './events/events-list.component'
import { EventThumbnailComponent } from './events/events-thumbnail.component'
import { NavBarComponent } from './nav/navbar.component'
import { EventDetailsComponent } from './events/event-details/event-details.component'
import { CreateEventComponent } from './events/create-event.component'
import { Error404Component } from './errors/404.component'
import { TestComponent } from './events/test.component'

import { EventService } from './events/shared/event.service'
import { ToastrService } from './common/toastr.service'
import { EventRouteActivator } from './events/event-details/event-route-activator.service'

import { appRoutes } from './route'

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forRoot(appRoutes)
    ], 
    declarations: [
        EventAppComponent,
        EventsListComponent,
        EventThumbnailComponent,
        EventDetailsComponent,
        NavBarComponent,
        CreateEventComponent,
        Error404Component,
        TestComponent
    ],
    providers: [ EventService, ToastrService, EventRouteActivator ],
    bootstrap: [ EventAppComponent ]
})

export class AppModule {}

Hier ist meine route.ts

import { Routes } from '@angular/router'
import { EventsListComponent } from './events/events-list.component'
import { EventDetailsComponent } from './events/event-details/event-details.component'
import { CreateEventComponent } from './events/create-event.component'
import { Error404Component } from './errors/404.component'
import { EventRouteActivator } from './events/event-details/event-route-activator.service'
import { TestComponent } from './events/test.component'

export const appRoutes: Routes = [
    { path: 'test', component: TestComponent },
    { path: 'events/new', component: CreateEventComponent },
    { path: 'events', component: EventsListComponent },
    { path: 'events/:id', component: EventDetailsComponent, canActivate: [EventRouteActivator] },
    { path: '404', component: Error404Component },
    { path: '', redirectTo: '/events', pathMatch: 'full' }
]

test.Komponente.ts (nicht arbeiten localhost:8808/test)

import { Component } from '@angular/core'

@Component({
  template:
  `
    <h1>Hello World</h1>
  `,
  styles: [``]
})

export class TestComponent {
  constructor() {

  }
}

Hier ist eine funktionierende Komponente (localhost:8808/404):

import { Component } from '@angular/core'

@Component({
  template: `
    <h1 class="errorMessage">404'd</h1>
  `,
  styles: [`
    .errorMessage { 
      margin-top:150px; 
      font-size: 170px;
      text-align: center; 
    }`]
})

export class Error404Component {
  constructor() {

  }
}

Beim umbenennen

{ path: '404', component: Error404Component },

zu

{ path: '405', component: Error404Component },

Bekomme ich auch diese Fehlermeldung. Was bin ich? Wenn Sie Strg+Klicken Sie auf den Namen der Komponente VS-Code führt mich in die Klasse, so dass der Dateipfad korrekt ist, denke ich.

EDIT: kann ich auch ändern

{ path: '', redirectTo: '/events', pathMatch: 'full' }

zu

{ path: '', redirectTo: '/test', pathMatch: 'full' }

dann bekomme ich die Umleitung auf die richtige Seite @ localhost:8808/test. Aber nach dem drücken der enter wieder in die URL-bar zu gehen direkt zu diesem URL, der Fehler wieder Auftritt.

  • bekommst du eine Fehlermeldung im developer-tools-Konsole? wenn ja, können Sie teilen
  • Wie sind Sie auf die Navigation um die test-route? Was macht Ihr routerLink oder .navigate Aussehen?
  • Failed to load resource: the server responded with a status of 404 (Nicht Gefunden).
  • Ich nenne es einfach über localhost:8808/test wie ich mit localhost:8808/events oder localhost:8808/404 (beide arbeiten). Nein .navigieren oder routerLink.
  • ok, und ich nehme an, Sie haben dies in der route-Datei korrekt? @NgModule({ imports: [RouterModule.forRoot(appRoutes)], exports: [RouterModule] })
  • Ich habe keine Exporte array. Nur die Importe ein. Ich habe die Exporte einen, aber der Fehler bleibt immer noch.

InformationsquelleAutor Lpold | 2018-02-23



One Reply
  1. 0

    dies ist ein Beispiel von dem, was ich für das routing-Modul. ist ein bisschen Verschieden von dem, was Sie haben.

    app.routing.ts

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    
    //Layouts
    import { FullLayoutComponent } from './layouts/full-layout.component';
    import { SimpleLayoutComponent } from './layouts/simple-layout.component';
    
    export const routes: Routes = [
      {
        path: '',
        redirectTo: '/login_Register',
        pathMatch: 'full',
      },
      {
        path: '',
        component: SimpleLayoutComponent,
        data: {
          title: 'people'
        },
        children: [
          {
            path: 'people',
            loadChildren: './people/people.module#PeopleModule'
          }
        ]
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }
    

    dann in meinem app.- Modul.ts rufe ich die route-Datei wie folgt:

    //Routing Module
    import { AppRoutingModule } from './app.routing';
    
    import { SimpleLayoutComponent } from './layouts/simple-layout.component';
    import { AppComponent } from './app.component';
    
    @NgModule({
      imports: [
        AppRoutingModule,
      ],
      declarations: [
        AppComponent,
        SimpleLayoutComponent,
      ],
      providers: [...],
      schemas: [..],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    hoffe, das hilft ein wenig mehr

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.