帶獨立組件的 Angular 14 中的庫路由

Question

我在庫的上下文中使用 Angular 14 及其新的獨立組件功能。 我如何在組件中使用 RouterModule.forChild() 作為 Angular 不會讓我這樣做？

...
projects/
  my-lib/
    src/lib
      root.component.ts
  my-app/
...

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  standalone: true,
  imports: [CommonModule, RouterModule.forChild([])],
  selector: 'my-lib-root',
  template: ` <router-outlet></router-outlet>`,
})
export class RootComponent {}

得到錯誤

'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

但是當我使用一個庫時，我在這個上下文中沒有任何“應用程序引導程序”。

Answer 1

只需刪除 .forChild([])。 您不希望在組件級別出現“ModuleWithProviders”。

Answer 2

如果我沒記錯的話，從 14.2 版開始

您可以像這樣使用路由：

export const TEST_ROUTES: Routes = [
  {
    path: '',
    redirectTo: 'test1',
    pathMatch: 'full',
  },
  {
    path: '',
    component: TestComponent,
    children: [
      {
        path: 'test1',
        loadComponent: () =>
          import('../test1/test1.component').then((m) => m.Test1Component),
      },
    ],
  },
];

然后

export const APP_ROUTES: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'test',
  },
  {
    path: 'test',
    loadChildren: () =>
      import('./app/test/test.routes').then((m) => m.TEST_ROUTES),
  },
];