APP_INITIALIZER 是 Angular 中一个配置选项,用于在应用程序启动时执行一些功能。当它不返回时,这意味着应用程序将停止并处于挂起状态。
以下是一些可能导致 APP_INITIALIZER 不返回的示例代码:
import { APP_INITIALIZER, Injectable } from '@angular/core';
@Injectable()
export class AppConfig {
apiEndpoint: string = '';
}
export function initConfig(config: AppConfig) {
return () =>
new Promise((resolve, reject) => {
// This is an asynchronous operation that returns an Observable and never completes
// 异步操作返回 Observable,但从未完成
config.apiEndpoint = 'http://localhost:8080/api';
});
}
@NgModule({
providers: [
AppConfig,
{
provide: APP_INITIALIZER,
useFactory: initConfig,
deps: [AppConfig],
multi: true,
},
],
})
export class AppModule {}
在这个示例中,我们在 APP_INITIALIZER 里面执行了一个异步操作。在这种情况下,我们需要确保这个异步操作有一个有效的结束流(即 Observable 能够正常结束),否则 APP_INITIALIZER 将挂起并导致应用程序停止运行。
要解决这个问题,我们可以在异步操作中添加一个 take(1) 管道运算符,确保 Observable 只发出一个值后就被立即完成。修改后的示例代码如下:
import { APP_INITIALIZER, Injectable } from '@angular/core';
import { take } from 'rxjs/operators'; // import the take operator
@Injectable()
export class AppConfig {
apiEndpoint: string = '';
}
export function initConfig(config: AppConfig) {
return () =>
new Promise((resolve, reject) => {
// This is an asynchronous operation that returns an Observable
// 异步操作返回 Observable
fetch('/assets/config.json')
.then((response) => response.json())
.then((data) => {
config.apiEndpoint = data.apiEndpoint;
})
.then(() => {
resolve();
})