CODEWITHSUNDEEP
angularangular-ui-router
Kevin Fallas Alvarado
Kevin Fallas Alvarado

Reputation: 53

Duplicate routes in Angular

I’m trying to make navegation routes. What I want is to access a view create only with:

http://localhost:3000/template/create

What I do works fine, but I realized that also this link

http://localhost:3000/create

allow me to navegate to create view.

I have a app-routing.module which connects the routes

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormComponent } from "./form/form.component";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'form', component: FormComponent },
  { path: 'templates', loadChildren: () => import('./template-builder/template-builder.module').then(m => m.TemplateModule) }

];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Then in the import of template-builder for the routes I have a template-builder.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CreateComponent } from './create/create.component';
import { TemplateComponent } from './template/template.component';

const routes: Routes = [
  { path: 'create', component: CreateComponent},
  { path: '', component: TemplateComponent},
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
  ],
  exports: [RouterModule]
})
export class TemplateRoutingModule { }

In the template.componet.ts i have

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.css']
})
export class TemplateComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

And the create.component.ts

import { TemplateBuilderService } from '../template-builder.service';

@Component({
  selector: 'app-template-builder',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Upvotes: 1

Views: 1286

Answers (1)

Malith
Malith

Reputation: 571

Change the template-builder.routing.module.ts like this

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CreateComponent } from './create/create.component';
import { TemplateComponent } from './template/template.component';

const routes: Routes = [  
  {
        path: '',
        component: TemplateComponent,
        children: [
            {
                path: 'create',
                component: CreateComponent
            },
        ]
   }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
  ],
  exports: [RouterModule]
})
export class TemplateRoutingModule { }

Upvotes: 2

Related Questions