[Angular] app.componentを介せず任意のコンポーネントを呼び出したい

Question

---

[前置き]

Angularのsrc/appディレクトリ以下は概ね以下のような感じになっており、仮にa.component.tsをsrc内のindex.htmlに表示させたい時、チュートリアルではまずapp.component.htmlに読み込んでからindex.htmlに表示させます。

src
├── index.html
└── app

app/
├── b/
│   └── b.component.ts
├── a/
│   └── a.component.ts
├── app.component.ts
└── app.module.ts

---

[本題]

######app.component.htmlに読み込ませずそのままindex.html内でa.component.tsを呼び出すことは可能でしょうか？

---

[内容]

a.component.tsを呼び出したいならa.module.tsのdeclarations配列に自動追記されたa.componentのAクラス名が記載されていればapp.component.html内では呼び出せます。
しかし、index.htmlではapp.componentしか呼び出すことはできません。

bootstrap配列に表示させたいcomponentを複数入れて立ち上げることもできるそうですが、バグが多く、読み込んだ順番によって表示されたりされなかったりと不安定です。

app-rootタグ内に全てを収納する仕様は本番環境でhtmlソースの全表示がjsを介することになると思うので、描画スピードがjsありきになってしまうことからパフォーマンスチューニングができないのでapp-rootタグに全てを収納することは避けたいです。

Answer 1

質問の意図で不明な点はいくつかありますが・・・。
基本的に、Angularは、SPAでありますので、
質問のように、app.component.html（他のapp.ファイル）を通すのがありきのものでありますので、
appを通さないで表示、となると、そもそもAngularを使用する意味が消失するように思います。

app-rootタグ内に全てを収納する仕様は本番環境でhtmlソースの全表示がjsを介することになると思うので、描画スピードがjsありきになってしまうことからパフォーマンスチューニングができないのでapp-rootタグに全てを収納することは避けたいです。

そもそも、JSによって、統合的にSPAを表現することができるのが、Angularの性質になりますので、
JSありきは外すことはできません。

ただし、本質問の要件がapp-root要素内に、全てのコンポーネントを読み込む必要があると勘違いしている、という内容であれば、それを解消する方法・仕様がAngularにはしっかりと備わってます。
ルーティング機能を使うことです。
これは、各コンポーネントを、一つのページとして扱い、
各コンポーネント個々で、ビューの処理やテンプレートを構築できる、というものです。
これを使えば、app-root内に全てのコンポーネントを読み込む必要は全くなく、
各ルートにおいて、URL別に表示に使うコンポーネントを分ける、といったことなどが可能になります。

詳しい使用方法などは、割愛させていただきます。
（なかなか膨大になるため）
ご自身で、Angular ルーティング　などで検索してみましょう。