Как загрузить данные с сервера до того как загрузится приложение?

Question

[Coder321]

Пришу не большую прожку на Angular 2 с целью изучения. Возник вопрос, как мне загрузить что то с сервера до того как загрузится приложение? То есть, у меня есть токен, мне нужно отослать его на серввер, проверить юзера и отослать назад данные этого юзера. С серверной часть проблем ни каких, а вот как сделать на клменте как то не могу придумать. Или цеплять guard на основной модуль или resolve. Как будет правильно?

Comments

[Владимир]

А что в это время будет делать посетитель ?

[Coder321]

Владимир: смотреть на прелоадер)

Answer 1

[Алексей Зуев]

Вы можете использовать специально созданный для этого токен APP_INITIALIZER
Благодаря нему приложение не будет стартовать пока не получите данные.
Делается это примерно следующим образом.
Регистрируете в провайдерах глобальный сервис и этот токен

providers: [
  GlobalService,
  {
    provide: APP_INITIALIZER,
    useFactory: (service: GlobalService) => () => service.init(),
    deps: [GlobalService], multi: true
  }
],

Сервис примерно такой

@Injectable()
export class GlobalService {
    data: any;
    constructor(private http: Http) { }
    init(): Promise<any> {
        var promise = this.http.get('src/data.json').map(res => res.json()).toPromise();
        promise.then(data => this.data = data);
        return promise;
    }
}

И потом получаете к примеру в корневом компоненте свои данные

export class AppComponent {
  constructor(private service: GlobalService) {
    console.log(service.data);
  }
}

Живой пример

Comments

[Coder321]

Огромное спасибо. Давно не возвращался к этому вопросу. Ваш вариант работает прекрасно. Еще раз спасибо)

Answer 2

[Александр Коротаев]

Добавить resolver к корневому стейту

Answer 3

[antkhnvsk]

в main.ts:

fetch('//your-url.com/api?token=' + token, { method: 'get' })
	.then(apiData => {
		platformBrowserDynamic([
			provide('apiData', { useValue: apiData })
		]).bootstrapModule(AppModule)
	})

в app.component.ts или любом другом компоненте:

export class AppComponent{
	constructor( @Inject('apiData') apiData) {
		console.log(apiData)
		// use your apiData here...
	}
}

Comments

[Coder321]

Как то это слишком костыльно выглядит)

[antkhnvsk]

Если вы хотите получить какие-то данные до загрузки angular приложения, то это в любом случае будет костыльно, относительно архитектуры angular2. Если вопрос конкретно в аутентификации, то копать следует официальный мануал по Routing и AuthGuard. Но в этом случае запросы будут ходить уже из загруженного angular-приложения.

[Coder321]

antkhnvsk: я понял, спасибо. Сделал через guard

Answer 4

[ITZver]

Через APP_INITIALIZER. Подробнее написал в своем блоге
Выполнение кода до старта приложения через APP_INI...