在单个 angular 应用程序中路由多个项目

Question

我有一个主应用程序和一个子应用程序。当我单击主应用程序中的锚 link 时，我需要显示子应用程序。但是没用。

项目结构：

one-app
-project
--scrapper
---e2e
---src
-src

在我的子应用程序的路由模块中，我添加了像

这样的路由

const routes: Routes = [
  { path: '', component: HomeComponent}
];

和子应用的应用组件

<router-outlet></router-outlet>

在子应用的应用模块中，我将现有代码附加到下面的代码中

@NgModule({})
export class ScrapperSharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: AppModule,
      providers: []
    };
  }
}

到目前为止一切都很好。我猜！！

现在在父应用程序的路由中我添加了以下代码

{ path: 'scrapper',
    loadChildren: '../../projects/scrapper/src/app/app.module#ScrapperSharedModule'
}

并且在父应用程序的应用程序模块中，我在 ngmodule 部分导入了以下代码

imports: [
...
ScrapperSharedModule.forRoot(),
]

现在，在我父应用程序的一个组件中，我有一个锚标记

<a routerLink="/scrapper">

当我点击这个 link 时，没有任何反应。我的意思是 Url 正在改变，但浏览器显示父应用程序而不是子应用程序。我在这里做错了什么？

Answer 1

如果我理解正确的话。您正在尝试运行同一端口上的两个不同项目。但这是不可能的，因为您在构建项目时定义了不同的工作空间和操作方法。如需更多信息，我建议您查看 related article.

如果你不想处理两个不同的项目，我认为这是正确的方法。通过将所有项目组合在一个应用程序下，您可以轻松地使用 Lazy Loading method. For further information, I suggest you to review the related document.

引导和加载它们

Answer 2

Angular 项目是使用单一代码库（monorepo 概念）开发不同的应用程序。

实现它的一种方法是使用 library。将您的第二个应用程序构建为库（具有内部路由的标准模块）并将其作为 lib 模块导入另一个应用程序并将其添加到第一个应用程序的路由中。

对于运行独立的第二个应用程序，在项目文件夹中创建另一个应用程序并将库导入 AppModule。

Answer 3

你的问题引起了我的注意。同时拥有亲子项目运行真的很有意思。但是，angular 是一个单页应用程序，我认为解决问题的唯一方法是通过混合项目并将子项目组件导入 app.module 并将它们运行不同的路由，

main app
---e2e
---src
-----app
------components
----------yourmainprojectcomponents
----------childprojectcomponents

层次不清晰请见谅，有求必答！

Answer 4

根据描述，基本上您希望您的两个应用程序都需要在 SPA 模式下工作。

在这种情况下，您可以尝试按照本文 (https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527)

中的建议设置您的两个应用程序

在单个 angular 应用程序中路由多个项目

Routing through multiple projects in a single angular app

angular

routing

angular-ui-router

angular2-routing