0

根据 Angular 的升级指南，混合 Angular 1+2 应用程序设置如下：

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});
});

此代码会将应用程序连接为 Angular2，引导初始组件，然后连接 Angular1 应用程序。

问题是当您在<router-outlet>、<ng-view>或<ui-view>. Angular 将在 Angular1 连接之前尝试引导这些组件。这会导致以下错误：

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)

这是我的 Bootstrapped 组件的 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 是我的 Angular 1 元素。以下是它在 Angular 2 模块中的注册方式：

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

如何让 Angular 1 组件在导航/布局/等路径之外工作？

4

0 回答 0