要在Angular应用中确保组件在app.component之前加载，可以按以下步骤进行操作：

1. 创建一个新的组件，命名为pre-loader.component，用于显示加载动画或其他加载指示器。

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

@Component({
  selector: 'app-pre-loader',
  template: `
    

      
    
  `,
  styleUrls: ['./pre-loader.component.css']
})
export class PreLoaderComponent {}

2. 在app.component.html中将app-pre-loader组件放在之前。

3. 在app.component.ts中使用APP_INITIALIZER提供者，以确保在应用初始化之前加载数据或执行其他必要操作。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { APP_INITIALIZER } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    
  `,
  styleUrls: ['./app.component.css'],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [HttpClient],
      multi: true
    }
  ]
})
export class AppComponent {}

export function appInitializerFactory(httpClient: HttpClient) {
  return () => {
    // Perform any initialization tasks here (e.g., load data)
    return new Promise((resolve, reject) => {
      // Simulate an asynchronous task (e.g., HTTP request)
      setTimeout(() => {
        // Resolve the promise to indicate that initialization is complete
        resolve();
      }, 2000);
    });
  };
}

在上述示例中，通过使用APP_INITIALIZER提供者，可以在应用初始化之前加载数据或执行其他必要操作。在appInitializerFactory函数中，可以执行任何初始化任务，例如加载数据、进行HTTP请求等。在示例中，我使用了setTimeout来模拟一个异步任务，2秒后才会解析Promise以表示初始化完成。

当应用启动时，pre-loader.component会显示加载动画或指示器，直到appInitializerFactory中的初始化任务完成。完成后，app.component会替换pre-loader.component，并显示应用的内容。

请注意，您需要根据自己的需求修改pre-loader.component和appInitializerFactory中的代码。