Configuración de tiempo de ejecución para aplicaciones angulares de 6+ -- javascript campo con angular campo con deployment campo con angular-cli campo con web-deployment camp Relacionados El problema

Runtime Configuration for Angular 6+ Applications


7
vote

problema

Español

¿Cuál es la mejor práctica recomendada para cargar la configuración específica del entorno durante el tiempo de ejecución de una aplicación angular? La documentación angular menciona el uso de App_Initializer, pero aún no es lo suficientemente temprano en el proceso de carga para cosas como la configuración de tiempo de ejecución de los módulos importados que hacen uso de la convención .forroot ().

En mi caso de uso, tengo un servicio de autenticación integrado e importado a través de un módulo central, que es importado por el módulo de la aplicación. La biblioteca de autenticación que estoy usando (la Angular-OAUTH2-OIDC Library) Permite la configuración de El anexo automático de los tokens de acceso durante la importancia al importar el módulo (consulte este segmento ). Dado que hay restricciones en el entorno de construcción, estoy trabajando con eso solo me permite producir un paquete de compilación común para implementar en todos los entornos, no puedo establecer valores dinámicamente usando diferentes archivos entianto.

Una idea inicial es usar la API de recuperación en la página index.html para cargar un archivo JSON que contiene la configuración en una variable global, pero como la llamada es asíncrona, existe la posibilidad de que la configuración no se cargará completamente cuando Se produce la importación del módulo central.

Original en ingles

What is the recommended best practice for loading environment specific configuration during runtime of an Angular application? The Angular documentation mentions the use of APP_INITIALIZER, but that is still not early enough in the load process for things such as runtime configuration of imported modules that make use of the .forRoot() convention.

In my use case, I have an authentication service built and imported via a Core module, which is imported by the App module. The authentication library I am using (the angular-oauth2-oidc library) allows for configuration of the automatic appending of access tokens during when importing the module (see this segment). Since there are constraints in the build environment I am working with that only allows me to produce one common build package to deploy to all environments, I am unable to dynamically set values by using different environment.ts files.

One initial idea is to use the fetch API on the index.html page to load a JSON file containing the configuration onto a global variable, but since the call is asynchronous, there is a chance the configuration will not be fully loaded when the import of the Core module occurs.

              

Lista de respuestas

2
 
vote

Esto fue parte de mi configuración de configuración para llevar mi aplicación a través de la tubería de construcción y me tomó días. Terminé en una solución utilizando el APP_INITIALIZER Cargando un servicio de descanso y cree un AppConfigService para mi aplicación. Estoy usando el mismo Biblioteca angular-OAUTH2-OIDC .

Mi solución para este problema fue no configurar el método OAuthmodule en su método Forroot (). Se llama antes de las configuraciones a través de APP_INITIALIZER están disponibles: esto resulta en valores indefinidos cuando se aplica al objeto de configuración dado al método SET @last_mnth := 0, @year := 2010; LOAD DATA INFILE '/path/to/file.txt' INTO TABLE myTable FIELDS SEPARATED BY ' ' (description, @d) SET date = CONCAT( LEFT(CONCAT( @mnth := SUBSTRING_INDEX(@d, ':', 1), @date := SUBSTRING_INDEX(@d, ':', -1), @year := @year + ( @mnth < @last_mnth OR (@mnth = @last_mnth AND @date < @date) ), @last_mnth := @mnth ), 0), CONCAT_WS('-', @year, @mnth, @date) ) ; 3 .

Pero necesitamos un token en el encabezado HTTP. Por lo tanto, usé un interceptor HTTP para el sujeto al token como se describe aquí . El truco es configurar el OauthModuleconfig en la fábrica. Obviamente, esto se llama después de que se inicialice la aplicación.

