piral - 本格的な角度アプリをピラルのピレットとして使用するにはどうすればよいですか

Question

独自のルーティングと相互に使用される複数のコンポーネントを備えた既存のAngularアプリがあります。piral-ng コンバーターを使用すると、角度コンポーネントを変換して piral で使用できますが、角度コンポーネントが別の角度コンポーネントを使用している場合、エラーが発生します。

本格的な角度アプリをピレットとして使用する方法はありますか

Answer 1

他の Angular コンポーネントを使用するには、それらをすべて同じモジュールで定義する必要があります。

したがって、次のことだけを行う場合：

import { PiletApi } from 'my-piral-instance';
import { AngularPage } from './AngularPage';

export function setup(piral: PiletApi) {
  piral.registerPage('/sample', piral.fromNg(AngularPage));
}

その場合、内部で他のものを使用しても機能しAngularPageません。

ただし、これらすべてを 1 つのモジュールで定義すると、次のようになります。

import { NgModule } from '@angular/core';
import { SharedModule } from 'piral-ng/common';
import { AngularPage } from './AngularPage';
import { OtherComponent } from './OtherComponent';

@NgModule({
  imports: [SharedModule],
  declarations: [AngularPage, OtherComponent],
  exports: [AngularPage, OtherComponent]
})
export class AppModule {}

piral-ngそのモジュールを使用するように適切に指示すれば、それは機能します。

import { PiletApi } from 'my-piral-instance';
import { AppModule } from './AppModule';
import { AngularPage } from './AngularPage';

export function setup(piral: PiletApi) {
  // this "teaches" Piral about the given module
  piral.defineNgModule(AppModule);

  // since we export the AngularPage from the defined module
  // Piral will use the AppModule for bootstrapping the Ng app
  piral.registerPage('/sample', piral.fromNg(AngularPage));
}

このようOtherComponentに登録済みのタグを使用すると、それらが適切に定義され、同じ Angular モジュールを共有するため機能します。