帶有延遲加載模塊的Angular 5路由器不起作用

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'

如果我在根模塊中導入功能模塊，則一切正常。 有什么想法我做錯了嗎？

Answer 1

根據您的配置，路由期望動態值為:cube_id 。 因此，基本上，您的路徑應為-

epic/1/import-data

檢查您的routerLink並傳遞routerLink的值。

例如：

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

Answer 2

嘗試在/ epic之后添加“ cube_id”，因為您的路由配置包含ID。 因此，您的網址將變為史詩/ {{id}} /導入數據。 如果您不想傳遞任何ID，只需創建另一個沒有ID的路由即可，如果您想處理與路由相關的此類錯誤，只需將此代碼添加到app-routing.module.ts文件中即可。

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

Answer 3

感謝Sunil Singh和Pooja Pawar，我為此添加了一個解決方案：

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>