在单个 Angular 应用程序中路由多个项目答案

【问题标题】：Routing through multiple projects in a single angular app在单个 Angular 应用程序中路由多个项目
【发布时间】：2019-11-17 04:39:57
【问题描述】：

我有一个带有一个子应用程序的主应用程序。当我单击主应用程序中的锚链接时，我需要显示子应用程序。但它不起作用。

项目结构：

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">

当我点击这个链接时，什么都没有发生。我的意思是 Url 正在更改，但浏览器显示父应用程序而不是子应用程序。我在这里做错了什么？

【问题讨论】：

你使用什么 Angular 版本？
角度 8.3。它是最新版本
看看here，最近导入语句发生了变化。 loadChildren: () => import('src/app/modules/rooms/rooms.module').then(m => m.RoomsModule)
你能添加一个堆栈闪电战的例子吗？ :)

标签： angular routing angular-ui-router angular2-routing

【解决方案1】：

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

在这种情况下，您可以尝试按照本文 (https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527) 中的建议设置两个应用程序

【讨论】：

【解决方案2】：

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

如果您不想处理两个不同的项目，我认为这是正确的方法。通过将所有项目组合在一个应用程序下，您可以使用Lazy Loading 方法轻松引导和加载它们。如需更多信息，建议您查看related document。

【讨论】：

我明白了。但是，如果我们无法运行它们，您能否解释一下在一个项目中拥有多个项目的目的是什么？为什么 Angular 允许我们创建多个项目？
Angular 支持多项目创建，因此您可以在所有项目中使用共享资源（css、图像、服务、模块）和库。
我同意@Necip。 Angular 允许您出于“易用性”的唯一目的进行多项目创建，因为没有更好的术语。但是在同一个端口上运行两个项目是没有意义的，所以 Angular 不允许你这样做。

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

你的问题引起了我的注意。让父子项目同时运行真的很有趣。但是，Angular 是一个单页应用程序，我认为解决您的问题的唯一方法是通过混合它们并将子项目组件导入到 app.module 并让它们在不同的路由上运行来将项目构建为一个项目，

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

层级不清晰请多多包涵，有任何追求请留言！

【讨论】：