CODEWITHSUNDEEP
javascriptangulartypescriptwebpackangular2-routing
georgej
georgej

Reputation: 3311

Angular 2 - Fallback route not working

I have an Angular2 project built with this Angular 2 Webpack Starter but I cannot get the fallback route to work correctly. In my app.routes.ts I have: 

import { Routes } from '@angular/router';
import { HomeComponent } from './home';
import { DataResolver } from './app.resolver';

export const ROUTES: Routes = [
  {
     path: '',
     component: HomeComponent
  },
  {
     path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
  },

  ...
  {
     path: 'notfound', loadChildren: './notfound#NotFoundModule'
  },
  {
     path: '**', loadChildren: './notfound#NotFoundModule'
  },
];

The not found path above works correctly but the fallback route (**) does not work correctly. Instead of showing the NotFoundModule it does not load a module at all and I get no errors. However, when I do this it redirects correctly: 

  ...
  {
     path: 'notfound', loadChildren: './notfound#NotFoundModule'
  },
  {
    path: '**', redirectTo:'/notfound', pathMatch: 'full'
  },
];

I do not want to redirect though because I do not want to change the url to /notfound by redirecting. How can I make my top version work or what else can I do to make this work?

Upvotes: 1

Views: 741

Answers (1)

YounesM
YounesM

Reputation: 2317

So, I just tried it and it seems that you cannot use lazy routes to set your fallback page. This should work :

export const ROUTES: Routes = [
  {
     path: '',
     component: HomeComponent
  },
  {
     path: 'getstarted', loadChildren: './getstarted#GetStartedModule'
  },

  ...
  {
     path: 'notfound', loadChildren: './notfound#NotFoundModule'
  },
  {
     path: '**', component : NotFoundComponent
  },
];

Upvotes: 3

Related Questions