Angular 18.2+Electron26如何动态配置provideRouter的withHashLocation？

方案一：通过DI传递环境标识（推荐） #

这种方式符合Angular依赖注入规范，适合需要在多场景复用环境判断逻辑的情况。

1. 创建环境检测的DI Token
   在项目中新建文件（比如is-electron.token.ts）：

import { InjectionToken } from '@angular/core';

export const IS_ELECTRON = new InjectionToken<boolean>('标识是否运行在Electron环境');

2. 在入口文件main.ts中检测环境并注入标识
   main.ts是应用入口，可直接访问全局window对象提前判断环境：

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { IS_ELECTRON } from './app/is-electron.token';

// 检测Electron环境
const isElectron = window.api?.isElectron ?? false;

bootstrapApplication(AppComponent, {
  ...appConfig,
  providers: [
    ...(appConfig.providers || []),
    { provide: IS_ELECTRON, useValue: isElectron }
  ]
});

3. 在app.config.ts中动态配置路由
   使用inject函数获取环境标识，根据结果决定是否添加哈希路由特性：

import { ApplicationConfig, inject } from '@angular/core';
import { provideRouter, withHashLocation, RouterFeatures } from '@angular/router';
import { routes } from './app.routes';
import { IS_ELECTRON } from './is-electron.token';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, ...(() => {
      const isElectron = inject(IS_ELECTRON);
      const features: RouterFeatures[] = [];
      if (isElectron) {
        features.push(withHashLocation());
      }
      return features;
    })())
  ]
};

方案二：直接在app.config.ts中检测全局window #

如果不需要复用环境判断逻辑，可简化为直接在配置文件中检测全局window：

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withHashLocation } from '@angular/router';
import { routes } from './app.routes';

// 检测Electron环境，添加typeof window判断避免非浏览器环境报错
const isElectron = typeof window !== 'undefined' && window.api?.isElectron ?? false;

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      isElectron ? withHashLocation() : []
    )
  ]
};

原方案中windowReference无法使用的原因 #

windowReference一般是组件中通过依赖注入获取的对象，但app.config.ts在应用初始化早期执行，此时组件注入上下文尚未建立，因此无法访问该对象。直接使用全局window或在入口文件提前检测是更可靠的方式。

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