web-dev-qa-db-ja.com

Angular 6-同じページで2つのangular要素コンポーネントを使用できますか？

独立したangular非角形のWebページにドロップできる要素をホストしようとしています。1つしかない場合はうまく機能しますが、同じページに2つ以上を読み込むと、私はこのエラーを受け取ります：

不明なエラー：ゾーンは既に読み込まれています。

ビルドスクリプトを使用してdistファイルを1つの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ファイルの1つだけを1ページに配置できます。 angular 7でこのプロセス全体が簡単になりますが、今これをどのように達成できるのか疑問に思っています。

また、エクスポートしたjsファイルを自己実行機能でラップして、スコープを制限しようとしました。残念ながら、何も修正されません。

何か案は？

angular要素が何であるかについて、人々は混乱しているようです。明確にするために、このビデオを見ることができます https://www.youtube.com/watch?v=4u9_kdkvTsc 特に最後の数分間は、angular要素がエクスポートされ、非angularページに含まれています。複数の要素を同じページ。

javascripthtmlangularelementsangular6
28
hamobi

1つのサイトで2 angularを使用しないでください。

ソリューションは次のとおりです。

  • Angularでサイト全体を構築します。コードの他の部分をアプリに追加できます。
  • サブモジュールを使用して、2つのアプリを親ルーターにマージします。
  • 各Angularコンポーネントにiframeを使用します。その後、ngzoneは衝突しません。
6
androbin

それで、これは以前の議論に基づいた私の考えです。要素で作成した各バンドルはzone.jsエラーメッセージが表示されます。

Uncaught Error: Zone already loaded.

考えられることと考慮すべきことは、'./dist/elementsApp/polyfills.js'をバンドルに追加します（作成するバンドル要素ごとに）。代わりに、polyfill.jsファイルをHTMLに個別にインポートし、インポートするすべての要素バンドルの前にインポートします。

4
MichaelSolati

GoogleのPolymerは、角度の代わりに探しているものです：

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

Polymerライブラリは、カスタム要素を作成するための一連の機能を提供します。これらの機能は、標準DOM要素のように機能するカスタム要素を簡単かつ迅速に作成できるように設計されています

2
Edward Newsome

これは、angular 5+。for angular 6でこれを行ったことはありません。巨大なCMSプロジェクトでこれを行いました。複数のページにコンポーネントを挿入し、1つのページに同じ2つの同じangularモジュール。1つのangularプロジェクトを使用できます。

サイトで、コンポーネントタグを記述します。

選択した各angularタグをエクスポートするには、別のモジュール（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モジュールとbootstrap 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 {
}

これがあなたのお役に立てば幸いです。

1
m.akbari