Angular 1+2 hybrid app with layout/nav in ng1

Question

According to Angular's upgrade guide, a hybrid Angular 1+2 app is set up like so:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(MyAngular2NgModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['myAngular1ModuleName'], {strictDi: true});
});

This code will wire up the application as Angular2, bootstrap the initial component, and THEN wire up the Angular1 app.

The problem is when you have Angular 1 components outside of the <router-outlet>, <ng-view>, or <ui-view>. Angular will try to bootstrap thos components BEFORE Angular1 is wired up. This results in the following error:

TypeError: Cannot read property 'get' of undefined
    at AppHomeDirective.UpgradeComponent (http://localhost:3000/main.bundle.js:12502:39)
    at new AppHomeDirective (http://localhost:3000/main.bundle.js:48154:16)
    at new Wrapper_AppHomeDirective (/AppModule/AppHomeDirective/wrapper.ngfactory.js:7:18)
    at CompiledTemplate.proxyViewClass.View_AppLayoutComponent0.createInternal (/AppModule/AppLayoutComponent/component.ngfactory.js:63:33)
    at CompiledTemplate.proxyViewClass.AppView.create (http://localhost:3000/vendor.bundle.js:32922:21)
    at CompiledTemplate.proxyViewClass.DebugAppView.create (http://localhost:3000/vendor.bundle.js:33178:44)
    at CompiledTemplate.proxyViewClass.View_AppComponent0.createInternal (/AppModule/AppComponent/component.ngfactory.js:23:19)
    at CompiledTemplate.proxyViewClass.AppView.create (http://localhost:3000/vendor.bundle.js:32922:21)
    at CompiledTemplate.proxyViewClass.DebugAppView.create (http://localhost:3000/vendor.bundle.js:33178:44)
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:16:19)
    at CompiledTemplate.proxyViewClass.AppView.createHostView (http://localhost:3000/vendor.bundle.js:32929:21)
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:3000/vendor.bundle.js:33189:52)
    at ComponentFactory.create (http://localhost:3000/vendor.bundle.js:31968:25)
    at ApplicationRef_.bootstrap (http://localhost:3000/vendor.bundle.js:26822:40)
    at http://localhost:3000/vendor.bundle.js:26731:89
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (http://localhost:3000/vendor.bundle.js:26731:42)
    at http://localhost:3000/vendor.bundle.js:26699:27
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:15311:26)
    at Object.onInvoke (http://localhost:3000/vendor.bundle.js:36542:37)
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:15310:32)
    at Zone.run (http://localhost:3000/polyfills.bundle.js:15193:43)
    at http://localhost:3000/polyfills.bundle.js:15581:57
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:15344:35)
    at Object.onInvokeTask (http://localhost:3000/vendor.bundle.js:36533:37)
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:15343:40)
    at Zone.runTask (http://localhost:3000/polyfills.bundle.js:15233:47)
    at drainMicroTaskQueue (http://localhost:3000/polyfills.bundle.js:15480:35)

Here is my Bootstrapped component's HTML:

<section id="panel" className="something">
  <sb-header></sb-header>

  <main class="page-content" ui-view></main>
  <router-outlet></router-outlet>

  <sb-footer></sb-footer>
</section>

<sb-app-home></sb-app-home>
<sb-app-nav></sb-app-nav>

sb-app-home is my Angular 1 element. Here is how it is registered in the Angular 2 module:

@Directive({
    selector: 'sb-app-home'
})
export class AppHomeDirective extends UpgradeComponent {
    constructor(elementRef: ElementRef, injector: Injector) {
        super('sbAppHome', elementRef, injector);
    }
}

@NgModule({
    imports: [
        AppRoutingModule,
        BrowserModule,
        ClientModule,
        ClientRoutingModule,
        CoreModule,
        SubcontractorModule,
        UpgradeModule
    ],
    declarations: [
        AppComponent,
        AppFooterComponent,
        AppHeaderComponent,
        AppLayoutComponent,
        AppNavComponent,
        AppHomeDirective
    ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule {
    constructor(public upgrade: UpgradeModule) { }
}

How do I get Angular 1 components to work outside of a route for nav/layout/etc?