在单个 Ionic + Angular 项目中的两个 ionic 应用程序之间导航答案

【问题标题】：Navigation between two ionic app in a single Ionic + Angular project在单个 Ionic + Angular 项目中的两个 ionic 应用程序之间导航
【发布时间】：2021-01-08 12:37:08
【问题描述】：

我在一个项目下有两个离子应用程序和一个共享的角度库。假设网站（应用程序 1）和仪表板（应用程序 2）是两个离子应用程序。这两个应用程序有两个不同的 UI。我想在这两个应用程序之间导航。当您从 app1 导航到 app2 时，它不应将 app2 作为 app 1 的 ion-router-outlet 中的组件加载，而是作为一个全新的 UI（就像您独立运行 app 2 一样）加载，反之亦然。

我关注 Combining Multiple Angular Applications into a Single One 并更新了我的 ionic 应用程序，如下所示。在应用程序 1 AppModule 中声明了共享模块并导入了 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
    };
  }
}

类似在app 2 AppModule中

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

从应用程序 1 导航到应用程序 2 时（应用程序路由模块页面）

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'
  },
];

通过将最后一条路由（仪表板）添加到应用程序 1 的应用程序路由模块页面，它会继续加载应用程序 1 的主页，但应用程序 1 没有加载，并且该路由也不起作用，并且等待超过 1 分钟后控制台内存不足。

如果我从文件应用程序 1 中删除该路线。我想从应用程序 1 导航到应用程序 2，应用程序 2 不应作为组件加载，而是作为单独的 UI 加载，因为它有自己的 UI（应用程序组件等）。

那么，如何在具有共享 Angular 库的单个项目下从一个 ionic 应用导航到另一个 ionic 应用？

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

根据我的经验，不可能实现这种行为。最佳做法是将应用程序 2 作为单独的应用程序运行在另一个端口（例如 ionic serve --port=8102）中，然后使用

从应用程序 1 将用户重定向到应用程序 2

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

【讨论】：