Routing through multiple projects in a single angular app

Question

I have a main application with one child application. I need to show the child application when I click an anchor link which is in the main application. But it's not working.

Project Structure:

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

In my child app's routing module, I added the routes like

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

and child app's app component

<router-outlet></router-outlet>

and in child app's app module, I appended the code below with the existing code

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

So far everything is good. I guess!!

Now in the parent app's routing I added the below codes

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

and in parent app's app module, I imported the below code in the ngmodule part

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

Now, In one of my parent app's component, I have an anchor tag

<a routerLink="/scrapper">

When I click this link, nothing is happening. I mean the Url is changing but the browser shows the parent app not the child app. What am I doing wrong here?

Answer 1

If I understood the problem correctly. You are trying to run two different projects on the same port. But this is not possible, because you define a different workspace and method of operation when building your projects. For further information, I suggest you to review the related article.

If you don't want to deal with two different projects, I think it would be the right way. By combining all your projects under a single application, you can easily direct and load them with Lazy Loading method. For further information, I suggest you to review the related document.

Answer 2

your question got my attention. It is really interesting to have the parent-child project run simultaneously. However, angular is a single page application the only way to solve your problem I think is to structure projects as one by mixing them and importing child project components to app.module and make them run on different routing,

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

Sorry if the hierarchy is not clear, comment if you have any quest!

Answer 3

Angular projects are to develop different applications with single codebase (monorepo concept).

One way to achieve it is using library. Build your second application as library(standard module with internal routing) and import it in another application as lib module and add it to routing of 1st application.

For 2nd application to run independently, create another application in projects folder and import library into AppModule.