Angular routerLink点击在NW.js桌面应用中失效，求导航解决方案

这个问题我之前帮不少开发者踩过坑，本质是Angular的路由机制和NW.js的本地文件环境适配冲突导致的，下面给你几个实用的解决方案，按优先级推荐：

方案一：改用Hash路由模式（最省心） #

Angular默认的HTML5路由模式依赖服务器的URL重写支持，但NW.js是本地file://协议加载资源，没有服务器做重定向，所以Hash模式是最适配桌面环境的选择。

修改你的app-routing.module.ts，在路由配置里添加useHash: true：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件...

const routes: Routes = [
  // 你的路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })], // 这里开启Hash模式
  exports: [RouterModule]
})
export class AppRoutingModule { }

改完重新构建Angular应用，打包进NW.js后routerLink就能正常跳转了。

方案二：设置正确的Base Href #

如果不想用Hash模式，需要确保Angular知道当前的基准路径（因为NW.js加载的是本地文件，不是服务器根目录）。

两种设置方式： #

1. 直接修改index.html：
   把<base href="/">改成<base href="./">，让Angular用相对路径解析路由。

2. 构建时指定参数：
   执行Angular构建命令时加上--base-href参数：

ng build --prod --base-href ./

这样打包出来的index.html会自动带上正确的基准路径，避免路由解析错误。

方案三：拦截NW.js窗口导航（进阶，适合必须用HTML5模式的场景） #

如果业务必须用HTML5路由模式，需要在NW.js的主进程里拦截路由跳转请求，把本地文件路径的导航转交给Angular路由处理。

在NW.js的main.js（主进程入口）里添加如下代码：

const { app, BrowserWindow } = require('nw.gui');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
      // 根据你的Angular版本调整webPreferences配置
    }
  });

  // 加载打包后的Angular应用入口
  const appPath = `file://${__dirname}/dist/your-angular-app-name/index.html`;
  mainWindow.loadURL(appPath);

  // 拦截窗口导航请求
  mainWindow.webContents.on('will-navigate', (event, targetUrl) => {
    const baseAppUrl = `file://${__dirname}/dist/your-angular-app-name/`;
    // 判断是否是应用内部的路由跳转，不是外部链接
    if (targetUrl.startsWith(baseAppUrl) && targetUrl !== baseAppUrl) {
      event.preventDefault();
      // 提取路由路径，交给Angular路由处理
      const routePath = targetUrl.replace(baseAppUrl, '');
      mainWindow.webContents.executeScript(`
        // 调用Angular的Router进行导航
        window.angularRouter.navigate(['/${routePath}']);
      `);
    }
  });
});

注意：需要在Angular应用里把Router实例挂载到window对象上，方便主进程调用，比如在app.component.ts里：

import { Router } from '@angular/router';

constructor(private router: Router) {
  (window as any).angularRouter = router;
}

额外注意事项 #

• 确保Angular应用是生产构建（ng build --prod），开发模式的一些调试逻辑可能和NW.js环境冲突；
• 尽量使用稳定版的NW.js，避免版本兼容问题；
• 测试时直接用NW.js加载打包后的dist文件夹，不要用开发服务器的http://localhost地址，协议不一致会导致路由异常。

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