Передача параметров сервера ngModule после обновления RC5

Я пытаюсь передать параметры в свое приложение. Начиная с RC5, я должен использовать ngModule. (это решение: Передача параметров сервера asp.net в Angular 2 приложение больше не работает с RC5)

Как передать параметры в ngModule?

Здесь plunker, чтобы проиллюстрировать проблему: Plunker

index.html

<script>
  System.import('app').then(module =>   module.main('This is RIGHT'),
                console.error.bind(console)
            );
</script>

main.ts:

import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';
import { provide } from '@angular/core';
import { AppModule } from './app.module';

export function main(test: string) {

  browserDynamicPlatform().bootstrapModule(AppModule, [{ providers: provide('Test', { useValue: test, }) }]);
}

app.module.ts

import { NgModule, provide }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { AppComponent }       from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    provide('Test', { useValue: 'This is WRONG' })
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Ответ 1

Обновление 2

Реализация

Webpack вы можете найти здесь Передача параметров сервера в ngModule с помощью Angular 2 и webpack

Systemjs

Обновление 1:

Мы можем передавать данные в свойстве extraProviders функции browserDynamicPlatform:

main.ts

export function main(test: string) {
  browserDynamicPlatform([{provide: 'Test', useValue: test }])
    .bootstrapModule(AppModule);
}

Таким образом, функция createAppModule в app.module.ts является избыточной.

Plunker 2.0 Final

Предыдущая версия

Для RC.5 вы можете добавить метод (т.е. createAppModule) в app.module.ts следующим образом:

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

export function createAppModule(test) {
  @NgModule({
    imports: [BrowserModule],
    providers: [
      { provide: 'Test', useValue: test },
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  class AppModule { }

  return AppModule;
}

Таким образом, ваш основной модуль будет выглядеть следующим образом:

main.ts

import { browserDynamicPlatform } from '@angular/platform-browser-dynamic';

import { createAppModule } from './app.module';

export function main(test: string) {
  browserDynamicPlatform().bootstrapModule(createAppModule(test));
}

И ваша начальная точка не изменится:

index.html

<script>
  System.import('app')
    .then(module => module.main('This is RIGHT'),
       console.error.bind(console)
    );
</script>

Вот Пример плунжера

Ответ 2

Обратитесь к приведенной ниже работе, которая работает в angular2 2.0.1

Загрузка параметров на стороне сервера перед загрузкой компонентов

Защитите свой маршрут с помощью класса CanActivate, используя Promise, который загружает настройки конфигурации, также должен работать.

Используйте приложение appSettings.service с функцией, аналогичной функции, возвращающей обещание

getAppSettings(): Promise<any> {
        var observable = this.http.get(this.ApiUrl, { headers: this.headers })
            .map((response: Response) => {
                var res = response.json();
                return res;
            });

        observable.subscribe(config => {
        this.config= config;
        console.log(this.config)
        });
        return observable.toPromise();  
    }

И защита CanActivate, как показано ниже:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AppSettingsService } from './appsettings.service';

@Injectable()
export class CanActivateViaAuthGuard implements CanActivate {

//router: Router
    constructor(private appSettingsService: AppSettingsService)
    {
    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
               return this.appSettingsService.getAppSettings().then(() => { 
    return true });
   }
}

Это обеспечит доступность ваших настроек при создании соответствующих компонентов. (использование APP_INITIALIZER не ограничивало вызывающий конструктор, поэтому мне пришлось использовать эту технику. Также убедитесь, что вы не экспортируете все компоненты в экспорт: [] в модуле)

Чтобы защитить маршруты и обеспечить загрузку параметров перед вызовом конструкторов, используйте обычную опцию canActivate в пути определения маршрута

 path: 'abc',
 component: AbcComponent,
 canActivate: [CanActivateViaAuthGuard]

Инициализация настроек appsettings должна произойти до того, как вызывается конструктор для AbcComponent, это проверено и работает в Angular 2.0.1