Navigation between two ionic app in a single Ionic + Angular project

Question

I have two ionic apps and one shared angular library under a projet. Suppose website (app 1) & dashboard (app 2) are two ionic apps. These two apps are having two different UIs. I want to navigate between these two apps. When you navigate from app1 to app2, it should load app2 not as a component in ion-router-outlet of app 1, but as a whole new UI (like you run app 2 independently) and vice versa.

I followed Combining Multiple Angular Applications into a Single One and updated my ionic apps as bellow. In app 1 AppModule declared shared module and also imported App2SharedModule

import { App2SharedModule } from '../../../dashboard/src/app/app.module';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    MenuComponentModule,
    HttpClientModule,
    App2SharedModule.forRoot(), // imported App2 Shared Module
    HttpClientXsrfModule.withOptions({
      cookieName: 'XSRF_TOKEN',
      headerName: 'X-XSRF-TOKEN'
    })
  ],
  providers: provider,
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
@NgModule({})
export class App1SharedModule{
  static forRoot(): ModuleWithProviders<App1SharedModule> {
    return {
      ngModule: AppModule,
      providers: provider
    };
  }
}

Similiarily in app 2 AppModule

@NgModule({})
export class App2SharedModule{
  static forRoot(): ModuleWithProviders<App2SharedModule> {
    return {
      ngModule: AppModule,
      providers: provider
    };
  }
}

when navigating from app 1 to app 2 (App-routing module page)

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'account/login',
    loadChildren: () => import('./views/account/login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'dashboard', // this should navigate to app2
    loadChildren: '../../../dashboard/src/app/app.module#App2SharedModule'
  },
];

What happens is by adding the last route (dashboard) in to app 1 app-routing module page, it keeps loading the home page of app 1, but app 1 doesn't load and the route also doesn't work and it consoles out of memory after waiting more than 1 minute.

If I remove that route from the file app 1 works. I want to navigate from app 1 to app2 and app 2 should not load as a component, but as a seperate UI since it has its own UI (app-component and so on).

So, how to navigate from one ionic app to another ionic app under single project with shared angular lib?

ARH · Accepted Answer · 2021-01-10 17:37:43Z

1

From my experience, it is not possible to acheive such behaviour. The best practice is to run app 2 as a seperate app in another port say (ionic serve --port=8102) and then from app 1 redirect users to app 2 using

window.open('http://localhost:8102');

answered Jan 10, 2021 at 17:37

ARH

1,7163 gold badges29 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Navigation between two ionic app in a single Ionic + Angular project

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related