CODEWITHSUNDEEP
angularangular5angular-routingangular-router
Kgn-web
Kgn-web

Reputation: 7555

Component not rendering in Angular5 routing

I have Angular5 application.This is how my app.module.ts looks like.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { BrandComponent } from './brand/brand.component';




const appRoutes: Routes = [

{
 path: 'brand',
 component: BrandComponent,
 data: { title: 'Brands' }
},
{
 path: '',
 component: AppComponent,
 pathMatch: 'full'
},];
@NgModule({
 declarations: [
 AppComponent,
 BrandComponent
],
imports: [
  BrowserModule,
  FormsModule,
  RouterModule.forRoot(
  appRoutes,

  {
    enableTracing: true,
    useHash: true
  } // <-- debugging purposes only
)
],
 providers: [],
 bootstrap: [AppComponent]
 })



 export class AppModule {}

My app.component.html looks as below.

<div style="text-align:center">
<h1>
  Welcome to {{ title }}!
</h1>
</div>

<nav>
 <a routerLink="" routerLinkActive="Home">Home</a>
 <a routerLink="/brand" routerLinkActive="active">Brand</a>
</nav>
<div>
      <router-outlet></router-outlet>
</div>

Issue - If I click on the brand link or any path, always the home-component is rendered.

No error in the console

Thanks.

Upvotes: 1

Views: 4365

Answers (2)

Skel
Skel

Reputation: 1667

This is how i have mine set up.

I have a file called app-routing.module.ts which looks like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ConfigComponent } from './pages/config/config.component';
import { AuthComponent } from './modules/auth/auth/auth.component';
import { AuthendComponent } from './modules/auth/authend/authend.component';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'config', component: ConfigComponent },
  { path: 'auth', component: AuthComponent },
  { path: 'authend', component: AuthendComponent }
];

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

Then inside of my app.module.ts i import that file like this

import { AppRoutingModule } from './app-routing.module';

so my app.module.ts look like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ConfigComponent } from './pages/config/config.component';
import { AuthModule } from './modules/auth/auth.module';
import { HomeComponent } from './pages/home/home.component';


@NgModule({
  declarations: [
    AppComponent,
    ConfigComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    AuthModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and the app.component.html looks like this: 

<router-outlet></router-outlet>

and for a link, you will want it to look like this:

<li routerLink="/config">Config</li>
<li routerLink="/auth">Auth</li>

Upvotes: 0

Krishna Rathore
Krishna Rathore

Reputation: 9687

you can try this solution

I have create a demo on stackblitz

app.module.ts

const routes: Routes = [
    { path: "", redirectTo: 'home', pathMatch: "full" },
    { path: "home", component: HomeComponent },
    { path: "brand", component: BrandComponent },
];

@NgModule({
    imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
    declarations: [AppComponent, HomeComponent, BrandComponent],
    bootstrap: [AppComponent]
})

app.component.html

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary" routerLink="/home">Home</button>
    <button type="button" class="btn btn-secondary" routerLink="/brand">Brand</button>
</div>


<router-outlet></router-outlet>

Upvotes: 1

Related Questions