Cómo pasar parámetros renderizados desde el backend al método de arranque angular2

¿Hay alguna manera de pasar los argumentos representados en el backend al método de arranque angular2? Quiero configurar el encabezado http para todas las solicitudes usando BaseRequestOptions con el valor proporcionado desde el backend. Mi main.tsarchivo se ve así:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from "./app.component.ts";

bootstrap(AppComponent);

Encontré cómo pasar estos argumentos al componente raíz ( https://stackoverflow.com/a/35553650/3455681 ), pero lo necesito cuando estoy activando bootstrapel método... ¿Alguna idea?

editar:

Contenido de webpack.config.js:

module.exports = {
  entry: {
    app: "./Scripts/app/main.ts"
  },

  output: {
    filename: "./Scripts/build/[name].js"
  },

  resolve: {
    extensions: ["", ".ts", ".js"]
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
};

Jun 03 '16 17:06 Bodzio

En la versión final de Angular2, el proveedor APP_INITIALIZER se puede utilizar para lograr lo que desea.

Escribí un Gist con un ejemplo completo: https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9

El ejemplo esencial es leer desde archivos JSON, pero se puede cambiar fácilmente para leer desde un punto final REST.

Lo que necesitas es básicamente:

a) Configure APP_INITIALIZER en su archivo de módulo existente:

import { APP_INITIALIZER } from '@angular/core';
import { BackendRequestClass } from './backend.request';
import { HttpModule } from '@angular/http';

...

@NgModule({
    imports: [
        ...
        HttpModule
    ],
    ...
    providers: [
        ...
        ...
        BackendRequestClass,
        { provide: APP_INITIALIZER, useFactory: (config: BackendRequestClass) => () => config.load(), deps: [BackendRequestClass], multi: true }
    ],
    ...
});

Estas líneas llamarán al método load() de la clase BackendRequestClass antes de que se inicie su aplicación.

Asegúrese de configurar "HttpModule" en la sección "importaciones" si desea realizar llamadas http al backend utilizando la biblioteca integrada angular2.

b) Cree una clase y nombre el archivo "backend.request.ts":

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

@Injectable()
export class BackendRequestClass {

    private result: Object = null;

    constructor(private http: Http) {

    }

    public getResult() {
        return this.result;
    }

    public load() {
        return new Promise((resolve, reject) => {
            this.http.get('http://address/of/your/backend/endpoint').map( res => res.json() ).catch((error: any):any => {
                reject(false);
                return Observable.throw(error.json().error || 'Server error');
            }).subscribe( (callResult) => {
                this.result = callResult;
                resolve(true);
            });

        });
    }
}

c) Para leer el contenido de la llamada de backend, solo necesita inyectar BackendRequestClass en cualquier clase de su elección y llamar a getResult(). Ejemplo:

import { BackendRequestClass } from './backend.request';

export class AnyClass {
    constructor(private backendRequest: BackendRequestClass) {
        // note that BackendRequestClass is injected into a private property of AnyClass
    }

    anyMethod() {
        this.backendRequest.getResult(); // This should return the data you want
    }
}

Déjame saber si esto resuelve tu problema.

Nov 02 '2016 12:11 computeiro

En lugar de que su punto de entrada llame al propio bootstrap, puede crear y exportar una función que haga el trabajo:

export function doBootstrap(data: any) {
    platformBrowserDynamic([{provide: Params, useValue: new Params(data)}])
        .bootstrapModule(AppModule)
        .catch(err => console.error(err));
}

También puede colocar esta función en el objeto global, dependiendo de su configuración (webpack/SystemJS). También es compatible con AOT.

Esto tiene el beneficio adicional de retrasar el arranque, cuando tiene sentido. Por ejemplo, cuando recupera estos datos de usuario como una llamada AJAX después de que el usuario completa un formulario. Simplemente llame a la función de arranque exportada con estos datos.

Dec 21 '2016 22:12 André Werlang

La única forma de hacerlo es proporcionar estos valores al definir sus proveedores:

bootstrap(AppComponent, [
  provide(RequestOptions, { useFactory: () => {
    return new CustomRequestOptions(/* parameters here */);
  });
]);

Entonces puedes usar estos parámetros en tu CustomRequestOptionsclase:

export class AppRequestOptions extends BaseRequestOptions {
  constructor(parameters) {
    this.parameters = parameters;
  }
}

Si obtiene estos parámetros de una solicitud AJAX, debe iniciar de forma asincrónica de esta manera:

var appProviders = [ HTTP_PROVIDERS ]

var app = platform(BROWSER_PROVIDERS)
  .application([BROWSER_APP_PROVIDERS, appProviders]);

var http = app.injector.get(Http);
http.get('http://.../some path').flatMap((parameters) => {
  return app.bootstrap(appComponentType, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(/* parameters here */);
    }})
  ]);
}).toPromise();

Vea esta pregunta:

• arranque angular2 con datos de llamadas ajax

Editar

Como tiene sus datos en el HTML, puede usar lo siguiente.

Puede importar una función y llamarla con parámetros.

A continuación se muestra un ejemplo del módulo principal que inicia su aplicación:

import {bootstrap} from '...';
import {provide} from '...';
import {AppComponent} from '...';

export function main(params) {
  bootstrap(AppComponent, [
    provide(RequestOptions, { useFactory: () => {
      return new CustomRequestOptions(params);
    });
  ]);
}

Luego puedes importarlo desde tu página principal HTML de esta manera:

<script>
  var params = {"token": "@User.Token", "xxx": "@User.Yyy"};
  System.import('app/main').then((module) => {
    module.main(params);
  });
</script>

Vea esta pregunta: Pasar valores constantes a Angular desde _layout.cshtml .

Jun 03 '2016 10:06 Thierry Templier