route URL is not found in angular

0
votes

I have configure routes like below in home-routing.module.ts

export const HomeRoutingModule: Routes = [
  {
    path:'',
    children:[
      {
        path:'',
        component:FirstComponent,
        data:
        {
          title: "first",
          urls: [{ title: "first component", url: "first" }]
        }
      },
      {
        path:'',
        component:SecondComponent,
        data:
        {
          title: 'second',
          urls: [{ title: "second component", url: "second" }]
        }
      }]

and my my home.module.ts is like bolow

imports: [
  CommonModule,
  HomeRoutingModule,
  RouterModule.forChild(HomeRoutingModule)
],
declarations: [FirstComponent, SecondComponent, ThirdComponent]

and my app-AppRoutingModule.module.ts is like below

export const routes: Routes = [
  { path: "first", component: FirstComponent },
  {
      path: "",
      children: [
        { path: "", redirectTo: "/first", pathMatch: "full" },
        { path: "first", loadChildren: "./home/home.module#HomeModule" },
      ]
    }]

and my application.module.ts is like below

@NgModule({
      declarations: [
        AppComponent,
        FirstComponent,
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],

route first is working but where as i try to open second route url it is not working but it showing error is like below

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'second' Error: Cannot match any routes. URL Segment: 'second'

4
angulartypescriptroutes
what is the url you are trying ? you know you didn't set the path in your route ? – Alann
You want to lazy load your homeModule then why you are accessing FirstComponent from app-AppRoutingModule.module.ts – Surjeet Bhadauriya
yeas I need lazy loadind – change need

4 Answers

2
votes

I have created the demo for you. Here you can find how to implement lazy loading.

I have created two different Module File hence the routing file as well. One is AppModule(app.module.ts) and second is HomeModule(home.module.ts).

The HomeModule is lazy loaded in the example.

In the app.routing.ts, you can find root level routing. And in home.routing.ts, you can find FirstComponent and SecondComponent routing.

The example is same as your one.

Stackblitz Link: https://stackblitz.com/edit/angular-crbx3f

0
votes

You need to specify your path.

export const HomeRoutingModule: Routes = [
  {
    path:'',
    children:[
      {
        path:'first',
        component:FirstComponent,
        data:
        {
          title: "first",
          urls: [{ title: "first component", url: "first" }]
        }
      },
      {
        path:'second',
        component:SecondComponent,
        data:
        {
          title: 'second',
          urls: [{ title: "second component", url: "second" }]
        }
      }]
0
votes

In app-AppRoutingModule.module.ts second child route isn't defined. You should add 

{ path: "second", loadChildren: "./home/home.module#HomeModule" }

And also you're paths are empty in children array

0
votes

Really confusing what you're trying to do but I guess you want:

{ path: "home", loadChildren: "./home/home.module#HomeModule" }

And then you want to navigate to home/first or home/second.

The way you have it now you'd have a route that's first/first which is kinda weird.