Javascript Angular2在应用程序引导启动之前从服务器端加载api配置显示

我正在使用angular 2网络应用程序。在这种情况下，我在应用程序启动之前从api获取应用程序配置详细信息。为此，我在浏览器上搜索并找到了这些链接

然后跟着他们。在angular cli和浏览器控制台上，我没有收到任何错误。但是我的页面空了，加载文本，这是我在加载前显示的

这是我的密码

应用程序模块.ts

    import { BrowserModule }                   from '@angular/platform-browser';
    import { NgModule, APP_INITIALIZER }       from '@angular/core';
    import { FormsModule }                     from '@angular/forms';
    import { HttpModule, Http}      from '@angular/http';
    import { SocketIoModule, SocketIoConfig }  from 'ng2-socket-io';
    import { SharedModule }                    from './shared/shared.module';
    import { TranslateModule, TranslateLoader} from '@ngx-translate/core';
    import { TranslateHttpLoader}              from '@ngx-translate/http-loader';
    import { AppRoutingModule }                from './app.route';
    import { AppComponent }                    from './app.component';
    import { ChatComponent }                   from './chat/chat.component';
    import { ChatService }                     from './chat/chat.service';
    import { AddressComponent }                from './address/address.component';
    import { HomeComponent }                   from './home/home.component';
    import { SettingService }                  from './shared/service/api/SettingService';
    import { FilterByPipe }                    from './filterPipe';
    import { Ng2ScrollableModule }             from 'ng2-scrollable';
    import { AppConfig }                       from './app.config';

    import {Injectable}                        from '@angular/core';
    import {Observable}                        from 'rxjs/Rx';

    const config: SocketIoConfig = { url: 'http://192.168.1.113:7002', options: {} };

    export function HttpLoaderFactory(http: Http) {
        return new TranslateHttpLoader(http, "http://192.168.1.114:7001/frontend-translation/", "");
    }

    export function SettingServiceFactory(setting: SettingService) {
        return () => setting.load();

        //return true;
    }

    @NgModule({
        declarations: [
            AppComponent,
            ChatComponent,
            AddressComponent,
            HomeComponent,
            FilterByPipe
        ],
        imports: [
            BrowserModule,
            FormsModule,
            HttpModule,
            AppRoutingModule,
            Ng2ScrollableModule,
            SocketIoModule.forRoot(config),
            SharedModule,
            TranslateModule.forRoot({
                loader: {
                    provide   : TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps      : [Http]
                }
            }),
        ],
        providers: [
            ChatService,
            AppConfig,
            SettingService,
            { 
                provide   : APP_INITIALIZER, 
                useFactory: SettingServiceFactory,
                deps      : [SettingService], 
                multi     : true 
            }
            /*SettingService,
            {
                provide   : APP_INITIALIZER,
                useFactory: (setting:SettingService) => () => setting.load(),
                //deps      : SettingService,
                multi     : true
            }*/
        ],
        bootstrap: [AppComponent]
    })

    export class AppModule { }

设置服务.ts 在这个文件中，我从服务器端加载api配置

        import {Injectable} from '@angular/core';
        import {Http, Response} from '@angular/http';
        import {Observable} from 'rxjs/Rx';

        @Injectable()

        export class SettingService {
            public setting;

            constructor(private http: Http) {}

            /**
             * Retrieves the setting details of the website
             * @return {Object} language tranlsation
             */
            public load() 
            {
                return new Promise((resolve, reject) => {
                    this.http
                        .get('http://192.168.1.114:7001/settings')
                        .map( res => res.json() )
                        .catch((error: any):any => {
                            console.log('Configuration file "env.json" could not be read');
                            resolve(true);
                            return Observable.throw(error.json().error || 'Server error');
                        })
                        .subscribe( (envResponse) => {
                            this.setting = envResponse;
                        });
                }); 
            }
        }

当我在下面的代码中替换load（）api服务时，它可以正常工作

    public load() {
        return {
            "test": "works well"
        }
    }

但对于api调用，情况并非如此。 我发现，当我返回json对象时，它可以工作，但当我让api调用返回promise对象时，它不会。我不知道怎么解决这个问题

提前谢谢

---

我的项目有点大，所以我不能把plunker放进去

试着像这样使用promise对象：

 load(): Promise<Object> {
        var promise = this.http.get('./app.json').map(res => res.json()).toPromise();
        promise.then(res=> this.label= res);
        return promise;
    }

load（）：承诺{
var promise=this.http.get（'./app.json'）.map（res=>res.json（））.toPromise（）；
然后（res=>this.label=res）；
回报承诺；
}

谢谢你的回答。在这里，return promise给出了api的json响应或promise object，在我添加这个后，我的owl.carousel无法工作。你能告诉我，我有什么需要改变的吗？