Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

271
Views
¿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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!