Angular 7 - Open imported component in another module

Question

I’m having a question of how to call a component that is imported into another module.

The situation is as follows: I have the profile component, where I list the company profiles. Each profile has its permissions in the system. In this list, there is a button where Adm clicks to add permissions for that profile, this button acts as a shortcut. This shortcut leads to another component called "Profiling permissions".

In the profile permissions component, I have a component called profile-permissions-form, where I add the permissions for that profile.

I’m using the routerLink at the moment, I just managed to create another form.

Code below: 1- routerLink "add"

<h4 class="m-3"> Perfil</h4>
<nav class="nav">
    <a class="btn btn-success m-3" [routerLink]="['new']">Criar Perfil</a>
</nav>
<table class="table table-light mx-3 text-secondary">
  <thead class="thead-light">
    <tr>
      <th>ID</th>
      <th>Nome do Perfil</th>
      <th>Setor</th>
      <th>Sistema</th>
      <th>Descrição</th>
      <th>Ações</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr *ngFor="let p of perfil">
      <th>{{ p.id_perfil }}</th>
      <th>{{ p.nome_perfil }}</th>
      <th>{{ p.nome_setor }}</th>
      <th>{{ p.nome_sistema }}</th>
      <th>{{ p.descricao }}</th>
      <th><a class="btn btn-sm btn-info mr-2" [routerLink]="[p.id_perfil, 'edit']">Editar</a>
        <a class="btn btn-sm btn-primary mr-2" [routerLink]="[p.id_perfil, 'add']">Acrescentar Permissões</a>
        <button class="btn btn-sm btn-danger" (click)="onDelete(p.id_perfil)">Deletar</button>
      </th>

    </tr>
  </tfoot>
</table>

<ng-template #deleteModal>
  <div class="modal-body text-center">
    <p>Tem certeza que quer deletar?</p>
    <button type="button" class="btn btn-default" (click)="onConfirmDelete()">Sim</button>
    <button type="button" class="btn btn-primary" (click)="onDeclineDelete()">Não</button>
  </div>
</ng-template>

2-routing-module with path pro new form

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PerfilComponent } from './perfil.component';
import { PerfilFormComponent } from './perfil-form/perfil-form.component';
import { PerfilPermissoesPicklistComponent } from '../perfil-permissoes/perfil-permissoes-picklist/perfil-permissoes-picklist.component';

const routes: Routes = [
  { path: '', component: PerfilComponent },
  { path: 'new', component: PerfilFormComponent },
  { path: ':id/edit', component: PerfilFormComponent },
  { path: ':id/add', component: PerfilPermissoesPicklistComponent },


];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PerfilRoutingModule { }

Would anyone know how to use something similar to redirect or something similar to open another component already declared in another module?

Answer 1

Expressly so

 {path: 'RouteName', loadChildren: () => NomeModulo}