My current project is using Angular 2 Webpack Starter but I am having trouble with the fallback route. In my app.routes.ts file, I have defined the routes as follows:
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 is working fine, but the fallback route (**) is not behaving correctly. Instead of loading the NotFoundModule, it does not load any module and no errors are shown. However, if I change it to redirect like this, it works as expected:
...
{
path: 'notfound', loadChildren: './notfound#NotFoundModule'
},
{
path: '**', redirectTo:'/notfound', pathMatch: 'full'
},
];
I do not want to use redirection because I do not want to alter the URL to /notfound. How can I get the original setup to work or what other options do I have to resolve this issue?