In my main.ts file, the code below is functioning perfectly:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
However, I want to make sure that the app is only bootstrapped when the main selector is present. To achieve this, I tried the following approach:
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);
}
});
Unfortunately, this solution is not working, possibly due to the mix of JavaScript and TypeScript in this scenario. Is there a method to detect an event and check for the existence of a DOM element to prevent unnecessary Angular2 bootstrapping?
I am considering this approach because I serve the bundled JavaScript with webpack.
Thank you!