Селектор my-app-test не соответствует ни одному элементу

Я пытаюсь пользователь angular2 в моем приложении. Проблема в том, что я конкатенирую весь код компонентов для углового в одном большом файле, который я импортирую на странице index.html (так что он будет присутствовать на всех страницах).

Но я всегда получаю The selector "my-app-test" did not match any elements потому что, очевидно, в index.html нет <my-app-text/>. В угловом 1 я могу объявить директиву, а затем эта директива была создана только тогда, когда она была на текущей странице.

Как я могу архивировать одну и ту же вещь в угловом2, чтобы угловой не пытался найти правильный селектор, но наоборот создавал экземпляр компонента только тогда, когда он был найден на странице?

благодаря

На данный момент у меня есть следующий код:

(function() {
    var AppComponent =
        ng.core.Component({
            selector: 'my-app-test',
            template: '<h1>My First Angular 2 App</h1>'
        })
            .Class({
                constructor: function() {}
            });

    document.addEventListener('DOMContentLoaded', function() {
        ng.platformBrowserDynamic.bootstrap(AppComponent);
    });
}());