Angular 17中无需导入模块声明全局baseUrl的方法咨询

下面提供两种无需导入任何模块，直接在组件/服务中使用baseUrl的实现方式：

方法一：硬编码全局挂载（适合固定baseUrl） #

1. 挂载全局变量
   在src/main.ts中，将baseUrl挂载到浏览器的window对象：

// src/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 挂载baseUrl到全局window
(window as any).baseUrl = 'https://192.168.1.10:45457/api/';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 解决TypeScript类型报错
   在项目根目录（或src目录下）创建typings.d.ts文件，添加全局变量声明：

// typings.d.ts
declare var baseUrl: string;

完成后，你可以在任意组件或服务中直接使用baseUrl，比如：

// 组件中使用示例
fetch(`${baseUrl}user/list`)
  .then(res => res.json())
  .then(data => console.log(data));

方法二：从路由data动态读取（复用现有路由配置） #

如果你希望保留路由data中的baseUrl配置，动态读取并全局挂载：

1. 初始化时读取路由data
   在app.module.ts中，利用APP_INITIALIZER在应用启动时读取根路由的baseUrl并挂载到全局：

// app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { Router } from '@angular/router';

// 初始化函数：从路由配置读取baseUrl
export function initGlobalBaseUrl(router: Router) {
  return () => {
    // 找到根路由（path为空的路由项）
    const rootRoute = router.config.find(route => route.path === '');
    if (rootRoute?.data?.baseurl) {
      (window as any).baseUrl = rootRoute.data.baseurl;
    }
  };
}

@NgModule({
  declarations: [/* 组件声明 */],
  imports: [/* 模块导入 */],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initGlobalBaseUrl,
      deps: [Router],
      multi: true
    }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

2. 添加类型声明
   同样在typings.d.ts中添加全局变量声明（同方法一的第二步）。

这样就可以复用你现有路由配置中的baseUrl，同时实现全局直接访问。

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