configure el módulo

  @NgModule({   imports: [     // no config here     OAuthModule.forRoot(),   ],   providers: [    {     provide: HTTP_INTERCEPTORS,     useFactory: authenticationInterceptorFactory,     deps: [OAuthStorage, AuthenticationErrorHandler, OAuthModuleConfig],     multi: true    }  ] })   

fábrica para interceptor

  const authenticationInterceptorFactory = (oAuthService: OAuthStorage, authenticationErrorHandler: AuthenticationErrorHandler, oAuthModuleConfig: OAuthModuleConfig) => { const config = {  resourceServer: {   allowedUrls: [    // Include config settings here instead    AppConfigService.settings.apiURL,    AppConfigService.settings.anotherApiURL,   ]   sendAccessToken: true  }, } return new AuthenticationInterceptor(oAuthService, authenticationErrorHandler, config); };   
 

This was part of my config setup to bring my app through the build pipeline and took me days. I ended up in a solution using the APP_INITIALIZER loading a REST service and build a AppConfigService for my App. I am using the same angular-oauth2-oidc library.

My Solution for this issue was not to setup the OAuthModule in its forRoot() method. It is called before any configs via APP_INITIALIZER are available - this results in undefined values when applied to the config object given to the forRoot() Method.

But we need a token in the http header. So I used a http interceptor for the attaching of the token like described here. The trick is to setup the OAuthModuleConfig in the factory. Obviously this is called after the app is initialized.

Configure Module

@NgModule({   imports: [     // no config here     OAuthModule.forRoot(),   ],   providers: [    {     provide: HTTP_INTERCEPTORS,     useFactory: authenticationInterceptorFactory,     deps: [OAuthStorage, AuthenticationErrorHandler, OAuthModuleConfig],     multi: true    }  ] }) 

Factory for interceptor

const authenticationInterceptorFactory = (oAuthService: OAuthStorage, authenticationErrorHandler: AuthenticationErrorHandler, oAuthModuleConfig: OAuthModuleConfig) => { const config = {  resourceServer: {   allowedUrls: [    // Include config settings here instead    AppConfigService.settings.apiURL,    AppConfigService.settings.anotherApiURL,   ]   sendAccessToken: true  }, } return new AuthenticationInterceptor(oAuthService, authenticationErrorHandler, config); }; 
 
 
     
     

Relacionados problema

37  Visual Studio 2010 Web Publish Falta un archivo  ( Visual studio 2010 web publish missing a file ) 
Estoy descubriendo que al publicar un sitio web de Visual Studio no está cargando uno de mis archivos. Es un archivo de afeitar con una extensión '.cshtml' (¡...

1  Desplegando una guerra al servidor Tomcat con Maven 1.1  ( Deploying a war to tomcat server with maven 1 1 ) 
¿Alguien sabe una manera de configurar un objetivo de Maven para implementar en un servidor TOMCAT después de que se ejecute una compilación? Sé que esto es p...

0  Despliegue de trabajo de servicio web en la máquina local, pero en otra máquina lanza un error de tiempo de ejecución  ( Deployment of web service work on local machine but on another machine throws ru ) 
He hecho un servicio web que está funcionando bien en mi máquina local. En otra máquina, muestra WSDL y descripción de los métodos cuando la URL está en la ...

0  ¿Cómo puedo convertir un archivo JSON analizado de JSON y luego volver a JSON?  ( How can i convert a parsed json file from json then back to json ) 
Estoy generando un archivo JSON analizado con PowerShell Convertto-JSON. Todo está bien hasta aquí, porque ahora quiero convertirlo de JSON, use los valores y...

2  Cómo minificar JS de dos servicios independientes para trabajar juntos en la frontend  ( How to minify js from two independent services to work together on the frontend ) 
Tengo un backend 'modular' donde dos servicios / repos diferentes están sirviendo al lado del cliente JS al mismo cliente. Necesito que los JS de ambas fuente...

3  Despliegue ASP.NET (instalador web)  ( Asp net deployment web installer ) 
Necesito implementar un instalador del sitio web para mi aplicación ASP.NET. El instalador se manejará siguiendo características - implementar la aplicació...

3  implementar múltiples instancias de la aplicación mojoliciosa  ( Deploy multiple instances of mojolicious app ) 
He desarrollado una aplicación mojoliciosa en Windows XP, Strawberry Perl 5.14.2 y versión Mojolicious 3.84. Para un alto rendimiento, quiero crear múltiples ...

0  Ejecutando un proyecto DJANGO para localhost o en Internet usando Apache y Modwsgi  ( Running a django project for localhost or over internet using apache and modwsgi ) 
Estoy tratando de ejecutar un proyecto Django (1.4 o posterior) para que se pueda acceder a Internet. Tengo instalado Apache y Mod-WSGI. Simplemente ingresar ...

-1  Problema de conexión SQL Server en clases de Java  ( Sql server connection issue in java classes ) 
SQL Server se ejecuta en la aplicación Java pero no la aplicación web (servlet) NetBeans ¿Qué es el problema? ...

1  Tomcat Remote desplegar con idea intelij  ( Tomcat remote deploy with intellj idea ) 
Estoy tratando de implementar mi aplicación en un servidor TOMCAT que está dentro de un contenedor de Docker. Estoy usando la idea de Intellij y lo tengo para...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos