CODEWITHSUNDEEP
angulartypescriptroutes
change need
change need

Reputation: 157

route URL is not found in angular

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'

Upvotes: 0

Views: 1567

Answers (4)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

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

Upvotes: 2

Chrillewoodz
Chrillewoodz

Reputation: 28318

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.

Upvotes: 0

Slobodan Gajić
Slobodan Gajić

Reputation: 162

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

Upvotes: 0

Peter Kim
Peter Kim

Reputation: 1977

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" }]
        }
      }]

Upvotes: 0

Related Questions