CODEWITHSUNDEEP
javascriptangulartypescript
Mohammad Rehan Abdul Kadir
Mohammad Rehan Abdul Kadir

Reputation: 157

Angular routing/navigation not working properly: Appending instead of replacing component

This question has been asked before, but none of the answers seems to help me. I can't route to different pages on angular, instead, it just appends at the end of my homepage the HTML of the desired component. Here is my code:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToggleFullscreenDirectiveDirective } from './toggle-fullscreen-directive.directive';
import { HttpClientModule } from '@angular/common/http';
import { AnnouncementsComponent } from './announcements/announcements.component';
import { AdminComponent } from './admin/admin.component';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';




    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ToggleFullscreenDirectiveDirective } from './toggle-fullscreen-directive.directive';
import { HttpClientModule } from '@angular/common/http';
import { AnnouncementsComponent } from './announcements/announcements.component';
import { AdminComponent } from './admin/admin.component';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';



@NgModule({
  declarations: [
    AppComponent,
    ToggleFullscreenDirectiveDirective,
    AnnouncementsComponent,
    AdminComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot([
      { path: '', component: AppComponent },
      { path: 'admin', component: AdminComponent }

    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})





export class AppModule { }

app.component.html

...My custom html
<router-outlet></router-outlet>

index.html

 <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular Bootstrap Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <app-root>Loading...</app-root>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

Based on other answers the problem might be with imports, I tried to remove some that I used on the code, like the toggle fullscreen, another possibility is that there might be a console error which I checked and there is no problem. can anyone help me? I am lost!

Thanks

Upvotes: 7

Views: 7146

Answers (2)

Malindu Sandaruwan
Malindu Sandaruwan

Reputation: 1517

App.component is rendered and it's the container for all other components. So don't include it in routing,

So what you have to do is copy your code from App.component and add that code to a new component (called home.component)

Then configure routing as follows.

RouterModule.forRoot([
  { path: '', component: HomeComponent},
  { path: 'admin', component: AdminComponent }

])

app.component.html

<router-outlet></router-outlet>

home.component.html

...My custom html

Upvotes: 9

Adrian Lemes Caetano
Adrian Lemes Caetano

Reputation: 316

Based on your routes, try to change your routerModule to: 

RouterModule.forRoot([
      { path: '', redirectTo: '/admin', pathMatch: 'full' },
      { path: 'admin', component: AdminComponent }
    ])

By the way, when you create a forRoot router, Angular looks for a <router-outlet> selector in your bootstrap component from your application (app.component.html usually). There's no need to specify your app.component with forRoot configuration!

Upvotes: 3

Related Questions