Angulaire 6 - Est-il possible d'utiliser deux composants d'éléments angulaires sur la même page?

Question

Je suis en train d'hôte indépendante éléments anguleux que je peux laisser dans une situation de non-angulaire de la page web. C'est génial de travailler alors que je viens juste.. mais lorsque je charge deux ou plus sur la même page, j'obtiens cette erreur:

Erreur non interceptée: Horaire déjà chargé.

Je suis à l'aide d'un script de compilation pour concaténer mon dist fichiers en un seul fichier js.. et puis à la baisse que dans mon projet

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)
})

Je ne pouvez avoir un de ces fichiers js sur une seule page. Je comprends angulaire 7 fera tout ce processus plus facile, mais je me demande comment je peux accomplir ce droit maintenant.

J'ai aussi essayé d'emballage de mon exporté fichier js dans une auto-exécution de la fonction pour essayer de limiter la portée.. Ne résout pas tout malheureusement.

Des idées?

Les gens semblent confus au sujet de ce angulaire éléments. Pour clarification, vous pouvez regarder cette vidéo https://www.youtube.com/watch?v=4u9_kdkvTsc. depuis quelques minutes, en particulier de montrer angulaire de l'élément exporté et figurant sur une non angulaire de la page. J'essaie de comprendre plusieurs éléments sur une même page.

Answer 1

Je pense que vous ne devriez pas utiliser 2 angulaire sur un site.

Les solutions peuvent être :

• Construire l'ensemble du site en angulaire. D'autres parties du code peuvent être ajoutées à l'application.
• Utilisez des sous-modules et fusionnez les deux applications avec un routeur parent.
• Utilisez iframe pour chaque composant angulaire. Alors ngzone ne se heurtera pas.

Answer 2

Voici donc mes réflexions basées sur notre discussion antérieure. Parce que chaque paquet que vous créez avec un élément se charge dans vous obtenez des `` messages d'erreur:

Ce que vous pouvez et devez considérer n'est pas concatiniser le dans votre paquet (pour chaque élément que vous emballez vous produisez). Utilisez plutôt le fichier comme une importation distincte dans votre HTML, et l'importer avant tous les faisceaux d'éléments que vous importez.

Answer 3

Le polymère de Google peut être ce que vous recherchez au lieu d'angulaire :

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

La bibliothèque Polymer fournit un ensemble de fonctionnalités pour créer des éléments personnalisés. Ces caractéristiques sont conçues pour rendre plus facile et plus rapide de faire des éléments personnalisés qui fonctionnent comme des éléments DOM standard

Answer 4

C'est une solution qui fonctionne parfaitement sur angulaire de 5+. angulaire 6 je n'ai pas fait cela. Je l'ai fait pour un énorme projet CMS et j'ai inséré des composants de plusieurs pages et même 2 même angulaire module dans une page. Vous pouvez utiliser un angulaires du projet.

dans votre site, écrire les étiquettes des composants.

Vous avez besoin de créer un autre module (par exemple mainHelper) à l'exportation de chaque angulaire des balises.

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);
        }
      }
    });
  }
}

dans votre main.ts, vous pouvez importer des MainHelper module et de l'amorçage de l'MainHelper.

et votre FirstModule serait quelque chose comme ceci:

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 {
}

J'espère que cela vous aide.