我将开发一个简单的 Angular 2 应用程序。我使用 Angular CLI 创建了一个带路由的项目,并使用“ng generate component”命令向应用程序添加了几个组件。然后我在 app-routing.module.ts 中指定路由,如下所示。
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
但是当我在 http-server 中部署项目时,链接无法按预期工作。我使用“http-server ./dist”命令部署了应用程序并且应用程序部署正常,但链接不起作用。当我去 ' http://localhost:4200/about ',它给出 404 错误。
我做错了什么吗?为什么“ng-serve”有效而“http-server”无效?
如有任何帮助,我们将不胜感激。提前致谢。
我已经将我的项目上传到github .
最佳答案
这个问题通过实现 HashLocationStrategy
来解决,它将 #
添加到您的所有路由。您可以通过将 HashLocationStrategy
添加到 AppModule
providers
来实现这一点。
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
并添加相应的import
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
这将解决您的问题。
如果你不想使用HashLocationStrategy
,你可以使用PathLocationStrategy
,因此您的 Angular 应用不会在 URL 中显示哈希。
关于Angular 2 路由在部署到 Http 服务器时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43535048/