使用 angular4 将 hash-url 更改为 hash-bang url答案

【问题标题】：Change hash-url to hash-bang url using angular4使用 angular4 将 hash-url 更改为 hash-bang url
【发布时间】：2018-12-10 07:02:38
【问题描述】：

我正在使用 angulr4 这是我的 URL http://localhost/#/login.html 我想将此 URL 更改为 http://localhost/#!/login.html。我找到了 angularjs 的解决方案，但没有找到 angular4 的解决方案。我正在为 SEO 使用“预渲染节点”，这是链接 https://www.npmjs.com/package/prerender-node

提前致谢

【问题讨论】：

标签： node.js angular prerender angular4-router

【解决方案1】：

你所追求的是APP_BASE_HREF。在您的路由模块app-routing.module.ts 中添加到您的模块providers 数组{ provide: APP_BASE_HREF, useValue: '!' } 并在文件顶部导入import { APP_BASE_HREF } from '@angular/common';。您似乎已经在使用HashLocationStrategy。

示例 app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule} from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';

const routes: Routes = [
  { path: '**', redirectTo: '404-not-found' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true
    })
  ],
  exports: [ RouterModule ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '!' }
  ]
})
export class AppRoutingModule {}

进一步阅读 Angular 4 文档

PathLocationStrategy:

PathLocationStrategy 是一个LocationStrategy，用于配置 Location 服务在浏览器的path 中表示其状态网址。

如果您使用的是PathLocationStrategy，则必须提供APP_BASE_HREF 或向文档添加基本元素。此 URL 前缀将是在生成和识别 URL 时保留。

例如，如果您提供 APP_BASE_HREF 或 '/my/app' 并调用 location.go('/foo')，浏览器的网址会变成 example.com/my/app/foo.

同样，如果您将<base href='/my/app'/> 添加到文档并调用 location.go('/foo')，浏览器的网址会变成 example.com/my/app/foo.

HashLocationStrategy:

您可以通过提供HashLocationStrategy useHash: true 在对象中作为第二个参数 RouterModule.forRoot 在AppModule。

APP_BASE_HREF:

... APP_BASE_HREF 标记表示要使用的基本 href ... 一个字符串，表示在生成和识别 URL 时应保留的 URL 前缀

【讨论】：