在Angular中，可以使用APP_INITIALIZER来解决在页面加载时第一次不读取系统变量的问题。APP_INITIALIZER是一个Token，它可以在应用程序启动时运行一个或多个函数。

首先，在应用程序的根模块（通常是app.module.ts）中导入APP_INITIALIZER和要使用的系统变量：

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

// 定义一个InjectionToken来表示系统变量
export const SystemConfig = new InjectionToken('SystemConfig');

然后，在根模块的providers数组中添加一个提供者，使用APP_INITIALIZER来运行一个函数来读取系统变量：

@NgModule({
  // ...
  providers: [
    // ...
    {
      provide: APP_INITIALIZER,
      multi: true,
      useFactory: initApp,
      deps: [SystemConfig],
    },
  ],
})
export class AppModule { }

// 定义一个函数来读取系统变量
export function initApp(config: any) {
  return () => {
    // 在这里读取系统变量并存储到config中
    // 例如，从localStorage中读取
    const systemConfig = localStorage.getItem('systemConfig');
    if (systemConfig) {
      config.value = systemConfig;
    }
  };
}

现在，在其他组件中，可以通过依赖注入SystemConfig来访问该系统变量：

import { Component, Inject } from '@angular/core';
import { SystemConfig } from './app.module';

@Component({
  // ...
})
export class MyComponent {
  constructor(@Inject(SystemConfig) public config: string) {
    // 在这里使用config变量
  }
}

这样，当Angular应用程序启动时，initApp函数将在页面加载时运行，并在其中读取系统变量并存储到config中。之后，可以在其他组件中注入SystemConfig来使用该系统变量。