javascript - navigationend - Angular 6: ¿Es posible usar dos componentes de elementos angulares en la misma página?

router events angular 6

Question

Estoy intentando alojar elementos angulares independientes que puedo colocar en una página web no angular. Funciona muy bien cuando solo tengo uno ... pero cuando cargo dos o más en la misma página, aparece este error:

Error no detectado: Zona ya cargada.

Estoy usando un script de compilación para concatenar mis archivos dist en un archivo js ... y luego dejarlo caer en mi proyecto

const fs = require(''fs-extra'')
const concat = require(''concat'')


const files = [
    ''./dist/elementsApp/runtime.js'',
    ''./dist/elementsApp/polyfills.js'',
    ''./dist/elementsApp/scripts.js'',
    ''./dist/elementsApp/main.js'',
]


fs.ensureDir(''elements'')
.then(() => {
  console.log(''success!'')
  concat(files, ''elements/include-me-somewhere-else.js'')
})
.catch(err => {
  console.error(err)
})

Solo puedo tener uno de estos archivos js en una página. Entiendo que angular 7 facilitará todo este proceso, pero me pregunto cómo puedo lograrlo ahora mismo.

También he intentado envolver mi archivo js exportado en una función de ejecución automática para intentar limitar el alcance. Desafortunadamente, no soluciona nada.

¿Algunas ideas?

La gente parece confundida acerca de lo que son los elementos angulares. Para aclaraciones, puede ver este video https://www.youtube.com/watch?v=4u9_kdkvTsc . Los últimos minutos, en particular, muestran un elemento angular que se exporta e incluye en una página no angular. Estoy tratando de incluir varios elementos en la misma página.

Answer 1

Así que aquí están mis pensamientos basados ​​en nuestra discusión anterior. Debido a que cada paquete que creas con un elemento se está cargando en zone.js , estás recibiendo mensajes de error:

Uncaught Error: Zone already loaded.

Lo que puede y debe considerar NO es ''./dist/elementsApp/polyfills.js'' el ''./dist/elementsApp/polyfills.js'' en su paquete (para cada elemento que ''./dist/elementsApp/polyfills.js'' ). En su lugar, use el archivo polyfill.js como una importación independiente en su HTML, e impórtelo antes de cualquier paquete de elementos que esté importando.

Answer 2

Creo que no deberías usar 2 angulares en un sitio.

Las soluciones pueden ser:

• Construye todo el sitio en Angular. Otras partes del código se pueden agregar a la aplicación.
• Use los submódulos y combine las dos aplicaciones con un enrutador principal.
• Utilice iframe para cada componente angular. Entonces ngzone no chocará.

Answer 3

El polímero de Google puede ser lo que estás buscando en lugar de angular:

https://www.polymer-project.org/

La biblioteca de polímeros proporciona un conjunto de características para crear elementos personalizados. Estas características están diseñadas para que sea más fácil y rápido hacer que los elementos personalizados funcionen como los elementos DOM estándar.

Answer 4

Esta es una solución que funciona perfectamente en angular 5+. Para angular 6 no he hecho esto. He hecho esto para un gran proyecto de CMS e inserté componentes en varias páginas e incluso en el mismo módulo angular en una sola página. Puedes usar un proyecto angular.

en su sitio, escriba etiquetas de componentes.

Debe crear otro módulo (por ejemplo mainHelper) para exportar cada etiqueta angular seleccionada.

import {NgModule, ApplicationRef, ComponentFactoryResolver} from ''@angular/core'';
import {FirstModule} from ''YOUR MODULE PATH'';
import {FirstComponent} from ''YOU COMPONENT PATH'';
import {SecondModule} from ''YOUR MODULE PATH'';
import {SecondComponent} from ''YOU COMPONENT PATH'';


@NgModule({
  imports: [
    FirstModule,
    SecondModule
  ],
})

export class MainHelper {
  constructor(private resolver: ComponentFactoryResolver) {
  }
  components = [
FirstComponent,
SecondComponent
  ];


  ngDoBootstrap(ref: ApplicationRef) {
    this.components.forEach((component) => {
      const factory = this.resolver.resolveComponentFactory(component);
      const elements = document.getElementsByTagName(factory.selector); //get angular tags on your main website
      if (elements.length > 0) {
        if (elements.length > 1) {
          const selector = factory.selector;
          for (let i = 0; i < elements.length; i++) {
            elements[i].id = selector + ''-'' + i;
            (<any>factory).factory.selector = ''#'' + elements[i].id;
            ref.bootstrap((<any>factory).factory);
            // elements[i].id = '''';
          }
          (<any>factory).factory.selector = selector;
        } else {
          ref.bootstrap(component);
        }
      }
    });
  }
}

en sus main.ts, puede importar el módulo MainHelper y arrancar el MainHelper.

y tu FirstModule sería algo como esto:

import {NgModule} from ''@angular/core'';
import {CommonModule} from ''@angular/common'';
import {BrowserModule} from ''@angular/platform-browser''; 
import {FirstComponent} from ''./first.component'';
import {AnotherComponent} from ''./another/another.component'';
@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
  ],
  providers: [
    SampleService // you need provide your services for all the modules
  ],
  declarations: [
    FirstComponent,
    AnotherComponent,
  ],
  bootstrap: [FirstComponent] // important
})
export class ECommerceModule {
}

Espero que esto te ayude.