webentwicklung-frage-antwort-db.com.de

Angular 4 Routing funktioniert bei Live-Web-App nicht

Mein Angular 4 Web-App-Routing funktioniert in meiner Entwicklungsumgebung einwandfrei, und die Menü-Weiterleitungen funktionieren in der Live-Version einwandfrei.

Die dev-Version leitet jedoch auf andere Seiten um, indem sie in das Adressfeld des Browsers eingibt, die Live-Version jedoch nicht. Ist das ein Angular Problem? Oder muss ich meine Weiterleitungen mit meinem ISP verwalten?

Mein app.router.ts-Code lautet wie folgt:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';

export const router: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent },
{ path: 'art', component: ArtComponent },
{ path: 'music', component: MusicComponent },
{ path: 'events', component: EventsComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

Und in app.module.ts habe ich:

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

import 'hammerjs';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MdInputModule, MdButtonModule, MdToolbarModule, MdMenuModule, MdGridListModule, MaterialModule, MdDatepickerModule, MdNativeDateModule } from '@angular/material';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MfToolbarComponent } from './mf-toolbar/mf-toolbar.component';
import { MfMenuComponent } from './mf-menu/mf-menu.component';
import { SplashComponent } from './splash/splash.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';
import { HomeComponent } from './home/home.component';
import { ImageSliderComponent } from './image-slider/image-slider.component';

// import { HTTPTestService } from './date-data.service';
import { AuthenticationService } from './authentication-service.service';

import { DataService } from './data.service';
import { SvgViewerComponent } from './svg-viewer/svg-viewer.component';
import { CalendarComponent } from './calendar/calendar.component';

@NgModule({
  declarations: [
    AppComponent,
    MfToolbarComponent,
    MfMenuComponent,
    SplashComponent,
    ArtComponent,
    MusicComponent,
    EventsComponent,
    HomeComponent,
    ImageSliderComponent,
    SvgViewerComponent,
    CalendarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MdInputModule,
    MdButtonModule,
    MdToolbarModule,
    MdMenuModule,
    MdDatepickerModule, 
    MdNativeDateModule,
    HttpModule,
    RouterModule.forRoot( router ),
  ],
  providers: [
    // [HTTPTestService],
    [AuthenticationService],
    [DataService],
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ich verstehe nicht, was forRoot macht oder ob es richtig ist, dies in Angular 4 zu verwenden?

Meine app.component.html sieht wie folgt aus und verwendet einen versteckten Router-Ausgang:

<body>
<app-mf-toolbar></app-mf-toolbar>
<router-outlet class="hidden-router"></router-outlet>
</body>

Ist es dieses versteckte Routerverhalten, das meine Live-Web-App nicht reproduziert, und wie kann ich das ändern?

Ich habe auch ein Menü in menu.component.html, das Router-Links verwendet, und das funktioniert gut:

<div class="container">
    <md-menu #appMenu="mdMenu">
        <a routerLink="home">
            <button md-menu-item>
                <md-icon class="material-icons"> home </md-icon>
                <span> Home </span>
            </button>
        </a>
        <a routerLink="art">
            <button md-menu-item>
                <md-icon class="material-icons"> format_Paint </md-icon>
                <span> Art </span>
            </button>
        </a>
        <a routerLink="music">
            <button md-menu-item>
                <md-icon class="material-icons"> music_note </md-icon>
                <span> Music </span>
            </button>
        </a>
        <a routerLink="events">
            <button md-menu-item>
                <md-icon class="material-icons"> event_note </md-icon>
                <span> Events </span>
            </button>
        </a>
    </md-menu>

    <button md-icon-button [mdMenuTriggerFor]="appMenu" color="secondary">
       <i class="material-icons">menu</i>
    </button>
</div>
5
Davtho1983

Das Problem, das Sie hier haben, bezieht sich auf die Art der Single-Page-Anwendungsframeworks wie Angular.

In der bereitgestellten Version Ihrer App kann der Webserver, auf dem sich die App befindet, nur die HTML-Datei bereitstellen (index.html), die Ihrem Stammpfad entspricht. Beim zweiten Versuch, direkt auf http: // url-to-your-app/art zuzugreifen, gibt der Server eine nicht gefundene 404 aus, da er den Pfad einer Ressource nicht erkennt Dienen.

Wenn Sie in der Anwendung selbst durch Ihre Anwendung navigieren, übernimmt der Routing-Service von Angular die Navigation auf der Clientseite. Der Hosting-Webserver empfängt eigentlich keine Anforderungen, andere Webseiten als Ihre index.html. bereitzustellen. Dies geschieht auch nicht bei dev, da der Dev-Webserver dies zu verwalten weiß.

Sie haben zwei Möglichkeiten: 

  1. Konfigurieren Sie Ihren Produktions-Webserver so, dass er immer mit der Index.html reagiert, wenn ein 404 erkannt wird. Auf diese Weise wird Angular immer geladen, und der Routing-Service übernimmt die Navigation auf der Clientseite.
  2. Ändern Sie die locationStrategy Ihrer App in die Hash-Standortstrategie, wie in hier . Beschrieben. Dies würde jedoch die URLs Ihrer App ändern, und dies ist meiner Meinung nach nicht wünschenswert.
16
RouterModule.forRoot(routes, {useHash: true})

Sehen Sie sich die Verwendung von hashLocationStrategies hier an: https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy

0
vars