Angular ,secondary outlet router does not work - angular-routing

Question

Good morning, I have a problem that has been going on for hours and I can not solve.
I have a Container component, and inside this I have buttons that should open secondary routes
the container route is as follows
/path1/path2/:token1/token2
app.path.component.html
<!-- + code !-->
<a [routerLink]="['/',{ outlets: { popup: ['compose'] } }]">Compose</a>
<a [routerLink]="['/',{ outlets: { popupx: ['compose2'] } }]">Compose2</a>
<router-outlet
name="popup"
(activate)='onActivate($event)'
(deactivate)='onDeactivate($event)'></router-outlet>
<router-outlet name="popupx"></router-outlet>
It should be noted that to access path1/*, you must be logged in, for which use an AuthGuard
app.routing.module.ts
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'popup'
},
{
path: 'compose2',
component: TrabajandoComponent,
outlet: 'popupx'
},
{
path: '',canActivate:[AuthGuard],loadChildren:'./home/home.module#HomeModule'
},
{
path: 'auth',
loadChildren:'./authentication/authentication.module#AuthenticationModule'
},
{
path:'admin',
canDeactivate:[AuthGuard],
loadChildren:'./administration/administration.module#AdministrationModule'
},
{
path:'',
redirectTo:'/auth',
pathMatch:"full"
},
{ path: '**', component: PageNotFoundComponent }
When the application is executed, I click on one of the outlets but these are not shown
The component path to get to path1 / path2 /: token1 /: token2 is;
AppComponent
<router-outlet name="primary"></router-outlet>
<app-home>
<app-header></app-header>
<app-container>
.......
<router-outlet></router-outler> :token1/:token2
<app-path>
<!-- + code !-->
<a [routerLink]="['/',{ outlets: { popup: ['compose'] } }]">Compose</a>
<a [routerLink]="['/',{ outlets: { popupx: ['compose2'] } }]">Compose2</a>
<router-outlet
name="popup"
(activate)='onActivate($event)'
(deactivate)='onDeactivate($event)'></router-outlet>
<router-outlet name="popupx"></router-outlet>
</app-path>
.......
......
</app-container>
<app-footer><app-footer>
</app-home>
<!-- end APPcomponent -->
Just like this does not work, but if I punched the secondary routes in the HomeComponent, they work, but they are out of frame
AppComponent
<router-outlet name="primary"></router-outlet>
<app-home>
<app-header></app-header>
<app-container>
.......
<router-outlet></router-outler> :token1/:token2
<app-path>
<!-- + code !-->
<a [routerLink]="['/',{ outlets: { popup: ['compose'] } }]">Compose</a>
<a [routerLink]="['/',{ outlets: { popupx: ['compose2'] } }]">Compose2</a>
</app-path>
.......
......
</app-container>
<app-footer><app-footer>
</app-home>
<!-- This works -->
<router-outlet
name="popup"
(activate)='onActivate($event)'
(deactivate)='onDeactivate($event)'></router-outlet>
<router-outlet name="popupx"></router-outlet>
<!-- end APPcomponent -->
If I define the secondary routes within HomeModule, they are simply not recognized, I have been working on this for hours, and I do not know what I am wrong about.

Answer 1

Try adding path to the module in place of blank e.g.
{
path: 'home',canActivate:[AuthGuard],loadChildren:'./home/home.module#HomeModule'
},