Angular 17 SSR中如何将服务器端获取的信息传递至组件及实现合理性咨询

你目前的方向完全没问题！这正是Angular SSR中传递服务端专属数据的标准思路，接下来我帮你把剩下的步骤补全，同时解决一个容易踩的异步坑，再补充User Agent的获取实现。

一、先修复mac地址异步获取的问题 #

你当前代码里的mac()方法是异步回调，直接调用app(ipAddress, macAddress)时，macAddress可能还没被赋值（还是undefined），会导致注入的MAC地址为空。我们可以把它封装成Promise，用async/await确保拿到值再启动服务器：

// 在server.ts中修改run函数相关代码
import { ip, mac } from 'address';

// 封装mac地址获取为Promise
function getMacAddress(): Promise<string> {
  return new Promise((resolve, reject) => {
    mac((err, add) => {
      if (err) {
        console.error('Failed to get MAC address:', err);
        reject(err);
      } else {
        resolve(add!);
      }
    });
  });
}

async function run(): void {
  try {
    const ipAddress: string = ip()!;
    // 等待MAC地址获取完成
    const macAddress: string = await getMacAddress();
    
    const port = process.env['PORT'] || 4000;
    const server = app(ipAddress, macAddress);
    
    server.listen(port, () => {
      console.log(`Node Express server listening on http://localhost:${port}`);
      console.log(`Server IP: ${ipAddress} - MAC: ${macAddress}`);
    });
  } catch (err) {
    console.error('Server startup failed:', err);
  }
}

run();

二、在Angular组件中注入并使用这些服务端数据 #

现在服务器端已经正确注入了IP和MAC地址的Token，接下来在组件中通过@Inject装饰器获取这些值：

1. 在目标组件中导入Token并注入：

import { Component, Inject } from '@angular/core';
import { IpAddressToken, MacAddressToken } from '../utils/injectTokens';

@Component({
  selector: 'app-server-details',
  template: `
    <div class="server-info">
      <h3>Server Details</h3>
      <p><strong>IP Address:</strong> {{ serverIp }}</p>
      <p><strong>MAC Address:</strong> {{ serverMac }}</p>
    </div>
  `,
  standalone: true // 如果是独立组件的话，否则不需要这个
})
export class ServerDetailsComponent {
  constructor(
    @Inject(IpAddressToken) public serverIp: string,
    @Inject(MacAddressToken) public serverMac: string
  ) {}
}

2. 补充客户端侧的Token提供者：
   Angular SSR在客户端水合（hydration）时，也需要这些Token的提供者，否则会抛出注入错误。在你的app.config.ts（独立组件模式）或者app.module.ts（NgModule模式）中添加默认值：

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { IpAddressToken, MacAddressToken } from './utils/injectTokens';

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(),
    // 客户端侧提供默认值，因为客户端无法获取服务器IP/MAC
    { provide: IpAddressToken, useValue: 'N/A' },
    { provide: MacAddressToken, useValue: 'N/A' }
  ]
};

三、补充User Agent的获取与传递 #

你的需求里还有User Agent，这个是每个请求的专属信息，需要在请求处理时从req.headers中获取，再注入到providers：

1. 先在injectTokens.ts中添加User Agent的Token：

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

export const IpAddressToken = new InjectionToken<string>("IP Address");
export const MacAddressToken = new InjectionToken<string>("MAC Address");
export const UserAgentToken = new InjectionToken<string>("User Agent"); // 新增

2. 在server.ts的请求处理中注入User Agent：

server.get('*', (req, res, next) => {
  const { protocol, originalUrl, baseUrl, headers } = req;
  // 获取User Agent，默认值处理
  const userAgent = headers['user-agent'] || 'Unknown User Agent';
  
  commonEngine
    .render({
      bootstrap,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [
        { provide: APP_BASE_HREF, useValue: baseUrl },
        { provide: IpAddressToken, useValue: ipaddress },
        { provide: MacAddressToken, useValue: macAddress },
        { provide: UserAgentToken, useValue: userAgent } // 注入User Agent
      ],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

3. 同样在组件中注入UserAgentToken即可使用，别忘了在客户端app.config.ts中补充默认值：

// app.config.ts中添加
{ provide: UserAgentToken, useValue: navigator.userAgent || 'Unknown User Agent' }

四、关于实现合理性的确认 #

你当前的思路完全正确：

• 使用InjectionToken是Angular SSR中传递服务端专属数据的标准方案，能确保服务端渲染时数据正确注入到组件，生成包含这些信息的HTML。
• 把服务器IP/MAC的获取放在run()函数中是合理的，因为这些信息是服务器本身的属性，不会随请求变化；而User Agent随请求变化，所以放在请求处理逻辑中获取是正确的。

只要修复了异步获取MAC地址的问题，再完成组件侧的注入和客户端提供者补充，就能完美实现需求啦！

备注：内容来源于stack exchange，提问作者Varanasi Phaneendra