CODEWITHSUNDEEP
angular
lak
lak

Reputation: 534

Cannot match any routes. URL Segment:

I'm new in angular and trying to configure routes, however I get this error:

Error: Cannot match any routes. URL Segment: 'news'

This is my app-routing-module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import{ RouterModule, Routes} from'@angular/router';
import{ myRoutes } from'./routes';

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

My routes file:

import{ Routes} from '@angular/router';
import { HomepageComponent } from '../homepage/homepage.component';
import { NewsComponent } from '../news/news.component';

export const myRoutes: Routes= [
    { path: 'homepage', component: HomepageComponent},
    { path: 'news', component: NewsComponent},
    { path: '', redirectTo: '/homepage', pathMatch: 'full' }
    ];

My app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { HomepageComponent } from './homepage/homepage.component';
import { NewsComponent } from './news/news.component';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomepageComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFontAwesomeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And finally, my app.component.html file:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

I got the same error when I try to reach homepage view.

Upvotes: 0

Views: 1920

Answers (1)

Johan Rin
Johan Rin

Reputation: 1950

Can you try to put your routes on the file app-routing-module?

Find here a little stackblitz :

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

import { NewsComponent } from './news/news.component';
import { HomepageComponent } from './homepage/homepage.component';

const routes: Routes = [
  { path: 'homepage', component: HomepageComponent},
  { path: 'news', component: NewsComponent},
  { path: '', redirectTo: '/homepage', pathMatch: 'full' }
];

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

Upvotes: 1

Related Questions