2017-04-26 74 views
12

maszynopis: 2.2.0 kątowe: 4.0Angular4 APP_INITIALIZER nie opóźni inicjalizacja

Ja próbuje zapewnić, że ConfigService obiekt został zainicjowany przed uruchomieniem aplikacji dzięki wykorzystaniu APP_INITIALIZER. Znalazłem wiele przykładów, jak to zrobić, jednak żaden z nich nie wydaje się opóźniać inicjalizacji aplikacji. Oto tylko kilka przykładów, które próbowałem wdrożyć.

https://github.com/angular/angular/issues/9047 https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9 Angular2 APP_INITIALIZER not consistent

Oto moja NgModule klasa

export function init(config: ConfigService) { 
    return() => { 
    config.load(); 
    }; 
} 


@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AppRoutingModule 
    ], 
    providers: [ 
    { 
     'provide': APP_INITIALIZER, 
     'useFactory': init, 
     'deps': [ConfigService], 
     'multi': true 
    }, 
    ConfigService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

I tu jest klasa

@Injectable() 
export class ConfigService { 
    private config: ApplicationConfiguration; 

    get apiRoot() { 
    return this.getProperty('apiRoot'); // <--- THIS GETS CALLED FIRST 
    } 

    constructor(private http: Http) { 
    } 

    load(): Promise<any> { 
     console.log('get user called'); 
     const promise = this.http.get('./../../assets/config.json').map((res) => res.json()).toPromise(); 
     promise.then(config => { 
     this.config = config;  // <--- THIS RESOLVES AFTER 
     console.log(this.config); 
     }); 
    return promise; 
    } 

    private getProperty(property: string): any { 
    //noinspection TsLint 
    if (!this.config) { 
     throw new Error(`Attempted to access configuration property before configuration data was loaded, please double check that 'APP_INITIALIZER is properly implemented.`); 
    } 

    if (!this.config[property]) { 
     throw new Error(`Required property ${property} was not defined within the configuration object. Please double check the 
     assets/config.json file`); 
    } 

    return this.config[property]; 
    } 
} 

I przetestować wszystko mam i wstrzykuje ConfigServiceConfigService nto AppComponent z tym.

import { Component } from '@angular/core'; 
import {ConfigService} from './services/config.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
    fullImagePath = '/src/image/avatar.jpeg'; 


    constructor(private config: ConfigService) { 
    config.apiRoot; 
    } 
} 

Odpowiedz

12

Wygląda jakbyś zapomniał zwrócić wartość z fabryki:

export function init(config: ConfigService) { 
    return() => { 
    return config.load(); // add return 
    }; 
} 

lub ten sam kod może być napisany nieco krótko:

export function init(config: ConfigService) { 
    return() => config.load(); 
} 
+1

Tak, to co to było! Dzięki wielkie! – DynaWeb

+0

Dla innych czytających to, tam również nowszy (od teraz) https://juristr.com/blog/2018/01/ng-app-runtime-config/#runtime-configuration – redfox05