nrwl nx - Triggered routes inside Angular Library concatenates onto previous route causing NG04002 error - Stack Overflow

admin管理员组

文章数量:1287668

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/view01ponent';
import { View02Component } from './views/view02/view02ponent';
import { View03Component } from './views/view03/view03ponent';

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/screen02ponent';
import { Test02RoutingModuleModule } from './test02-routing-module.module';
import { View01Component } from './views/view01/view01ponent';
import { View02Component } from './views/view02/view02ponent';
import { View03Component } from './views/view03/view03ponent';

@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 - screen02ponent.html

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

test02 library - view01ponent.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/screen02ponent';
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 - appponent.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?

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/view01ponent';
import { View02Component } from './views/view02/view02ponent';
import { View03Component } from './views/view03/view03ponent';

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/screen02ponent';
import { Test02RoutingModuleModule } from './test02-routing-module.module';
import { View01Component } from './views/view01/view01ponent';
import { View02Component } from './views/view02/view02ponent';
import { View03Component } from './views/view03/view03ponent';

@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 - screen02ponent.html

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

test02 library - view01ponent.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/screen02ponent';
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 - appponent.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?

• angular
• nrwl-nx

Share Improve this question Follow asked Feb 23 at 8:02 OptiqOptiq 3,23255 gold badges4040 silver badges7979 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

it seems your issue is not related neither to microfrontends nor to standalone components. it is just how routerLink works.

In your place I would create a token for a library root

// using class as a token just for ease of use. it could be token instead
export class LibraryRootRoute extends ActivatedRoute {}

function useCurrentRouteAsLibRootRoute() {
  return {
    provide: LibraryRootRoute,
    useExisting: ActivatedRoute,
  }
}

// mfe1 root (can be ngModule or root standalone component)
provide: [useCurrentRouteAsLibRootRoute()]

// view01.ts
libRootRoute = inject(LibraryRootRoute);
// view01.html
<p>view01 works!</p>
<a routerLink="view02" [relativeTo]="libRootRoute">view02</a>

本文标签：