Angular2 Error: Cannot match any routes. URL Segment:

Question

I tried to combined all my routing of each module in one routing.ts. But i got error Error: Cannot match any routes. URL Segment:'job' Error: Cannot match any routes. URL Segment:'job' .. I've follow the coding style tutorial from angular2.. what is wrong is my code?

Below is my code in 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

I'll try to explain what's going wrong and what can we do to solve this.

#1 : '' route is being redirected to more than 1 routes . It creates an ambiguity, the Angular router fails to decide where to redirect to. I'll assume '' needs to redirect to '/jobs' .

#2 : A route definition with loadChildren shouldn't contain component property.

#3 : Misuse of FullLayoutComponent as a template. You can use AppComponent to be bootstrapped by the Angular app, use a router-outlet in app.component.html and have your template working.

Try to fix your file/dir structure and fix your module code explained as below.

file/dir structure:

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

And finally, you'll need to provide app.component.ts and app.component.html . Basically, copy the core from your FullLayoutComponent to update these files.

Make sure that you include <router-outlet></router-outlet> in your app.component.html . This outlet will be used by Angular router to render the contents of your JobComponent , JobfileComponent , JobcompletedComponent .

Hope the answer is helpful, happy Angular'ing ;)