Question

我仍然是Angular 2的新手。我目前有两个角度应用，都使用AWS S3静态托管解决方案托管。在这两个应用中，我确信我没有使用 HashLocationStrategy 或 useHash：true 。同样在两个存储桶中，我都设置了如下的重定向规则：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com<HostName>
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

奇怪的是，对于其中一个应用程序：

当我们在浏览器中点击网址时，例如 domain.com/login
它将很快显示 domain.com /＃/ login
然后返回 domain.com/login ，并正确加载页面

然而，当我尝试对我的第二个应用程序执行类似的操作时，1和2仍然会发生，但是3将不会发生，并且状态切换到路径'**'而不是路径'reset'，这意味着没有路径匹配。这是我的应用程序中的一些代码示例（删除了一些不相关的部分）。例如：如果我将url设置为domain.com/#/reset，然后按Enter键，则网址将保持不变。

app1，app.routes.ts

import { RouterModule } from "@angular/router";
import { AuthGuard } from "./services/auth-guard.service";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";
import { LoginComponent } from './login/login.component';
import { ResetPwdComponent } from './reset-pwd/reset-pwd.component';

export const CLIENT_ROUTER_PROVIDERS = [
    AuthGuard
];

const routes = [
  { path: 'login', component: LoginComponent },
  { path: 'reset/:token', component: ResetPwdComponent },
  {
    path: '',
    loadChildren: './main/main.module',
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    component: PageNotFoundComponent,
    canActivate: [AuthGuard]
  }
];

export const routing = RouterModule.forRoot(routes);

app1 app.module.ts：

// import Modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Ng2UiAuthModule } from 'ng2-ui-auth';
import { HttpModule } from '@angular/http';
import { DatePipe} from "@angular/common";

// import configs
import {MyAuthConfig, ApiPath, NODE_API_PATH} from './app.config';

// import Components
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { LoginComponent } from './login/login.component';
import { ResetPwdComponent } from './reset-pwd/reset-pwd.component';

// import Routes
import { routing, CLIENT_ROUTER_PROVIDERS } from './app.routes';


@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
    LoginComponent,
    ResetPwdComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule,
    routing
  ],
  providers: [
    ErrorHandleService,
    FormHelperService,
    CLIENT_ROUTER_PROVIDERS,
    Pagination,
    DatePipe,
    { provide: NODE_API_PATH, useValue: ApiPath }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app2 app.route.ts

import { RouterModule } from '@angular/router';
import { ResetPwdComponent } from './reset-pwd/reset-pwd.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes = [
  { path: 'reset', component: ResetPwdComponent },
  {
   path: '**',
   component: PageNotFoundComponent,
  }
];

export const routing = RouterModule.forRoot(routes, {useHash: false});

app2 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { routing } from './app.route';
import { AppComponent } from './app.component';
import { ResetPwdComponent } from './reset-pwd/reset-pwd.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

@NgModule({
  declarations: [
    AppComponent,
    ResetPwdComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    routing,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的问题是角度或aws设置会导致这种差异？实际上即使我键入domain.com/#/ app 1也会删除/＃/ part而app 2则不会。

Answer 1

要从您的网址中删除哈希值（＃），请将RouterModule.forRoot(routes);更改为{{1}}

如何从Angular 2

1 个答案: