Angular 5 Router с ленивыми загрузочными модулями не работает

Question

У меня есть приложение, и я создаю структуру, чтобы иметь функциональные модули с собственными маршрутами:

// Вот функциональный модуль

RouterModule.forChild([
    {
        path: ':cube_id/import-data',
        component: ImportDataComponent,
        canActivate: [CUBE_GUARD]
    },
    {
        path: ':cube_id/consolidation',
        component: ConsolidationComponent,
        canActivate: [CUBE_GUARD]
    }
     ....

// Маршрутизация приложения:

const appRoutes: Routes = [

    {
        path: 'epic',
        loadChildren: './traitement/traitement.module#TraitementModule'
    },
    { 
        path: 'not-authorized', 
        component: NotAuthorizedComponent 
    },
    {
        path: '',
        component: HomeComponent,
        pathMatch: 'full',
        canActivate: [ HOME_GUARD ],
        children: [

        ]
    }
];


@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, { 
            useHash: true
        })
    ],
    providers: [
        CurrentUserService,
        GuardFactory.createGuard(HOME_GUARD, homeGuard)
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {

}

И в корневом модуле приложения я импортировал AppRoutingModule.

Когда я пытаюсь получить доступ к элементу из меню, я получаю эту ошибку:

core.js:1449 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'epic/import-data'
Error: Cannot match any routes. URL Segment: 'epic/import-data'

Если я импортирую Feature Features в Root Module, все работает нормально. Есть идеи, что я делаю не так?

Answer 1

Попробуйте добавить «cube_id» после / epic, поскольку ваша конфигурация маршрута содержит идентификатор.Таким образом, ваш URL станет epic / {{id}} / import-data.Если вы не хотите передавать какой-либо идентификатор, просто создайте другой маршрут без идентификатора. Если вы хотите обрабатывать такие ошибки, связанные с маршрутизацией, просто добавьте этот код в файл app-routing.module.ts.

export class AppRoutingModule{ 
  constructor(private router : Router){
    this.router.errorHandler = (error: any) =>{
      showSomeErrorPage();`enter code here`
      return false;
    }
  }
}

Answer 2

Благодаря Сунил Сингху и Пудже Павару я решил это, добавив:

const appRoutes: Routes = [

    {
        path: ':cube_id',
        loadChildren: './traitement/traitement.module#TraitementModule'
    },

А в виду:

  <li routerLinkActive="current-item" *requiresAuthorization="['prof', 'journal']">
    <a [routerLink]="['prof', 'prof', 'journal']" id="j_prof">
      <i class="fa fa-angle-right"></i> 
      {{ 'MENU.prof.journal' | translate }}
    </a>
  </li>

Answer 3

Согласно вашей конфигурации, маршрутизация ожидает динамическое значение :cube_id. Так что в основном ваш путь должен быть как -

epic/1/import-data

Проверьте ваш routerLink и передайте значение для cube_id.

например:

<a [routerLink]="['/epic', id, 'import-data']">Home</a>