typescript Angular 4 Routing 不适用于实时网络应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45800476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 Routing not working on live web-app
提问by Davtho1983
My Angular 4 web-app routing works fine in my dev environment, and the menu redirects work fine on the live version.
我的 Angular 4 Web 应用程序路由在我的开发环境中运行良好，菜单重定向在实时版本中运行良好。
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?
但是，开发版本通过在浏览器的地址字段中键入来重定向到不同的页面，但实时版本不会。这是一个角度问题吗？或者我是否需要通过我的 ISP 管理我的重定向？
My app.router.ts code is as follows:
我的 app.router.ts 代码如下：
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);
And in app.module.ts I have:
在 app.module.ts 我有：
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 { }
I don't understand what forRoot is doing or if it's proper to use that in Angular 4?
我不明白 forRoot 在做什么，或者在 Angular 4 中使用它是否合适？
My app.component.html is as follows and uses a hidden router outlet:
我的 app.component.html 如下并使用了一个隐藏的路由器插座：
<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?
我的实时网络应用程序没有重现这种隐藏的路由器行为，我该如何更改？
I also have a menu in menu.component.html that uses router links and this works fine:
我在 menu.component.html 中也有一个使用路由器链接的菜单，这很好用：
<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>
回答by Andrei Matracaru
The issue you have here has to do with the nature of Single Page Application frameworks, such as Angular.
您在这里遇到的问题与单页应用程序框架的性质有关，例如 Angular。
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/artfor example, the server will throw a 404 not found, as it does not recognize that as the path of a resource it can serve.
在您的应用程序的部署版本上，托管它的 Web 服务器只知道如何提供它看到的一个 html 文件 (index.html)，它对应于您的根路径。例如，当您尝试直接访问http://url-to-your-app/art 时，服务器将抛出 404 not found，因为它不会将其识别为它可以提供服务的资源的路径。
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.
当从应用程序内部浏览应用程序时，管理客户端导航的是 Angular 的路由服务；托管网络服务器实际上并没有收到为 index.html 以外的其他网页提供服务的请求。此外，这不会发生在开发上，因为您的开发网络服务器知道如何管理它。
You have two options:
您有两个选择：
- 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.
- 将您的生产 Web 服务器配置为在检测到 404 时始终响应 index.html - 这样，Angular 将始终加载并且其路由服务将在客户端处理导航。
- 所描述的更改应用程序的locationStrategy到哈希定位策略 在这里。但是，这会更改您的应用程序的 URL，在我看来这并不可取。
回答by lakewood
RouterModule.forRoot(routes, {useHash: true})
See the hashLocationStrategies usage here: https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy
在此处查看 hashLocationStrategies 用法：https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy
