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

Question

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

Uncaught Ошибка: зона уже загружена.

Я использую сценарий сборки, чтобы объединить мои файлы 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 на одной странице.Я понимаю, что angular 7 облегчит весь этот процесс, но мне интересно, как я могу сделать это прямо сейчас.

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

Есть идеи?

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

Answer 1

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

Uncaught Error: Zone already loaded.

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

Answer 2

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

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

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

Answer 3

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

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

Вам необходимо создать другой модуль (например, 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 {
}

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

Answer 4

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

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

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