Angular 2.2.1 hybrid app doesn't bootstrap

Question

I'm following the Upgrading from 1.x guide using Angular 2.2.1. I've stripped down most of my code and now I've got:

main.ts:

import "./polyfills.ts";
import {AppModule} from "./app/app.module";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {UpgradeModule} from "@angular/upgrade/src/aot/upgrade_module";
import {AppComponent} from "./app/app.component";
import {downgradeComponent} from "@angular/upgrade/src/aot/downgrade_component";

declare var document: any;
declare var angular: any;
declare var console: any;

angular
    .module('myNg1RootModule')
    .directive('testAngularTwo', downgradeComponent({
        component: AppComponent
    }));


const options = {}
const bootstrapPromise = platformBrowserDynamic().bootstrapModule(AppModule, options);
bootstrapPromise
    .then(ref => {
        const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
        upgrade.bootstrap(document.body, ['myNg1RootModule']);
    })
    .catch(console.log.bind(console, "Bootstrap Failed: "))

app.module.ts:

import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {AppComponent} from "./app.component";
import {UpgradeModule} from "@angular/upgrade/src/aot/upgrade_module";

@NgModule({
    imports: [
        BrowserModule,
        UpgradeModule
    ],
    declarations:[AppComponent],
    entryComponents: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
    ngDoBootstrap() {
    }
}

When my webapp loads I get the following error:

error_handler.js:47 EXCEPTION: Error in :0:0 caused by: The selector "test-angular-two" did not match any elementsErrorHandler.handleError @ error_handler.js:47(anonymous function) @ application_ref.js:210ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone.js:236ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone.js:227ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
error_handler.js:49 ORIGINAL EXCEPTION: The selector "test-angular-two" did not match any elementsErrorHandler.handleError @ error_handler.js:49(anonymous function) @ application_ref.js:210ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone.js:236ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone.js:227ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
error_handler.js:52 ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:52(anonymous function) @ application_ref.js:210ZoneDelegate.invoke @ zone.js:192onInvoke @ ng_zone.js:236ZoneDelegate.invoke @ zone.js:191Zone.run @ zone.js:85(anonymous function) @ zone.js:451ZoneDelegate.invokeTask @ zone.js:225onInvokeTask @ ng_zone.js:227ZoneDelegate.invokeTask @ zone.js:224Zone.runTask @ zone.js:125drainMicroTaskQueue @ zone.js:357
error_handler.js:53 Error: The selector "test-angular-two" did not match any elements
    at DomRenderer.selectRootElement (http://127.0.0.1:8000/static/teachers-site/dist/main.bundle.js:21882:23)
    at DebugDomRenderer.selectRootElement (http://127.0.0.1:8000/static/teachers-site/dist/main.bundle.js:45264:39)
    at selectOrCreateRenderHostElement (http://127.0.0.1:8000/static/teachers-site/dist/main.bundle.js:13197:32)
    at DebugAppView.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:13:16)
    at DebugAppView.AppView.createHostView (http://127.0.0.1:8000/static/teachers-site/dist/main.bundle.js:46665:21)
    at DebugAppView.createHostView (http://127.0.0.1:8000/static/teachers-site/dist/main.bundle.js:46925:52)
    at ComponentFactory.create (http://127.0.0.1:8000/static/teachers-site/dist/main.bundle.js:20727:25)
    at ApplicationRef_.bootstrap (http://127.0.0.1:8000/static/teachers-site/dist/main.bundle.js:19152:40)
    at http://127.0.0.1:8000/static/teachers-site/dist/main.bundle.js:19061:89
    at Array.forEach (native)

And nothing renders. The then block in main.ts isn't being called. AppComponent uses the selector test-angular-two and other than that it is empty.

What's going on?

Answer 1

I had to remove bootstrap: [AppComponent] from my AppModule decorator.