Page 1 of 1

Why are all routes redirecting to root ?

Posted: 01 Jan 2019, 16:21
by manishbjain
I have created different components and set the route for them in the routes.

For eg this one -
{path: 'customers', component: CustListComponent},

But its not working, the app renders the component if I change the <router-outlet></router-outlet> to <app-cust-list></app-cust-list> . But with the <router-outlet></router-outlet> , when I run the app and go to localhost:4200/customers - it does not render the customer component and falls back the DashboardDemoComponent which is set as the default component for the empty path . Whats wrong ? I have spent hella lot of time finding a solution for this and nothing seems working.

I am really short of time and I am unable to proceed building the app without the solution for this. Plz help ASAP.

Re: Why are all routes redirecting to root ?

Posted: 07 Jan 2019, 14:13
by merve7
We tried and didn't see any problem.

Please, could you check your steps?
1. create customers.component.ts file -I create for the only example you can add html file or style file- ;

Code: Select all

import {Component} from '@angular/core';
import {BreadcrumbService} from '../../breadcrumb.service';

    template: '<div>Customers Page</div>'
export class CustomersComponent {

    constructor(private breadcrumbService: BreadcrumbService) {
            { label: 'Customers' }

2. add created component in app.module.component.ts

Code: Select all

//other imports
import {CustomersComponent} from './demo/view/customers.component';

    imports: [
    declarations: [
    //other components
    providers: [
        {provide: LocationStrategy, useClass: HashLocationStrategy},
        CarService, CountryService, EventService, NodeService, BreadcrumbService
    bootstrap: [AppComponent]
export class AppModule { }
3.add app.routes.ts

Code: Select all

//other imports
import {CustomersComponent} from './demo/view/customers.component';

export const routes: Routes = [
    {path: '', component: DashboardDemoComponent},
    //other components
    {path: 'customers', component: CustomersComponent}