RC5 Angular2 route default component

Question

I have existing PHP website, which I start adding angular2 component to.

I have added router script, to help load different component by its url.

When I navigate away from the component page, I get following error Error: Uncaught (in promise): Error: Cannot match any routes: 'dashboard'

I understand, that I need to create another component to make this error disappear. But I don't want to create another component, because there are so many pages, I would end up creating component for each page.

So I wanted to ask, how to make 1 default component, which will pickup if no component was available OR how can I just make this error disappear, so it does not trigger if it cant found any router or component for that path.

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {TestComponent} from "./test/test.component";


const appRoutes: Routes = [
    { path: 'search', component: TestComponent }
];


export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Madhu Ranjan · Accepted Answer · 2016-08-31 01:52:14Z

3

you may add a wildcard route which will redirect to a default component if route does not match.

 { path: 'default', component: DefaultComponent },
 { path: '**', redirectTo: '/default' }

So if the route does not match your default component will be loaded in the router outlet.

Hope this helps!!

answered Aug 31, 2016 at 1:52

Madhu Ranjan

18k7 gold badges65 silver badges70 bronze badges

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

Comments

zhimin · Accepted Answer · 2016-08-31 00:17:18Z

I use this as default route:

{ path: '', component: Home, text: 'Home' }

and this is my full routes:

export const routes: TextRoute[] = [
    { path: '', component: Home, text: 'Home' },
    { path: 'accordion', component: AccordionDemo, text: 'Accordion' },
    { path: 'alert', component: AlertDemo, text: 'Alert' },
    { path: 'buttons', component: ButtonsDemo, text: 'Buttons' },
    { path: 'carousel', component: CarouselDemo, text: 'Carousel' },
    { path: 'collapse', component: CollapseDemo, text: 'Collapse' },
    { path: 'dropdown', component: DropdownDemo, text: 'Dropdown' },
    { path: 'pagination', component: PaginationDemo, text: 'Pagination' },
    { path: 'popover', component: PopoverDemo, text: 'Popover' },
    { path: 'progressbar', component: ProgressbarDemo, text: 'Progressbar' },
    { path: 'rating', component: RatingDemo, text: 'Rating' }
];

export const AppRoutes = RouterModule.forRoot(routes, { useHash: true });

Check out my learning angular2 project at github, stars are welcome.

Mark Acosta · Accepted Answer · 2016-08-31 04:23:29Z

0

Im too new to comment, my question is if you are using express backend? app.use() might be able to save you some trouble. instead of declaring the routes try in app.js

var routes = require('routes');
app.use('/name-of-url', routes )

then in routes

    router.get('name-of-url', function(res,req,next){
     res.sendFile(path to php file to serve)
})

You may also need to change your express templating engine to php, not entirely sure.

answered Aug 31, 2016 at 4:23

Mark Acosta

3301 silver badge6 bronze badges

Collectives™ on Stack Overflow

RC5 Angular2 route default component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related