Why are all routes redirecting to root ?

[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.

[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';

@Component({
    template: '<div>Customers Page</div>'
})
export class CustomersComponent {

    constructor(private breadcrumbService: BreadcrumbService) {
        this.breadcrumbService.setItems([
            { label: 'Customers' }
        ]);
    }

}

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

Code: Select all

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

@NgModule({
    imports: [
    //imports
    ],
    declarations: [
    //other components
        DocumentationComponent,
        [b]CustomersComponent[/b]
    ],
    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}
];