替换AngularJS为Angular后，如何重定向带哈希的URL至无哈希路由？

这问题太常见了——从AngularJS的哈希路由切换到Angular 5的HTML5模式，要照顾旧书签用户的无缝过渡，有几个靠谱的方案，我按优先级给你梳理下：

因为服务器端拿不到URL中#后面的片段内容（浏览器不会把这部分发给服务器），所以最稳妥的方式是在新应用初始化时自动检测并处理旧哈希路由。

实现方式1：在根组件的初始化逻辑中处理 #

打开app.component.ts，在ngOnInit里加一段检测逻辑：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    const hash = window.location.hash;
    // 匹配旧AngularJS的哈希路由格式（比如#/menu、#/item/37）
    if (hash.startsWith('#/')) {
      // 提取#/后面的路径部分，比如从#/item/37得到item/37
      const targetPath = hash.slice(2);
      // 用Angular Router导航到新路径，同时替换历史记录（避免后退回到哈希路由）
      this.router.navigateByUrl(`/${targetPath}`).then(success => {
        if (success) {
          window.history.replaceState({}, document.title, `/${targetPath}`);
        }
      });
    }
  }
}

实现方式2：用APP_INITIALIZER提前处理（更及时） #

如果想在应用组件渲染前就完成重定向，可以用Angular的APP_INITIALIZER钩子，打开app.module.ts：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { Router } from '@angular/router';

// 定义重定向处理函数
export function handleHashRedirect(router: Router) {
  return () => {
    const hash = window.location.hash;
    if (hash.startsWith('#/')) {
      const targetPath = hash.slice(2);
      return router.navigateByUrl(`/${targetPath}`).then(success => {
        if (success) {
          window.history.replaceState({}, document.title, `/${targetPath}`);
        }
        return Promise.resolve();
      });
    }
    return Promise.resolve();
  };
}

@NgModule({
  // ... 其他模块配置项
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: handleHashRedirect,
      deps: [Router],
      multi: true
    }
  ]
})
export class AppModule { }

如果暂时还能部署旧AngularJS应用的入口页面，可以直接在旧的index.html里加一段极简脚本，用户访问旧URL时自动跳转到新路径：

<script>
  const hash = window.location.hash;
  if (hash.startsWith('#/')) {
    // 把#/menu转换成/menu，拼接成完整新URL
    const newUrl = window.location.origin + hash.slice(1);
    // 用replace跳转，避免历史记录残留旧URL
    window.location.replace(newUrl);
  }
</script>

这种方式不用修改新应用代码，适合需要快速过渡的场景。

因为新Angular用HTML5模式，服务器需要配置路由 fallback，否则用户直接访问新的非哈希URL（比如example.com/menu）会返回404。这里给两个常见服务器的配置示例：

Nginx配置 #

server {
  listen 80;
  server_name example.com;
  root /path/to/your/new/angular/app;
  index index.html;

  # 处理HTML5路由的fallback，所有请求都指向index.html
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Apache配置 #

在项目根目录创建.htaccess文件：

RewriteEngine On
# 排除实际存在的文件/目录
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 所有其他请求转发到index.html
RewriteRule ^ index.html [L]

• 用window.history.replaceState而非pushState，确保用户点击后退时不会回到旧哈希路由，体验更流畅。
• 测试带参数的路由（比如#/item/37），确保路径提取逻辑能正确处理多级路由。
• 如果路径包含特殊字符，不用担心——window.location.hash会自动解码，切片后直接使用即可。

内容的提问来源于stack exchange，提问作者Kabb5