Angular2錯誤：無法匹配任何路由。 網址細分：

Question

我試圖將每個模塊的所有路由組合在一個routing.ts中。 但我得到錯誤Error: Cannot match any routes. URL Segment:'job' Error: Cannot match any routes. URL Segment:'job' ..我遵循angular2的編碼風格教程..我的代碼有什么問題？

下面是我在routing.ts代碼

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JobComponent } from './job.component';
import { JobfileComponent } from './jobfile/jobfile.component';
import { JobcompletedComponent } from './jobcompleted/jobcompleted.component';
import { FullLayoutComponent } from '../layouts/full-layout.component';

const routes: Routes = [
  { path: '',redirectTo: 'job',pathMatch: 'full' },
  { path: '',component: FullLayoutComponent,data: {title: 'Job Assignment' },
    children: [ {path: 'job',loadChildren: './job/job.module#JobModule' }, ]
  },
  { path: '',redirectTo: 'jobfile',pathMatch: 'full' },
  { path: '',component: FullLayoutComponent,data: {title: 'Job File' },
    children: [ {path: 'jobfile',loadChildren: './job/jobfile/jobfile.module#JobfileModule' }, ]

  },
  { path: '',redirectTo: 'jobcompleted',pathMatch: 'full' },
  { path: '',component: FullLayoutComponent,data: {title: 'Job Completed' },
    children: [ {path: 'jobcompleted',loadChildren: './job/jobcompleted/jobcompleted.module#JobcompletedModule' }, ]

  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: [ JobComponent, JobfileComponent, JobcompletedComponent, FullLayoutComponent ]
})
export class JobRoutingModule {}

Answer 1

我會試着解釋出了什么問題，我們可以做些什么來解決這個問題。

＃1： ''路線被重定向到超過1 路線 。 它產生了歧義，Angular路由器無法決定重定向到哪里 。 我假設''需要重定向到'/jobs' 。

＃2 ：使用loadChildren的路由定義不應包含component屬性。

＃3 ：濫用FullLayoutComponent作為模板。 您可以使用AppComponent由Angular應用程序引導，在app.component.html使用router-outlet並讓您的模板正常工作。

嘗試修復您的文件/目錄結構並修復您的模塊代碼，如下所述。

文件/目錄結構：

|- app.module.ts
|- app.component.ts (copy the ../layouts/full-layout.component into this file)
|- job\
    |- job.module.ts
    |- jobfile\
        |- jobfile.module.ts
    |- jobcompleted\
        |- jobcompleted.module.ts

job.module

import { NgModule } from '@angular/core`;
import { Routes, RouterModule } from '@angular/router';
import { JobComponent } from './job.component';

const jobRoutes: Routes = [
    {
        path: '',
        component: JobComponent,
        data: {title: 'Job Assignment' },
    }
];

@NgModule({
    declarations: [
        JobComponent
    ],
    imports: [
        RouterModule.forChild(jobRoutes)
    ]
})
class JobModule { }

jobfile.module

import { NgModule } from '@angular/core`;
import { Routes, RouterModule } from '@angular/router';
import { JobfileComponent } from './jobfile/jobfile.component';

const jobFileRoutes: Routes = [
    {
        path: '',
        component: JobfileComponent,
        data: {title: 'Job File' },
    }
];

@NgModule({
    declarations: [
        JobfileComponent
    ],
    imports: [
        RouterModule.forChild(jobFileRoutes)
    ]
})
class JobFileModule { }

jobcompleted.module

import { NgModule } from '@angular/core`;
import { Routes, RouterModule } from '@angular/router';
import { JobcompletedComponent } from './jobcompleted/jobcompleted.component';

const jobCompletedRoutes: Routes = [
    {
        path: '',
        component: JobcompletedComponent,
        data: {title: 'Job File' },
    }
];

@NgModule({
    declarations: [
        JobcompletedComponent
    ],
    imports: [
        RouterModule.forChild(jobCompletedRoutes)
    ]
})
class JobCompletedModule { }

app.module

import { NgModule } from '@angular/core`;
import { Routes, RouterModule } from '@angular/router';
// OTHER IMPORTS
// ...
import { AppComponent } from './app.component.ts';

const routes: Routes = [
    { path: 'job', loadChildren: './job/job.module#JobModule' }
    { path: 'jobfile', loadChildren: './job/jobfile/jobfile.module#JobfileModule' }
    { path: 'jobcompleted', loadChildren: './job/jobcompleted/jobcompleted.module#JobcompletedModule' }
    { path: '', redirectTo: 'job', pathMatch: 'full' },
];

@NgModule({
    declarations: [
        // OTHER COMPONENTS
        // ...
        AppComponent
    ],
    imports: [
        // OTHER MODULES
        // ...
        RouterModule.forRoot(routes)
    ],
    // PROVIDERS, ETC ADD BELOW
    // ...
    bootstrap: [AppComponent]
})
class AppModule { }

最后，您需要提供app.component.ts和app.component.html 。 基本上，從FullLayoutComponent復制核心以更新這些文件。

確保在app.component.html包含<router-outlet></router-outlet> 。 Angular路由器將使用此outlet來呈現JobComponent ， JobfileComponent ， JobcompletedComponent 。

希望答案是有幫助的，快樂的Angular'ing;）