Angular 6 routing

Question

I want to do a simple routing for error 404. If a link is corrupt, I want to redirect the user to page 404. My login page works fine, but I do not see where I'm wrong with the error page. This is my file structure. And this is error i get when try to load page. I you have some idea thi would be great!

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import 'hammerjs';

import { FuseModule } from '@fuse/fuse.module';
import { FuseSharedModule } from '@fuse/shared.module';

import { fuseConfig } from './fuse-config';

import { AppComponent } from './app.component';
import { FuseMainModule } from './main/main.module';
import { FuseSampleModule } from './main/content/sample/sample.module';
import { Login2Module } from './main/content/login-2/login-2.module';
import { Error404Module } from './main/content/errors/404/error404.module';

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: '/errors/404/error404',
  }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    TranslateModule.forRoot(),

    // Fuse Main and Shared modules
    FuseModule.forRoot(fuseConfig),
    FuseSharedModule,
    FuseMainModule,
    FuseSampleModule,
    Login2Module,
    Error404Module
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {
}

error.module.ts

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

import { MatIconModule } from '@angular/material';

import { FuseSharedModule } from '@fuse/shared.module';

import { FuseError404Component } from './error404.component';

const routes = [
  {
    path: 'error404',
    component: FuseError404Component
  }
];

@NgModule({
  declarations: [
    FuseError404Component
  ],
  imports: [
    RouterModule.forChild(routes),

    MatIconModule,

    FuseSharedModule
  ]
})
export class Error404Module {
}

score 1 · Accepted Answer · 2018-06-26 09:47:13Z

1

You are redirecting to '/errors/404/error404', but there's no such route.

You should either add a 404-component or redirect to an existing path.

Update based on your comment:

{
    path: '**',
    component: FuseError404Component,
}

edited Jun 26, 2018 at 9:47

answered Jun 26, 2018 at 9:39

user4521733

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

4 Comments

Nemanja Andric Over a year ago

I add FuseError404Component in my error404.module.ts

Pardeep Jain Over a year ago

@NemanjaAndric you need to add routing entrty for the same in app.module.ts too, like I added in my answer above

Nemanja Andric Over a year ago

Cannot match any routes. URL Segment: 'errors/404/error404'

user4521733 Over a year ago

@NemanjaAndric well, there is no such a route. Your route has the url segment 'error404'. Overall, your code is pretty confusing, the longer I look into it. Why do you have two 404 components?

Pardeep Jain · Accepted Answer · 2018-06-26 09:40:11Z

0

IMO you haven't declared any route using path /errors/404/error404

You need to add routing configuration for the same like this -

{
        path: '/errors/404/error404',
        loadChildren: 'app/not-found-component/not-found-component.module#NotFoundComponentModule'
      },

answered Jun 26, 2018 at 9:40

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Comments

Madhur Bhaiya · Accepted Answer · 2018-09-16 20:48:35Z

0

just change RouterModule.forChild(routes) to RouterModule.forRoot(routes).

edited Sep 16, 2018 at 20:48

Madhur Bhaiya

28.9k10 gold badges53 silver badges61 bronze badges

answered Sep 16, 2018 at 20:27

H Mirindra

944 bronze badges

Collectives™ on Stack Overflow

Angular 6 routing

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related