Angular 2.2.1混合应用程序没有自举

时间:2016-11-22 13:40:54

标签: angular angular2-upgrade

我正在使用Angular 2.2.1遵循Upgrading from 1.x指南。我已经删除了大部分代码,现在我已经得到了:

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() {
    }
}

当我的webapp加载时,我收到以下错误:

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)

没有任何渲染。 main.ts中的then块未被调用。  AppComponent使用选择器test-angular-two,而不是它是空的。

发生了什么?

1 个答案:

答案 0 :(得分:0)

我必须从我的bootstrap: [AppComponent]装饰器中删除AppModule