【问题标题】:Angular 2.2.1 hybrid app doesn't bootstrapAngular 2.2.1 混合应用程序不引导
【发布时间】:2016-11-22 13:40:54
【问题描述】:

我正在使用 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,除此之外它是空的。

发生了什么事?

【问题讨论】:

  • 在您的main.ts 中尝试.directive('test-angular-two', ...)

标签: angular angular2-upgrade


【解决方案1】:

我不得不从我的 AppModule 装饰器中删除 bootstrap: [AppComponent]

【讨论】:

    猜你喜欢
    • 2016-05-23
    • 1970-01-01
    • 2023-03-16
    • 2016-12-26
    • 2018-06-10
    • 2018-11-16
    • 2017-05-15
    • 2020-05-09
    • 1970-01-01
    相关资源
    最近更新 更多