In my Angular 2 application, I am encountering an issue with routing to my line module. Currently, I have two submodules - login and line. The routing to the login submodule is working well. However, when I attempt to route to the line module with route params such as /line/param1/param2, it breaks the navigation flow.
Here is an overview of my root module:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LoginModule,
LineModule,
routing
],
providers: [appRoutingProviders],
bootstrap: [AppComponent]
})
export class AppModule { }
This is how my app.routes.ts file looks like:
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{ path: 'login', loadChildren: 'login/login.module', pathMatch: 'prefix'},
{ path: 'line', loadChildren:'line/line.module', pathMatch: 'prefix'}
];
export const appRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(appRoutes);
The LoginModule functions correctly with its child routes. However, issues arise when trying to navigate to the LineModule.
Here is my line.module.ts:
import { CommonModule } from '@angular/common';
import { MaterialModule } from '@angular/material';
import { LineComponent } from './line.component';
import { lineRouting } from './line.routes';
import { DataService } from './services/data/data.service';
@NgModule({
imports: [
CommonModule,
MaterialModule,
lineRouting
],
providers:[DataService],
declarations: [LineComponent]
})
export class LineModule { }
And the line.routes.ts file:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LineComponent } from './line.component';
const lineRoutes: Routes = [{
path: 'line',
component: LineComponent,
children: [
{ path: '/:dep/:id', component: LineComponent }
]
}];
export const lineRouting: ModuleWithProviders = RouterModule.forChild(lineRoutes);
When routing to http://localhost:4200/line, everything works fine although there is a service error due to undefined dep and id values. However, navigating to
http://localhost:4200/line/finance/line3EXCEPTION: Uncaught (in promise): Error: Cannot find module 'line/line.module'.
Error: Cannot find module 'line/line.module'
I have tried altering the path in app.routes.ts to line/:dep/:id, but the outcome remains the same. What could be causing this issue?