Angular 4路由不适用于实时网络应用

Posted 2023-02-22

技术标签:

【中文标题】Angular 4路由不适用于实时网络应用【英文标题】：Angular 4 Routing not working on live web-app 【发布时间】：2018-01-29 17:27:15 【问题描述】：

我的 Angular 4 网络应用程序路由在我的开发环境中运行良好，菜单重定向在实时版本上运行良好。

但是，开发版通过在浏览器的地址字段中键入重定向到不同的页面，但实际版本不会。这是一个角度问题吗？还是我需要通过我的 ISP 管理我的重定向？

我的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);

在 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

我不明白 forRoot 正在做什么，或者在 Angular 4 中使用它是否合适？

我的app.component.html如下，并使用了隐藏的路由器出口：

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

我的实时网络应用程序没有重现这种隐藏的路由器行为吗？我该如何更改？

我在 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>

【问题讨论】：

你的问题解决了吗？我的回答在这里***.com/questions/45862243/angular-router-get-404-bug/… 【参考方案1】：

您在这里遇到的问题与单页应用程序框架的性质有关，例如 Angular。

在您的应用程序的部署版本上，托管它的网络服务器只知道如何提供它看到的一个 html 文件 (index.html)，该文件对应于您的根路径。例如，当您尝试直接访问 http://url-to-your-app/art 时，服务器将抛出 404 未找到，因为它无法将其识别为它可以服务的资源的路径。

当从应用程序本身导航应用程序时，Angular 的路由服务负责管理客户端的导航；托管网络服务器实际上并没有接收到为您的 index.html 以外的其他网页提供服务的请求。此外，这不会发生在 dev 上，因为您的 dev Web 服务器知道如何管理它。

你有两个选择：

将您的生产 Web 服务器配置为始终使用 index.html 每当检测到 404 时，Angular 将始终加载，其路由服务将处理客户端的导航。将应用的 locationStrategy 更改为所述的 Hash 位置策略 here。但是，这会改变您应用的 URL，但事实并非如此在我看来是可取的。

【讨论】：

好的，我尝试使用重定向，但仍然无法正确重定向！这似乎没有做任何事情： path: '404', redirectTo: 'home', pathMatch: 'full' , path: '**', redirectTo: 'home', pathMatch: 'full' , 您并没有真正理解我的意思——您需要配置您的 Web 服务器（如在 IIS、nginx、apache 中，无论您使用什么），以便在收到可能导致的请求时返回 index.html在要发回的 404 HTTP 响应中。你不需要对你的 Angular 路由配置做任何事情。好的，我查阅了 1&1 指南并创建了一个 .htaccess 文件，但没有任何效果 - 似乎很多人都有同样的问题！有什么建议吗？通过我的回答，我的主要目的是让您了解您的问题实际上是什么，并为您提供了两种可能的解决方法。当您决定进行 Web 服务器配置时，现在取决于您使用的 Web 服务器，以更详细地说明如何配置它。那么 - 你使用什么网络服务器？ @Alex，查看我对类似问题的其他回答here【参考方案2】：

RouterModule.forRoot(routes, useHash: true)

在此处查看 hashLocationStrategies 用法： https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy

【讨论】：

以上是关于Angular 4路由不适用于实时网络应用的主要内容，如果未能解决你的问题，请参考以下文章

嵌套组件不适用于 Angular 中的路由

Angular 6 路由器不适用于 chrome/IE

CSS值不适用于Angular 4中动态注入的html div元素

Angular 1.4.9 方法不适用于 IOS

导航栏下拉菜单不适用于 Angular 和 Bootstrap 4

Angular 6 的路由不适用于“Router”模块，我想我有一个错误但我不知道它是啥