Angular2在启动时从后端加载配置

Question

在我的 Angular2 应用程序中，我正在尝试使用 HTTP 在引导程序上从后端加载配置，以便我可以使用提取的数据来创建角度服务。

每当我尝试读取保存在我的配置中的 HTTP 响应时，我总是得到 TypeError: Cannot read property 'url' of undefined 错误。

似乎只有在整个引导方法完成时 HTTP 请求才完成，而我的代码试图在检索到 Observable 响应之前提取它。

如何修复它以从服务器中提取配置并在启动时使用它来创建角度服务？ （我想用提取的数据在提供者内部创建服务）

如果有更好的方法在启动时从服务器中提取配置，请发表评论。

我的 ma​​in.ts 看起来像这样：

bootstrap(AppComponent, 
    [APP_ROUTER_PROVIDERS, HTTP_PROVIDERS, ConfigurationService, Config])
    .catch(err => console.error(err)
);

configuration.service.ts

@Injectable()
export class ConfigurationService {

    constructor(private http: Http) {
    }

    load() {
        return this.http.get('config/getConfig').map(response => response.json());
    }

}

config.ts

@Injectable()
export class Config {

    public config;

    constructor(public configurationService: ConfigurationService) {
        configurationService.load().subscribe(
            config => this.config = config,
            error => console.error('Error: ' + error)
        );
    }

    get(key: any) {
        return this.config[key];
    }
}

app.component.ts

@Component({
    selector: 'app',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [MyService]
})
export class AppComponent {

    constructor(public myService: MyService) {
    }

}

my.service.ts

@Injectable()
export class MyService{

    private url;

    constructor(public config: Config) {
        this.url = config.get('url');
    }
}

Answer 1

您可以利用APP_INITIALIZER 服务在应用程序启动之前重新加载配置：

bootstrap(AppComponent, [
  {
     provide: APP_INITIALIZER,
     useFactory: (config:Config) => {
       return config.load();
     },
     dependency: [ Config ]
   }
]);

为此，您需要稍微调整一下您的 ConfigService 类：

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

  load() { // <------
    return new Promise((resolve) => {
      this.http.get(...).map(res=>res.json())
        .subscribe(config => {
          this.config = config;
          resolve();
        });
  }
}

然后您将能够直接访问应用程序中配置对象的属性。

Answer 2

使用 AoT 编译时会引发错误，因为工厂是匿名函数。然后你需要做的是为工厂导出一个函数

export function ConfigLoader(configService: ConfigService) {
    return () => configService.load();
}

应用的配置如下所示：

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpModule,
        BrowserModule
    ],
    providers: [
        ConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: ConfigLoader,
            deps: [ConfigService]
        }],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

参考https://github.com/angular/angular/issues/10789

Answer 3

这样写加载函数比较好

public load() {
    let promise =this.http.get(url).map(res => res.json()).toPromise();
    promise.then(config =>  this.validation = config);
    return promise;
};