开发者问题收集

注入配置服务时配置未定义

2023-01-13
514

这是我之前 帖子 的后续。我已经调试这个问题一段时间了,尽管我还没有修复它,但我发现了一些问题,所以也许有人能帮忙。

这是整个设置:
app-config.json (/src/assets/):

{
  "apiUrl": "localhost:8080"
}

app-config.service.ts (/src/app/):

import {Injectable, Injector} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {

  private appConfig: any;

  constructor (private injector: Injector) { }

  loadAppConfig() {
    let http = this.injector.get(HttpClient);

    return http.get('/assets/app-config.json')
      .toPromise()
      .then(data => {
        this.appConfig = data;
      })
  }

  get config() {
    return this.appConfig;
  }

}

app.module.ts (/src/app/):

import {APP_INITIALIZER, NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {AppConfigService} from './app-config.service';
import {CometdService} from './cometd/cometd.service';

const appInitializerFn = (appConfig: AppConfigService) => {
  return () => {
    return appConfig.loadAppConfig();
  }
};

@NgModule({
...
  providers: [HttpClientModule,
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFn,
      multi: true,
      deps: [AppConfigService]
    }]
})

export class AppModule {
  constructor(cometdService: CometdService) {}
}

cometd.service.ts (/src/app/cometd/):

import {Injectable, OnDestroy} from '@angular/core';
import {Store} from '@ngrx/store';
import * as fromRoot from '../reducers';
import {AppConfigService} from '../app-config.service';

export interface CometDExtended extends cometlib.CometD {
  websocketEnabled: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class CometdService implements OnDestroy {

  protected cometd: CometDExtended = new cometlib.CometD() as CometDExtended;

  private subscriptions: cometlib.SubscriptionHandle[] = [];

  constructor(private environment: AppConfigService, private store: Store<fromRoot.State>) {
    let config = environment.config;
    let apiUrl = environment.config.apiUrl;
    
    this.cometd.configure('http://localhost:8080/cometd');
    this.startConnection();
  }
...
}
  • 这个问题发生在各种服务上。 CometD 只是一个例子。
  • app-config.service.ts 中的数据本身已正确获取,即 loadAppConfig() 返回 { "apiUrl": "localhost:8080" }。
  • 注入的环境 (AppConfigService) 已定义,即其类型为 Object。
  • environment.config 未定义,因此 environment.config.apiUrl 返回错误:“TypeError:无法读取未定义的属性(读取‘apiUrl’)”。
2个回答

AppConfigService 在提供程序数组中不是必需的,因为 providedIn: 'root' 已使其可用。

如果您以不同的方式提供服务,则可能会有多个实例:一个将被加载,其他则不会。

如果仍然不起作用,请放置一个断点以检查在初始化完成之前是否创建了其他服务。我建议将调用移出 CometdService 构造函数,以便您可以以干净的方式执行异步调用

Alexis Deprez
2023-01-13

哎呀,在发布问题几分钟后,我碰巧找到了解决方案。由于 loadAppConfig() 是异步的,因此 environment.config 可能在承诺得到解决之前就已被访问。将构造函数更改为:

this.environment.loadAppConfig().then(() => {
let config = environment.config
...
});

解决了该问题。

podehi
2023-01-13