Is there a way to run a React app inside an Angular site without the routes conflicting?-CodePudding

I have an Angular 14 application that has the build files for a React application being served in a folder alongside it, as such.

dist
|_apps
     |_react-app-build
|
|
|_main.js, runtime.js, etc

my routing-module is as follows

  {path: '', component: HomepageComponent},
  {path: 'projects', component: ProjectsPageComponent},
  {path: 'contact', component: ContactPageComponent},
  {path: '**', redirectTo: "/"},

I need to be able to access the react app, but its routes keep being picked up by the Angular router and redirected to the root. Is there any way to force the Angular router to completely ignore the routes for the React application (/apps/react-app-build/*)?

So far I have tried setting the base href to something other than the root <base href="/site">

as well as adding

@NgModule({
  imports: [RouterModule.forRoot(routes, 
    { 
      ---
      useHash: true
      ---
    })],
  exports: [RouterModule]
})

to the routing module, all to no avail.

CodePudding user response：

Try Webcomponents or Run it inside an iFrame

CodePudding user response：

Read more on Webpack Module Federation. It allows you to share separate JavaScript applications using lazy loaded routes.