Triggering routes inside Angular Library concatenates onto previous path causing NG04002 error

I'm using Angular libraries in a NX repo to make MFEs I want to build into larger "host" apps. I had a bit of a journey figuring out how to add routing to my libraries as there's no app.config.ts file in an Angular standalone library so I had to go back to using an old fashioned NgModule by using the --standalone=false flag when generating the library.

I got everything to work however my routes are acting a little weird. When I type the route I want to navigate to into the address bar everything works as I expect it to, however when I click a link inside of the library I get an error telling me the route isn't recognized showing me the path it searched for which included the current route which is throwing everything off. So for example I will be at this route

localhost:4200/test02/view01
​

Inside of view01 is a routerLink that routes to view02 which in the address bar is

localhost:4200/test02/view02
​

but the router attempts to navigate to

localhost:4200/test02/view01/view02
​

which of course doesn't exist so the error is thrown. I have no idea what could be causing this to happen or where to even start looking. The way I have everything setup goes as follows

test02 library - routing-module.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { View01Component } from './views/view01/view01.component';
import { View02Component } from './views/view02/view02.component';
import { View03Component } from './views/view03/view03.component';

const ROUTES: Routes = [
{
path: 'view01',
component: View01Component
},
{
path: 'view02',
component: View02Component
},
{
path: 'view03',
component: View03Component
},
{
path: '',
redirectTo: 'view01',
pathMatch: 'full'
}
]



@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forChild(ROUTES)
],
exports: [
RouterModule
]
})
export class Test02RoutingModuleModule { }


test02 library - test02.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Screen02Component } from './screen02/screen02.component';
import { Test02RoutingModuleModule } from './test02-routing-module.module';
import { View01Component } from './views/view01/view01.component';
import { View02Component } from './views/view02/view02.component';
import { View03Component } from './views/view03/view03.component';

@NgModule({
imports: [
CommonModule,
View01Component,
View02Component,
View03Component,
Test02RoutingModuleModule

],
declarations: [
Screen02Component,
],
exports: [
Screen02Component,
View01Component, // I left the "view" components as standalone
View02Component,
View03Component,
Test02RoutingModuleModule
],
bootstrap: [Screen02Component]
})
export class Test02Module {}



test02 library - screen02.component.html

<p>screen02 works!</p>
<router-outlet></router-outlet>


test02 library - view01.component.html

<p>view01 works!</p>
<a routerLink="view02">view02</a>


main app - app.routing.ts

import { Route } from '@angular/router';
import { Screen02Component } from 'libs/apps/test02/src/lib/screen02/screen02.component';
import { ROUTES } from 'libs/apps/test02/src/lib/test02-routing-module.module';


export const appRoutes: Route[] = [
{
path: '',
redirectTo: 'test02',
pathMatch: 'full'
},
{
component: Screen02Component,
children: [...ROUTES]
}
];


main app - app.component.html

<p>my app works</p>
<router-outlet></router-outlet>


I was initially lazy loading the library and routes and decided to switch strategies to see if that would have any impact which it didn't. Does anybody know why this is happening?

Continue reading...