Hay muchas preguntas sobre StackOverflow, relacionadas con esto, pero ninguna responde con lógica.
Si Index.html se ejecuta primero.
Main.ts o mejor dicho Main.js (después de la transpilación) no puede ejecutarse por sí mismo ya que es un archivo javascript al final, y el archivo Index.html es el que contiene la referencia de main.js en la parte inferior antes del etiqueta del cuerpo de cierre, obviamente, el paquete web hace todo esto.
Ahora, digamos a partir de la configuración que es el archivo Angular.json, el angular sabe que Index es el archivo HTML principal que debe servirse primero.
Por otra parte, como Main.js es desconocido en este punto, no hay forma de que el angular sepa sobre el componente raíz. Y debe arrojar un error durante el análisis, pero no arroja el error. Esto significa que ya conoce app-root, lo que significa que Main.js es el punto de entrada. Pero, ¿cómo es esto posible? ¿Cómo se puede activar un archivo javascript sin una página Html?
primera forma:- Angular.json ---> Main.js--->Index.html (pero, ¿cómo es esto posible? ¿Quién activa Main.js?)
segunda forma:- Angular.json--->Index.html---->Main.js (pero entonces, ¿cómo sabe angular?)
Además, mi pregunta es: si escribo un gran código "ts" dentro del componente de la aplicación, tampoco se ejecutará incluso después de que el flujo llegue a <app-root> ya que angular no tiene idea de qué <app-root> en realidad es hasta que encuentra Main.js en la etiqueta del cuerpo y lo ejecuta y solo entonces podría saberlo.
Puedes probarlo fácilmente. Coloque console.log(1) en index.html y console.log(2) en main.ts . La primera consola será 1 , por lo que index.html se ejecuta primero.
Cuando se abre la aplicación, inicialmente index.html comienza a procesarse y se procesará con <app-root></app-root> vacío, porque la aplicación Angular aún no se ha cargado (puede probar eso fácilmente con CRTL + U , eso es el contenido inicial que ve el navegador). Ese fue el gran cuello de botella para el SEO de las aplicaciones SPA.
Una vez que se carga la aplicación Angular, completará dinámicamente el contenido en <app-root></app-root> de index.html .
ACTUALIZAR
Me perdí la parte por la que no se genera el error cuando index.html llega a la etiqueta <app-root></app-root> . @Ashish lo explicó muy bien en su respuesta (y definitivamente merece un voto a favor), así que solo citaré su respuesta aquí:
La razón es que index.html no es un archivo de plantilla Angular, es html puro, puede colocar cualquier elemento dentro de él y nunca arrojará un error. Pero para los archivos de plantilla Angular, durante el tiempo de compilación verifica si está definido o no y arroja un error de tiempo de compilación si no está definido.
Como se desprende claramente de la respuesta de Nenad, index.html se carga primero, seguido de main.js. Una vez que se carga main.js, representa el componente raíz dentro <app-root> .
Aquí parece que su principal confusión es que Angular encuentra <app-root> en html antes de que main.js/main.ts se cargue o ejecute, entonces, ¿por qué no arroja ningún error o excepción? Si main.js no está cargado, eso significa <app-root> aún no está definido.
La razón es que index.html no es un archivo de plantilla Angular, es html puro, puede colocar cualquier elemento <xyz> dentro de él y nunca arrojará un error. Pero para los archivos de plantilla Angular, durante el tiempo de compilación verifica si <xyz> está definido o no y arroja un error de tiempo de compilación si no está definido.