Rout is not loading the component

Issue

I am trying to navigate between social media and company , but when I hit company it’s component is loading but when i am hitting social media I am getting error

error I am getting –
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘social-media’
Error: Cannot match any routes. URL Segment: ‘social-media’

I am putting detail of code below

app-routing.module.ts file

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes } from '@angular/router';
import { D7socialMediaComponent } from './d7social-media/d7social-media.component';
import { CompanyComponent } from './company/company.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }
export const routes: Routes = [

  {path: 'social-media' , component: D7socialMediaComponent},
   {path: 'company' , component: CompanyComponent},

];

app.component.html

 <nav>
    <a routerLink="/social-media"> Social Media </a>
    <a routerLink="/company"> Company </a>
    </nav>

    <router-outlet></router-outlet>

d7social-media.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-d7social-media',
  templateUrl: './d7social-media.component.html',
  styleUrls: ['./d7social-media.component.css']
})
export class D7socialMediaComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Solution

in your app-routing.module add:

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

    imports: [
            CommonModule,
            RouterModule.forRoot(routes),
    ]

change your app module to:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { D7socialMediaComponent } from './d7social-media/d7social-media.component';
import { CompanyComponent } from './company/company.component';

export const routes: Routes = [

  {path: 'social-media' , component: D7socialMediaComponent},
  {path: 'company' , component: CompanyComponent},

];

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

Answered By – Fateme Fazli

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.