javascript - Cómo cargar una aplicación Angular2 solo cuando un elemento DOM está presente

Tengo este código, que está funcionando perfectamente, en mi archivo main.ts (el archivo de arranque de la aplicación):

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Pero solo quiero iniciar la aplicación cuando esté presente el selector principal (porque si no, se genera el error clásico de selector no encontrado), así que pensé que algo como el siguiente código funcionaría:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

document.addEventListener('DOMContentLoaded', function() {
  var shouldBootstrap = document.getElementById("my-app-selector");
  if (shouldBootstrap) {
    platformBrowserDynamic().bootstrapModule(AppModule);
  }
});

Desafortunadamente no está funcionando, supongo que se debe a la combinación de JavaScript y TypeScript aquí. ¿Hay alguna manera de escuchar un evento y también la presencia de un elemento DOM para evitar que Angular2 se inicie cuando no sea necesario?

Optaría por este enfoque porque sirvo el JavaScript empaquetado con webpack.

¡Gracias!

Respuesta #1

Intenta console.log(document.getElementById("my-app-selector")) y observa qué se devuelve cuando el selector está presente o no. Luego construye tu declaración if según lo que puedas o no esperar:

if (document.getElementById("my-app-selector") !== undefined){
  platformBrowserDynamic().bootstrapModule(AppModule);
}

O (usa let y no var en TypeScript)

let shouldBootstrap = document.getElementById("my-app-selector");

Respuesta #2

si estás usando webpack, solo agrega tu archivo bundle después de la etiqueta selector.

Error: no se encontró el selector my-app

 <body>
 <script src="../dist/app.bundle.js"></script>
 <my-app>Loading...</my-app>
 </body>

Trabajando

 <body>
 <my-app>Loading...</my-app>
 <script src="../dist/app.bundle.js"></script>
 </body>