Angular 17中APP_INITIALIZER报错TypeError: appInits is not a function

错误原因 #

APP_INITIALIZER要求useFactory返回一个无参函数，这个函数内部执行初始化逻辑并返回Promise。你的代码直接返回了init.load()的Promise对象，Angular会尝试把这个Promise当作函数调用，因此抛出TypeError: appInits is not a function。

修正步骤 #

1. 调整app.config.ts中的APP_INITIALIZER配置 #

将useFactory改为返回一个函数，内部调用init.load()：

export const appConfig: ApplicationConfig = {
    providers: [
        ConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: (init: ConfigService) => () => init.load(), // 改为返回函数
            multi: true,
            deps: [ConfigService] // ConfigService已通过inject注入HttpClient，无需重复声明
        }
    ]
};

2. 确认ConfigService的load方法正确性 #

你的ConfigService.load()方法返回Promise的写法是正确的，无需修改：

@Injectable({
    providedIn: 'root',
})
export class ConfigService {
    private http = inject(HttpClient);
    
    private _config: any;
    private _user: AppUser;
    
    public getConfigUrl(key: string): string {
        return this._config.urls[key];
    }

    public load(): Promise<any> {
        return new Promise((resolve, reject) => {
            this._user = new AppUser(); // 实际可替换为请求node-express服务的逻辑
            this._config = 'test';
            resolve(true);
        });
    }
}

验证 #

修改后重启应用，Angular会在启动阶段执行返回的初始化函数，等待load()的Promise完成后再继续加载应用，错误即可解决。

内容的提问来源于stack exchange，提问作者János Molnár