angular

Angularで一つのページに複数のbootstrapを埋め込む

古いサイトを順次angularに入れ替えていくなどの目的で、
ページのある部分だけをangular化したい場合があります。

その入れ替え部分が一箇所だけなら普通にbootstrapとなるComponentのselectorタグを埋め込めばいいのですが、複数箇所に個別にangular埋め込みたくなった場合それは可能なのか?

-> 結論から言うと、可能です。
ただしちょっと注意が必要です。

html
<html>
  <head>...</head>
  <body>
    :
    <angular-root1></angular-root1>
    :
    <angular-root2></angular-root2>
    :
  </body>
</html>

のように書いてangular-root1、angular-root2をselectorに持つcomponentをbootstrapに指定したmoduleもjsを読み込めば、それぞれについてangularが埋め込まれて動作します。

cssのセレクタ競合問題

componentでstyle(css)を使うと、

<html>
  <head>
  :
  <style>
  .classA[_ngcontent-c0] {...}
  .classA[_ngcontent-c1] {...}
  </style>
  </head>
  <body>
    :
    <angular-root1>
        <div _ngcontent-c0 class="classA">
        :
        </div>
    </angular-root1>
    :
    <angular-root2></angular-root2>
    :
  </body>
</html>

のようにタグ埋め込みかつ、_ngcontent-c*というプロパティを用いたセレクタ指定でstyleが埋め込まれます。
通常の複数のcomponentに同じ名前のCSSクラスがある場合、このプロパティのサフィックスに違う値が割り振られるためにスタイルの競合が起こらないようになっています。

しかし、別のアプリケーションとして実行すると、このサフィックスはそれぞれで振られてしまうため、競合が発生していまいます。

回避方法

綺麗な回避方法は(もしかしたらあるかも知れませんが)見つけられていません。

パーツ埋め込みで使うcomponentのCSSクラス名は競合しなさそうな物を使うなどして下さい。
(というか、昔はみんなその辺り気をつけて命名してましたね。)