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>、またはの外側に Angular 1 コンポーネントがある場合です<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) { }
}

nav/layout/etc のルートの外で Angular 1 コンポーネントを動作させるにはどうすればよいですか?

4

0 に答える 0