启动时从后端进行Angular2负载配置 [英] Angular2 load configuration from backend on startup

问题描述

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

In my Angular2 app, I'm trying to load configurations from backend on bootstrap using HTTP so that I can use the extracted data for creating angular services.

每当我尝试读取保存在配置文件中的HTTP响应时，总是会收到 TypeError:无法读取未定义属性'url'错误.

Whenever I try to read the HTTP response saved in my Config, I always get TypeError: Cannot read property 'url' of undefined error.

似乎HTTP请求仅在整个bootstrap方法完成后才完成，而我的代码尝试在检索到它之前提取Observable响应.

It appears like the HTTP request completes only when the whole bootstrap method finishes, whereas my code tries to extract the Observable response before it is retrieved.

如何解决它以从服务器提取配置并在启动时使用它创建角度服务? (我想使用提取的数据在提供商内部创建服务)

How can I fix it to extract configuration from server and use it to create angular services on startup? (I want to create services inside providers with extracted data)

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

Please comment if there is any better way of extracting configuration from server on startup.

我的 main.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');
    }
}

推荐答案

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

You could leverage the APP_INITIALIZER service to reload the configuration before application starts:

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

为此，您需要对ConfigService类进行一些调整:

For this, you need to adapt a bit your ConfigService class:

@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();
        });
  }
}

然后，您将可以直接访问应用程序中配置对象上的属性.

Then you'll be able to access directly properties on the configuration object within your application.

这篇关于启动时从后端进行Angular2负载配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！