Angular 4路由不适用于实时网络应用 [英] Angular 4 Routing not working on live web-app
问题描述
我的 Angular 4 网络应用路由在我的开发环境中运行良好，菜单重定向在实时版本上运行良好.
My Angular 4 web-app routing works fine in my dev environment, and the menu redirects work fine on the live version.
但是，开发版通过在浏览器的地址字段中键入重定向到不同的页面，但实际版本不会.这是一个角度问题吗?还是我需要通过我的 ISP 管理我的重定向?
However, the dev version redirects to different pages by typing in the address field of the browser, but the live version doesn't. Is this an Angular problem? Or do I need to manage my redirects with my ISP?
我的app.router.ts代码如下:
My app.router.ts code is as follows:
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);
在 app.module.ts 我有:
And in app.module.ts I have:
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 { }
我不明白 forRoot 正在做什么，或者在 Angular 4 中使用它是否合适?
I don't understand what forRoot is doing or if it's proper to use that in Angular 4?
我的app.component.html如下，并使用了隐藏的路由器出口:
My app.component.html is as follows and uses a hidden router outlet:
<body>
<app-mf-toolbar></app-mf-toolbar>
<router-outlet class="hidden-router"></router-outlet>
</body>
我的实时网络应用程序没有重现这种隐藏的路由器行为吗?我该如何更改?
Is it this hidden router behaviour that my live web-app is not reproducing and how do I change this?
我在 menu.component.html 中也有一个使用路由器链接的菜单，它工作正常:
I also have a menu in menu.component.html that uses router links and this works fine:
<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>
推荐答案
这里的问题与单页应用程序框架的性质有关，例如 Angular.
The issue you have here has to do with the nature of Single Page Application frameworks, such as Angular.
在您的应用程序的部署版本上，托管它的网络服务器只知道如何提供它看到的一个 html 文件 (index.html)，它对应于您的根路径.第二次尝试直接访问 http://url-to-your-app/art for例如，服务器将抛出 404 not found，因为它不认为这是它可以服务的资源的路径.
On the deployed version of your app, the web server hosting it knows only how to serve the one html file it sees (index.html), which corresponds to your root path. The second you try to access directly http://url-to-your-app/art for example, the server will throw a 404 not found, as it does not recognize that as the path of a resource it can serve.
当从应用程序本身导航应用程序时，Angular 的路由服务负责管理客户端的导航；托管网络服务器实际上并没有接收到为您的 index.html 以外的其他网页提供服务的请求.此外，这不会发生在 dev 上，因为您的 dev Web 服务器知道如何管理它.
When navigating through your application from within the application itself, it's Angular's routing service that manages the navigation on the client side; the hosting web server does not actually receive requests to serve other web pages than your index.html. Also, this does not happen on dev because you dev web server knows how to manage this.
你有两个选择:
- 将您的生产网络服务器配置为始终响应index.html 每当检测到 404 时，Angular 将始终加载，其路由服务将处理客户端的导航.
- 将应用的 locationStrategy 更改为所述的 Hash 位置策略这里.但是，这会改变您应用的 URL，但事实并非如此在我看来是可取的.
- Configure your production web server to always respond with the index.html whenever it detects a 404 - that way, Angular will always load and its routing service will handle the navigation on the client side.
- Change your app's locationStrategy to the Hash location strategy as described here. However, that would change your app's URLs, and it's not that desirable in my opinion.
这篇关于Angular 4路由不适用于实时网络应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
