Angular2使用APP_INITIALIZER加载配置文件引发CSS冲突问题

看起来问题出在APP_INITIALIZER的异步加载逻辑和组件/样式初始化时机的冲突上，结合你提供的代码，我整理了几个排查方向和修复方案：

1. 先修复ConfigService的Promise处理逻辑 #

你的ConfigService.load()方法手动创建Promise，但没有处理HTTP请求失败的情况，这可能导致APP_INITIALIZER一直处于pending状态，进而打乱应用的初始化顺序（包括样式加载和组件渲染）。

修改config.service.ts，改用Angular HTTP的toPromise()方法，同时添加错误处理：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Configuration } from './config';

@Injectable()
export class ConfigService {
  private config: Configuration;
  constructor(private http: Http) { }

  load(url: string): Promise<Configuration> {
    console.log("load config");
    return this.http.get(url)
      .map(res => res.json())
      .toPromise()
      .then(config => {
        this.config = config;
        return config;
      })
      .catch(error => {
        console.error('Failed to load configuration', error);
        // 兜底：设置默认配置，避免应用卡住
        this.config = new Configuration();
        return Promise.resolve(this.config);
      });
  }

  getConfiguration(): Configuration {
    return this.config;
  }
}

这个修改确保无论配置文件加载成功与否，APP_INITIALIZER都会正常完成，不会阻塞后续的样式和组件初始化。

2. 确保FileInput插件在DOM完全渲染后初始化 #

FileInput插件依赖DOM元素的存在和样式的加载完成，如果在ngOnInit里初始化，可能因为APP_INITIALIZER的异步逻辑导致DOM还没准备好，或者样式还未加载完毕。

修改你的UploadFileComponent，在ngAfterViewInit钩子中初始化插件：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-upload-file',
  templateUrl: './upload-file.component.html'
})
export class UploadFileComponent implements AfterViewInit {
  // 用ViewChild获取DOM元素，避免直接用jQuery全局选择器（更符合Angular规范）
  @ViewChild('fileInput') fileInput: ElementRef;

  ngAfterViewInit() {
    // 初始化FileInput
    $(this.fileInput.nativeElement).fileinput({
      theme: 'explorer',
      // 你的其他配置项
    });
  }
}

对应的模板（upload-file.component.html）也要调整：

<input #fileInput type="file" class="file" data-theme="explorer">

3. 检查样式加载顺序与打包情况 #

从你的angular-cli.json来看，样式引入顺序是正确的（Bootstrap在前，FileInput样式在后），但可以确认一下：

• 查看dist/styles.bundle.css，确认是否包含fileinput.min.css和theme.css的内容
• 如果样式缺失，尝试将FileInput的样式导入到styles.scss中，替代angular-cli.json的配置：

  @import '../node_modules/bootstrap/dist/css/bootstrap.css';
  @import './assets/bootstrap-fileinput/css/fileinput.min.css';
  @import './assets/bootstrap-fileinput/themes/explorer/theme.css';
  // 其他样式...
  

4. 排查样式冲突 #

如果以上步骤都无效，打开浏览器开发者工具（F12），查看FileInput元素的样式：

• 检查哪些样式被覆盖（比如Primeng的样式可能和FileInput冲突）
• 针对冲突的样式，添加更高优先级的选择器（比如给FileInput元素添加自定义类，然后编写针对性的CSS）

举个例子，如果FileInput的按钮样式被Primeng覆盖：

.custom-file-input .file-input-button {
  // 重新设置样式，覆盖Primeng的规则
  background-color: #007bff;
  border-color: #007bff;
}

内容的提问来源于stack exchange，提问作者G. Aro