Angular - more than 1 routes how to organize

Question

I am trying to organize my app component for a new project and I have some issue with routing in Angular 8:

In general I have a landing page which is my first page. When I want to login in landing page I want to redirect user to /login without using main router outlet : As you can see below:

    const routes: Routes = [
      { path: '', component: MainComponent },
      { path: 'signup', component: SignupComponent },
      { path: 'login', component: LoginComponent },
      { path: '**', component: PageNotFoundComponent },
     ]

And this is my AppComponent:

<app-top-nav-bar></app-top-nav-bar> <router-outlet></router-outlet> <app-footer></app-footer>

Now I want to know, how can I add second router inside MainComponent. When I open the app, I want to see mainComponent with it's own module and router. I have second module and router. I want to modularize my app : see this https://dzone.com/articles/howto-modularize-an-angular-application-by-example

Answer 1

It should be

<router-outlet></router-outlet>

Try changing your component to

<topnavbar></topnavbar>
<router-outlet></router-outlet>
<footer></footer>

Answer 2

If I understand the question correctly, you can use children :

const routes: Routes = [
  { path: '', component: MainComponent, 
    children: [ 
      { path: '', redirectTo: 'mypath', pathMatch: 'full' }
      { path: 'mypath', component: MyComponent }
    ] 
  },
  { path: 'signup', component: SignupComponent },
  { path: 'login', component: LoginComponent },
  { path: '**', component: PageNotFoundComponent },
]

Then just add a <router-outlet></router-outlet> tag inside your MainComponent html in the place where you wish to show the child component.