Use of multiple under Angular Material (8) is not working

Question

Attempting to redefine the problem since I have some more information.

I am working with Angular Material (8) - along with the MDBootstrap package. I have 2 areas. One is an area that deals with logins/authorizations (AUTH) and the other is a "dashboard" area (that is to be accessed after login) (DASHBOARD).

Here is the code that is working with AUTH and MYDASHBOARD - AUTH is being interpreted by Angular as being the primary. I named the second router-outlet definition mydashboard

app.component.html

<router-outlet></router-outlet>
<router-outlet name="mydashboard"></router-outlet>

app-routing.module.ts

const routes: Routes = [
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },
  { path: 'dashboard', loadChildren: './kdc/dashboard/dashboard.module#DashboardModule'  },
  { path: '**' , component: PageNotFoundComponent }

];

authorization-routing.module.ts

export const routesAuth : Routes = [
    { path: 'login' , component: LoginComponent },
    { path: 'register' , component: RegisterComponent },
    { path: 'forgot-pass' , component: ForgotPasswordComponent },
];

NOTE: EVERYTHING FOR (AUTH) IS WORKING - THERE IS NOTHING WRONG WITH THIS PART. THE PROBLEM IS WITH (DASHBOARD)

After logging in, the processing goes to the dashboard. I used the code below to send it to the dashboard

login.component.ts

onLoginSubmit() {
[... snip ...]
        if (this.in_results.count == 0)
          this.errorMsg = 'EMail/Login ID not found';
        else
          // go ahead and navigate to the HOME page
          this.router.navigate(['/dashboard']);  
[... snip ...]
}

dashboard-routing.module.ts

const dashboardroutes: Routes = [
    { path: 'clients', component: ClientsComponent, outlet: 'contentarea'  },
    { path: '', component: HomeComponent, outlet:'mydashboard' },
];

NOTE: EVERYTHING EXECUTES FINE HERE, THE DASHBOARD DOES COME UP AND IT IS STORED IN <router-outlet name="mydashboard"></router-outlet> THE PROBLEM COMES WITH USING THE MENU.

When clicking on the "Clients" area, my expectation is that the "Client Information" will be placed into <router-outlet name="contentarea"> </router-outlet> because of how home.component.html was defined.

home.component.html

[... snip ...]
                       <!-- Collapsible link -->
                            <mdb-accordion-item-body>
                                <ul>
                                    <li>  <a [routerLink]="[{ outlets: { primary: 'mydashboard', contentarea : 'clients' }}]" mdbWavesEffect> Press for clients</a></li> 
                                    <li><a href="#" mdbWavesEffect>Link 2</a></li>
                                </ul>
                            </mdb-accordion-item-body>
                        </mdb-accordion-item>

[... snip ...]
<!--Main Layout-->
<main>
    <div class="container-fluid mt-5">
        <router-outlet name="contentarea"> </router-outlet>
    </div>
</main>
<!--/Main layout-->



[... snip ...]

NOTE: The processing does not go to: <router-outlet name="contentarea"> </router-outlet>

INSTEAD

It goes to: <router-outlet></router-outlet> located on page: app.component.html

QUESTION: Why does it do this? Am I doing it properly? Is there a better way?

I have looked at the following pieces of documentation

https://stackoverflow.com/questions/53702674/children-routing-not-working-and-application-redirects-to-the-404-page
https://www.tektutorialshub.com/angular/angular-child-routes-nested-routes/
https://stackoverflow.com/questions/52824639/nested-router-outlet-with-name-not-working
https://www.techiediaries.com/angular-router-multiple-outlets/
https://angular.io/guide/router

but have not found anything as of yet.

Any information or ideas would be greatly appreciated.

TIA

You have a spelling error inside your routerLink, it should be `dashboard` instead of `dashboaard` — cyr_x, Feb 19 '20 at 09:02

score 1 · Answer 1 · answered Feb 19 '20 at 09:14

1

Did you add <router-outlet></router-outlet> in your parent html component?

answered Feb 19 '20 at 09:14

Konstantin Kim

209
1
4
18

Thanks for the response. The "top" component being used (the filename) is: "app.component.html". The instructions being followed are here: https://www.techiediaries.com/angular-router-multiple-outlets/ The "sub-file" being used is "home.component.html" (it is in the picture above) – Casey Harrils Feb 19 '20 at 09:49
I also found that the relationships need to be parent-child – Casey Harrils Feb 20 '20 at 12:04

Casey Harrils · Accepted Answer · 2020-02-25T01:01:37.310

After research (I am new to Angular pretty much), I found that I needed to the following to resolve my problem:

Since I am working with "Lazy Loading", I made sure that the Routes defined in the xxx-routing.ts files were properly imported into the xxx-module.ts files (I missed this for the Dashboard setup)

I changed the Dashboard setup so that Children were used:

app-routing.module.ts

const routes: Routes = [
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },

  { path: 'dashboard', loadChildren: './kdc/dashboard/dashboard.module#DashboardModule'  },
  { path: '**' , component: PageNotFoundComponent }
];

dashboard.routing.module.ts

export const dashboardroutes: Routes = [

    { path: 'landing/:id', component: HomeComponent,
        children: [
            { path: 'clients', component: ClientsComponent, outlet: 'contentarea'  },
        ]},
];

I played around with different ways to see if the routers were working. It was during the "playaround time", that I found an answer that worked for me.

<!-- WORKS : http://localhost:4200/dashboard/landing/(contentarea:clients) -->

<!-- NOTES: GOES TO BASE HOME PAGE FOR DASHBOARD: http://localhost:4200/dashboard/landing -->

<!-- 404 RESULT: http://localhost:4200/dashboard/landing/landing 
    <li>  <a [routerLink]="['landing',  { outlets: { contentarea : ['clients']}}] " mdbWavesEffect> Press for clients</a></li> -->

<!-- the one below WORKED:  http://localhost:4200/dashboard/landing/(contentarea:clients) -->
        <li>  <a [routerLink]="[{ outlets: { contentarea : ['clients']}}] " mdbWavesEffect> Press for clients</a></li>

I got rid of the <router-outlet name="mydashboard"><router-outlet> since it did not seem to be needed. I thought that the routers could work in a "sibling" relationship. Have learned that the relationship between different router-outlet definitions is more of a "parent-child" relationship.

Use of multiple under Angular Material (8) is not working

2 Answers2