How can i use full fledged angular app as pilet in piral

Question

I have a existing angular app with it's own routing and multiple components that are used with each other. Using piral-ng converter i can convert an angular component to be used in piral but if an angular component is using another angular component, i am getting error.

Is there any way to use full fledged angular app as pilet

Answer 1

In order to use other Angular components you'll need to have them all defined in the same module.

So if you only do:

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

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

then using something else inside AngularPage will not work.

However, if you define all those things in one module such as

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

then it would work, given that you properly tell piral-ng to use that module:

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

This way using OtherComponent with its registered tag works as they are properly defined and share the same Angular module.