Angular 2路由在部署到Http Server时不起作用 [英] Angular 2 Routing Does Not Work When Deployed to Http Server

问题描述

我将开发一个简单的Angular 2应用程序.我已经使用Angular CLI创建了一个带有路由的项目，并使用"ng generate component"命令向应用程序添加了几个组件.然后，我在 app-routing.module.ts 中指定了路由，如下所示.

I am going to develop a simple Angular 2 application. I have created a project with routing, using Angular CLI and added several components to the app using 'ng generate component ' command. Then I specified routing in the app-routing.module.ts as following.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserComponent } from './user/user.component';
import { ErrorComponent } from './error/error.component';
import { SpecialpageComponent } from './specialpage/specialpage.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
    {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'specialpage',
    component: SpecialpageComponent
  },
  {
    path: '**',
    component: ErrorComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

app.module.ts 如下.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ErrorComponent } from './error/error.component';
import { UserComponent } from './user/user.component';
import { SpecialpageComponent } from './specialpage/specialpage.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ErrorComponent,
    UserComponent,
    SpecialpageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我没有为其他组件添加任何修改. 然后，我使用"ng serve"命令部署了该应用程序，并且该应用程序可以很好地使用链接. 例如: http://localhost:4200/about

I have not added any modifications for the other components. Then I deployed the application using 'ng serve' command and the app works fine with the links. Eg: http://localhost:4200/about

但是当我在http-server中部署项目时，链接无法按预期工作.我使用"http-server ./dist"命令部署了该应用程序，并且该应用程序得到了很好的部署，但是链接不起作用.当我转到" http://localhost:4200/about '时，显示404错误.

But when I deploy the project in http-server, the links do not work as expected. I deployed the app using 'http-server ./dist' command and the app gets deployed fine, but the links do not work. When I go to 'http://localhost:4200/about', it gives 404 error.

我做错什么了吗?为什么"ng-serve"有效，而"http-server"无效?

Am I doing anything wrong? Why 'ng-serve' works and 'http-server' does not work?

任何帮助将不胜感激.提前致谢.

Any help would be appreciated. Thanks in advance.

我已经将项目上传到 github .

推荐答案

此问题可以通过实现HashLocationStrategy来解决，该HashLocationStrategy将#添加到所有路由中.您可以通过添加HashLocationStrategy to AppModule providers来实现.

This problem is solved by implementing HashLocationStrategy which adds # to all your routes. You achieve this by adding HashLocationStrategy to AppModule providers.

    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

并添加相应的导入

   import { HashLocationStrategy, LocationStrategy } from '@angular/common';

这将解决您的问题.

如果不想使用HashLocationStrategy，则可以使用PahtLocationStrategy，因此Angular应用程序不会在URL中显示哈希. 有关它的更多详细信息，请查看官方链接: https://angular.io/api/common/PathLocationStrategy

And if you don't want to use the HashLocationStrategy, you can use the PahtLocationStrategy, and so your Angular app will not show Hash in the URL. For more details about it check the official Link: https://angular.io/api/common/PathLocationStrategy

这篇关于Angular 2路由在部署到Http Server时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！