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并传递cube_id的值。

ex：

<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>

带有延迟加载模块的Angular 5路由器不起作用

3 个答案: