Угловой 6 - Возможно ли использовать две компоненты угловых элементов на одной странице?

Я пытаюсь разместить независимые угловые элементы, которые я могу занять на негладкой веб-странице. Он отлично работает, когда у меня есть только один. Но когда я загружаю два или более на одной странице, я получаю эту ошибку:

Ошибка нечистоты: Зона уже загружена.

Я использую скрипт сборки, чтобы объединить мои файлы dist в один файл js.. и затем удалить это в свой проект

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

Я могу использовать только один из этих js файлов на одной странице. Я понимаю, что угловой 7 облегчит весь этот процесс, но мне интересно, как я могу это сделать прямо сейчас.

Я также попытался обернуть экспортированный js файл в функцию самоисполнения, чтобы попытаться ограничить область применения. Ничего не исправить.

Есть идеи?

Люди смущены тем, что такое угловые элементы. Для уточнения вы можете посмотреть это видео https://www.youtube.com/watch?v=4u9_kdkvTsc. последние несколько минут, в частности, показывают, что угловой элемент экспортируется и включен на не угловую страницу. Я пытаюсь включить несколько элементов на одну страницу.

Ответ 1

Я думаю, вы не должны использовать 2 угловых на одном сайте.

Решения могут быть:

Постройте весь сайт в Angular. Другие части кода могут быть добавлены в приложение.
Используйте подмодули и объедините два приложения с родительским маршрутизатором.
Используйте iframe для каждого углового компонента. Тогда ngzone не столкнется.

Ответ 2

Итак, мои мысли основаны на нашем предыдущем обсуждении. Поскольку каждый комплект, который вы создаете с элементом, загружается в zone.js вы получаете сообщения об ошибках:

Uncaught Error: Zone already loaded.

То, что вы можете и должны учитывать, НЕ объединяет './dist/elementsApp/polyfills.js' в ваш комплект (для каждого './dist/elementsApp/polyfills.js' вами элемента). Вместо этого используйте файл polyfill.js в качестве отдельного импорта в ваш HTML- polyfill.js и импортируйте его перед любыми polyfill.js элементов, которые вы импортируете.

Ответ 3

Google Polymer может быть тем, что вы ищете вместо углового:

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

Библиотека Polymer предоставляет набор функций для создания пользовательских элементов. Эти функции предназначены для упрощения и ускорения создания пользовательских элементов, которые работают как стандартные элементы DOM

Ответ 4

Это решение, которое отлично работает на угловом 5+. для углового 6 я этого не делал. Я сделал это для огромного проекта CMS, и я вставил компоненты на несколько страниц и даже один одинаковый угловой модуль на одной странице. Вы можете использовать один угловой проект.

на вашем сайте, пишите теги компонентов.

Вам нужно создать другой модуль (например, mainHelper) для экспорта каждого выбранного углового тега.

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

в вашем main.ts вы можете импортировать модуль MainHelper и загружать MainHelper.

и ваш FirstModule будет примерно таким:

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

Я надеюсь, это поможет вам.