Custom Routes for new component in ngx admin akveo theme

[beelaal]

I want to add new child routes for an new component with AKVEO theme , all other built in routes are working fine but my custom components route is not working in (pages-routing.module) its redirecting on dashboard.

{ path: 'movers', loadChildren: './movers/movers.module#MoversModule', },

[nnixaa]

Hi @beelaal, could you provide a reproducible example?

[mo-norant]

Same problem here. The page keeps loading. even with correct routing

[evanRoberto]

@nnixaa To produce the problem, instead of creating component/module under pages we create the path outside it

const routes: Routes = [
  { path: 'login', component: LoginComponent, pathMatch: 'full' }, // This one doesnt work
  { path: ':lang', component: AppComponent,
    children: [
      { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
      { path: '', redirectTo: 'pages', pathMatch: 'prefix' },
      {path: '**', redirectTo: 'pages', pathMatch: 'prefix'},
    ],
  },
  { path: '', redirectTo: '/en/pages', pathMatch: 'prefix' },
  { path: '**', redirectTo: '/en/pages', pathMatch: 'prefix' },
];

[Schmaga]

I ran into the same problem trying to create a completely separate module that can be reached using routing. After lots of trial and error and routing debugging i noticed that the problem didn't have anything to do with routing, but somehow with the way that the template seems to enable/disable the page-loading spinner. The page would be loaded correctly in the background, but not displayed because the spinner was still on top of it.

Once I moved the spinner markup inside the ngx-app component tag's body, it all worked smoothly:

  <ngx-app>

      <style>@-webkit-keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.spinner{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1003;background: #000000;overflow:hidden}  .spinner div:first-child{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;box-shadow:0 3px 3px 0 rgba(255,56,106,1);transform:translate3d(0,0,0);animation:spin 2s linear infinite}  .spinner div:first-child:after,.spinner div:first-child:before{content:'';position:absolute;border-radius:50%}  .spinner div:first-child:before{top:5px;left:5px;right:5px;bottom:5px;box-shadow:0 3px 3px 0 rgb(255, 228, 32);-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}  .spinner div:first-child:after{top:15px;left:15px;right:15px;bottom:15px;box-shadow:0 3px 3px 0 rgba(61, 175, 255,1);animation:spin 1.5s linear infinite}</style>
      <div id="nb-global-spinner" class="spinner">
        <div class="blob blob-0"></div>
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
        <div class="blob blob-3"></div>
        <div class="blob blob-4"></div>
        <div class="blob blob-5"></div>
      </div>

    </ngx-app>

I did not research what the underlying problem was, as I was so relieved to have some kind of solution and thought I just had used some part of the template in a wrong way. Maybe yours is the same issue?

[nnixaa]

Hi Guys, the issue here is that your pages are required to have <nb-layout> placed on it. Otherwise, there is no code executed that could hide the spinner. Another solution would be to inject NbSpinnerService https://akveo.github.io/nebular/#/docs/services/spinnerservice on your own and call load method, which will execute all tasks and hide the spinner in the end. Hope it helps!

[Schmaga]

I checked, but both the Modules I created have a root similar to this:

import { Component } from '@angular/core';
import { MENU_ITEMS } from './customer-menu';

@Component({
  selector: 'ngx-customer-pages',
  template: `
    <ngx-sample-layout>
      <nb-menu [items]="menu"></nb-menu>
      <router-outlet></router-outlet>
    </ngx-sample-layout>
  `,
})
export class CustomerComponent {
  menu = MENU_ITEMS;
}

I simply modified and copied the existing sample application, and the sample layout component does include the nb-layout. So there must be another issue here somewhere.

[nnixaa]

Hey @Schmaga could you please post a reproducible example to http://stackblitz.com?

[Schmaga]

Hi @nnixaa, I tried to import ngx-admin into stackblitz.com, but failed using different sources. I tried using the master head, I tried the 2.2.0 release commit, and I tried the tree/ngx-starter-kit. To clarify: I tried to use the github import function of Stackblitz.

Neither of them work, and all of them with different errors :) Do you have any idea why that could be or do you know what I might be doing wrong? Using your github would speed things up a bit, so I don't need to manually import a lot of files into Stackblitz.

Once I have a little more time I will try to clone it locally and move the files manually into Stackblitz, but I fear the result might be the same.

Update: No chance at the moment to get it running on Stackblitz. Or I am doing it wrong... :) Might try something else once I get around to it.

[nnixaa]

@Schmaga thanks for your help! There is an issue on stackblitz https://github.com/stackblitz/core/issues/492, hopefully, they will resolve it soon or provide some guidelines on how to debug it on our side.

[lucianopimenta]

I have the same problem customizing a module outside of "pages".

I really liked the template, very good, but I'm not able to create new modules or components and correctly execute the routes.

I have tried all the examples above and other issues, but none solved.