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.