page is showing twice in the browser using angular router?

Question

Angular was loading page on default port localhost:4200 i wanted it to serve as localhost:4200/specialtyquestions when app build and that is working but its showing pages twice in the browser , Any idea what is implemented wrong here ?

app-routing.module.ts

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


const routes: Routes = [{
  path: 'specialtyquestions',
  component: AppComponent
},
{
  path: '',
  redirectTo: 'specialtyquestions',
  pathMatch: 'full'
}];


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

app.component.html

<app-navbar></app-navbar>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-5">
            <app-create-questions></app-create-questions>
        </div>
        <div class="col-sm-1">
            <div class="row">
                <button type="button" class="btn btn-primary" data-backdrop='static' (click)="openModal()" style="margin-top: 300px;" data-toggle="modal" data-target="#exampleModalLong">Start Formatting</button>
            </div>
        </div>
        <div class="col-sm-5">
            <app-format-questions></app-format-questions>
        </div>
    </div>
</div>
<h2>
    <router-outlet></router-outlet>
</h2>

image

Can you paste the html also?

Gourav Garg
– Gourav Garg

2020-04-09 17:20:47 +00:00
Commented Apr 9, 2020 at 17:20 — Gourav Garg
– Gourav Garg, Commented Apr 9, 2020 at 17:20
@GouravGarg added html

hussain
– hussain

2020-04-09 17:25:41 +00:00
Commented Apr 9, 2020 at 17:25 — hussain
– hussain, Commented Apr 9, 2020 at 17:25
i guess i have to remove router-outlet in this case ?

hussain
– hussain

2020-04-09 17:28:10 +00:00
Commented Apr 9, 2020 at 17:28 — hussain
– hussain, Commented Apr 9, 2020 at 17:28
Yes you should, you don't need that.

Gourav Garg
– Gourav Garg

2020-04-09 17:29:29 +00:00
Commented Apr 9, 2020 at 17:29 — Gourav Garg
– Gourav Garg, Commented Apr 9, 2020 at 17:29

Kirtan · Accepted Answer · 2020-04-09 18:18:03Z

1

Remove Router-Outlet because when you Add that tag at the last it Run that part again. so remove that part from the end and Check

<app-navbar></app-navbar>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-5">
            <app-create-questions></app-create-questions>
        </div>
        <div class="col-sm-1">
            <div class="row">
                <button type="button" class="btn btn-primary" data-backdrop='static' (click)="openModal()" style="margin-top: 300px;" data-toggle="modal" data-target="#exampleModalLong">Start Formatting</button>
            </div>
        </div>
        <div class="col-sm-5">
            <app-format-questions></app-format-questions>
        </div>
    </div>
</div>

Router part is needed when you want to route from one page to another e.x. 127.0.0.1:4000/Student

answered Apr 9, 2020 at 18:18

Kirtan

1631 gold badge4 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hussain Over a year ago

if i add more pages which will have different route then i would need to add router outlet back in app.component.html and it will show appComponent pages twice again no ?

Kirtan Over a year ago

Then you have to modify your little bit of code the things which is prefix that only you can hold on app.component.ts and for other thing you can make another component

Collectives™ on Stack Overflow

page is showing twice in the browser using angular router?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related