Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

272
Vistas
¿Cómo cargar componentes de forma diferida dentro de una aplicación angular que se usa como componente web? (¿cómo cargar fragmentos del servidor correcto?)

¿Cómo puedo configurar mi aplicación que se ejecuta como un componente web que tiene que cargar fragmentos del servidor que sirvió los scripts para el componente web, en lugar de intentar realizar una carga diferida desde el servidor que solo sirvió la página que contiene el componente web?

El problema con más detalle:

Tengo un componente en mi aplicación angular LazytestComponent que está cargado de forma diferida.

El código para cargarlo:

 const {LazytestComponent} = await import('../lazytest/lazytest.component'); const componentFactory = this.componentFactoryResolver.resolveComponentFactory(LazytestComponent); const instance = this.lazyContainer.createComponent(componentFactory, undefined, this.injector);

Angular genera un fragmento para este componente, al que solo se accede (pestaña de red) cuando se ejecuta este código perezoso.

Esto funciona cuando se ejecuta la aplicación con ng serve.

Ahora esta compilación como un componente web, usando angular/elements:

En el @NgModule:

tenemos:

 ngDoBootstrap() { const webComponent = createCustomElement(LazyApp, {injector: this.injector}); customElements.define('lazyapp', webComponent); }

Esto también funciona, ahora puedo cargar los 3 archivos de script de mi aplicación en otro servidor y usar la <lazyapp> para incluirla en la página.

página html en el otro servidor:

 <html> <head> <script src="http://localhost:8089/lazy/polyfills.js"></script> <script src="http://localhost:8089/lazy/runtime.js"></script> <script src="http://localhost:8089/lazy/main.js"></script> </head> <body> <lazyapp></lazyapp> </body> </html>

La página web se sirve desde localhost: 8080; la aplicación angular se carga desde localhost: 8089.

La aplicación se carga como el componente web, pero luego falla cuando se ejecuta la carga diferida.

En lugar de cargar el fragmento desde "http://localhost:8089/lazy/317.js", intenta cargarlo desde "http://localhost:8080/317.js": este es el servidor que sirve la página html , y por supuesto que no está allí.

¿Cómo puedo decirle a mi aplicación la URL donde puede encontrar sus fragmentos?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda