Dynamic mounted Angular 5 track

Question

I have a dynamic menu mount at the angle. The setup is done as follows:

  <ul class="pcoded-item pcoded-left-item" item-border="none" item-border-style="solid" subitem-border="solid" *ngFor="let asideItem of asideItems.views"
              appAccordionLink group="{{asideItem.module}}">
            <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}" appAccordionLink group="{{asideItem.state}}">
              <a [routerLink]="['/', asideItem.route]" target="{{asideItem.target ? '_blank' : '_self'}}" appAccordionToggle>
                <span class="pcoded-micon">
                  <i class="{{ asideItem.icon}}"></i>
                </span>
                <span class="pcoded-mtext">{{ asideItem.name}}</span>
                <span *ngFor="let asideBadge of asideItem.badge" class="pcoded-badge label label-{{ asideBadge.type }}">{{asideBadge.value}}</span>
                <span class="pcoded-mcaret"></span>
              </a>
            </li>

The assembly is being done in the right way, however my route is not working. Inspecting the elements, which have more than one path (example: cliente/novo) the "/" is being replaced by %2F forming the route as cliente%2Fnovo.

Does anyone have an idea of how to make the angular work with the characters in this way?

Answer 1

I already had this problem in a project and we solved using a ! before the bar on routes, for example:

<a href="#!/cliente/novo">

The ! tells the Angular which is a client-side route, a link to an external route or which has to go on the server will not work.