Trouble Implementing Angular Routing

The route `/contract/2` is matched because it starts with a forward slash, which is true for every route. It then tries to find child routes but cannot, since there are none. However, there are more children routes, and the complete URL should include them. One thing to note is the default route of the `contract` path, which is `{ path: ” }`.


Question:

Within my

AppModule

, the subsequent code is present (eliminating extraneous code):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { CompanyModule } from './main/content/company/company.module';
import { CustomersModule } from './main/content/company/customers/customers.module';
const appRoutes: Routes = [
  {
    path        : 'company',
    loadChildren: './main/content/company/company.module#CompanyModule'
  },
  {
    path        : '**',
    redirectTo  : 'company/dashboards/default'
  }
];
@NgModule({
    declarations: [
        AppComponent
    ],
    imports     : [
        RouterModule.forRoot(appRoutes, { enableTracing: true }),
    ],
    bootstrap   : [
        AppComponent,
        CompanyModule,
        CustomersModule
    ]
})
export class AppModule
{
}

Then I have

CompanyModule

:

const routes = [
    {
        path        : 'products',
        loadChildren: './products/products.module#ProductsModule'
    },
    {
        path        : 'customers',
        loadChildren: './customers/customers.module#CustomersModule'
    },
];
@NgModule({
    imports     : [
        FuseSharedModule,
        RouterModule.forChild(routes)
    ],
    declarations: []
})
export class CompanyModule
{
}

The following code,

CustomersModule

, is presented here. Please note that

ProductsModule

, which bears similarity to

CustomersModule

, is not included in this presentation.

const routes = [
    {
        path        : 'dashboard',
        loadChildren: './dashboard/dashboard.module#CustomersDashboardModule'
    },
    {
        path        : 'customer',
        loadChildren: './customer/customerdetail.module#CustomerDetailModule'
    },
];
@NgModule({
    imports     : [
        RouterModule.forChild(routes)
    ],
    declarations: []
})
export class CustomersModule
{
}

Upon launching the app, I encounter the component labeled as

CompanyModule

. There is a button that is intended to direct me to ‘CustomersModule’. Upon clicking the button, the

path

alters, but the resulting page is blank.

The event’s code for

(click)

is as follows:

gotoCustomersDashboard()
{
    this.router.navigate(['company/customers/dashboard']);
}

The

CustomerDetailComponent

:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomerDetailService } from './customer.service';
import { CustomerDetailComponent } from './customer.component';
const routes: Routes = [
    {
        path     : 'customer',
        component: CustomerDetailComponent,
        resolve  : {
            service: CustomerDetailService
        }
    }
];
@NgModule({
    declarations: [
        CustomerDetailComponent
    ],
    imports     : [
        RouterModule.forChild(routes),
    ],
    providers   : [
        CustomerDetailService
    ]
})
export class CustomerDetailModule
{

According to
router tracing
, the
Router Event ‘NavigationEnded
‘s status indicates no issues, and there are no additional errors.

Is there anything lacking in the routing configuration mentioned above?


Solution:

Upon clicking the button, give this a shot:

this.router.navigate(['company/customers/customer/customer']);

Frequently Asked Questions