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

Question

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

项目结构:

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(),
]

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

<a routerLink="/scrapper">

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

Answer 1

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

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