问题

I have an angular 15 app that is displaying a very strange behavior.

我有一个使用Angular 15的应用程序，出现了非常奇怪的行为。

I have a lazy loaded module with routes called records.
If I navigate to any route within this "records" module and then try to load any route outside that module, the last loaded component from the "records" module remains visible.

我有一个具有名为"records"的带有路由的懒加载模块。
如果我导航到"records"模块内的任何路由，然后尝试加载该模块之外的任何路由，"records"模块中上次加载的组件仍然可见。

Here is my routes definition:

以下是我的路由定义：

export const APP_ROUTES: Routes = [
{ path: 'home', pathMatch: 'full', component: HomeComponent },
{ path: 'login', pathMatch: 'full', redirectTo: '/user/login' },
{
path: 'user',
loadChildren: () =>
import('@t3/training-tracker-web/feature-user').then(
(m) => m.FEATURE_USER_ROUTES
),
},
{
path: 'records',
loadChildren: () =>
import('@t3/training-tracker-web/feature-personal-records').then(
(m) => m.PersonalRecordsRoutes
),
},
{ path: '', pathMatch: 'full', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent },
];

这是我的路由定义：

export const APP_ROUTES: 路由 = [
{ path: 'home', pathMatch: 'full', component: HomeComponent },
{ path: 'login', pathMatch: 'full', redirectTo: '/user/login' },
{
path: 'user',
loadChildren: () =>
import('@t3/training-tracker-web/feature-user').then(
(m) => m.FEATURE_USER_ROUTES
),
},
{
path: 'records',
loadChildren: () =>
import('@t3/training-tracker-web/feature-personal-records').then(
(m) => m.PersonalRecordsRoutes
),
},
{ path: '', pathMatch: 'full', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent },
];

here is the definition of my lazy module routes:

这是我的惰性加载模块路由的定义：

export const RecordsRoutes: Route[] = [
{ path: 'add-record', component: RecordsAddComponent },
{ path: 'record-list', component: RecordsListComponent },
{ path: 'record-detail', component: RecordsDetailComponent },
{ path: '', component: FeatureRecordsComponent },
];

这是我的惰性加载模块路由的定义：

export const RecordsRoutes: 路由[] = [
{ path: 'add-record', component: RecordsAddComponent },
{ path: 'record-list', component: RecordsListComponent },
{ path: 'record-detail', component: RecordsDetailComponent },
{ path: '', component: FeatureRecordsComponent },
];

I use routerlink directives in my components to navigate like this:

我在我的组件中使用routerlink指令进行导航，就像这样：

<button mat-menu-item [routerLink]="'/records'">All Records
<button mat-menu-item [routerLink]="'/records/add-record'">Add Record

我在我的组件中使用routerlink指令进行导航，就像这样：

<button mat-menu-item [routerLink]="'/records'">All Records
<button mat-menu-item [routerLink]="'/records/add-record'">Add Record

Here is the really weird thing. I have a toggle in my menu that triggers a change in the dom for light vs dark mode. It chnages a class on the body element. If I toggle the theme, the component that should not be visible disappears.
It is like something in the records module prevents a view update after navigating away.

这里真的很奇怪。我的菜单中有一个切换按钮，用于在亮色和暗色模式之间触发DOM的更改。它会在body元素上更改类。如果我切换主题，原本不应可见的组件会消失。
就好像"records"模块中的某些东西在导航后阻止了视图更新。

这里真的很奇怪。我的菜单中有一个切换按钮，用于在亮色和暗色模式之间触发DOM的更改。它会在body元素上更改类。如果我切换主题，原本不应可见的组件会消失。
就好像"records"模块中的某些东西在导航后阻止了视图更新。

Also, I have another lazy loaded module "users" that does not display this behavior. My problem is specific to the "records" module.

另外，我还有另一个懒加载模块"users"，它不显示这种行为。我的问题特定于"records"模块。

Also, I have another lazy loaded module "users" that does not display this behavior. My problem is specific to the "records" module.

另外，我还有另一个懒加载模块"users"，它不显示这种行为。我的问题特定于"records"模块。

EDIT 1

SO I was able to narrow down the issue. I am using NX libs for my lazy loaded route and I am using stand alone components. I have a shared UI module in another lib, and any component that imports this shared ui module gives the error I describe above, that is not being unloaded when routing away from that component.

编辑1

所以我能够缩小问题范围。我在懒加载路由中使用了NX库，同时我还在使用独立组件。我在另一个库中有一个共享的UI模块，任何导入此共享UI模块的组件都会出现我上面描述的错误，在从该组件导航离开后未被卸载。

所以我能够缩小问题范围。我在懒加载路由中使用了NX库，同时我还在使用独立组件。我在另一个库中有一个共享的UI模块，任何导入此共享UI模块的组件都会出现我上面描述的错误，在从该组件导航离开后未被卸载。

here is my shared module def:

以下是我的共享模块

export const APP_ROUTES: Routes = [
  { path: 'home', pathMatch: 'full', component: HomeComponent },
  { path: 'login', pathMatch: 'full', redirectTo: '/user/login' },
  {
    path: 'user',
    loadChildren: () =>
    import('@t3/training-tracker-web/feature-user').then(
      (m) => m.FEATURE_USER_ROUTES
      ),
  },
  {
    path: 'records',
    loadChildren: () =>
      import('@t3/training-tracker-web/feature-personal-records').then(
        (m) => m.PersonalRecordsRoutes
      ),
  },
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent },
];

export const RecordsRoutes: Route[] = [
  { path: 'add-record', component: RecordsAddComponent },
  { path: 'record-list', component: RecordsListComponent },
  { path: 'record-detail', component: RecordsDetailComponent },
  { path: '', component: FeatureRecordsComponent },
];

   <button mat-menu-item [routerLink]="'/records'">All Records</button>
   <button mat-menu-item [routerLink]="'/records/add-record'">Add Record</button>

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    ReactiveFormsModule,
    RouterLinkWithHref,
    HttpClientModule,
    AngularSvgIconModule.forRoot(),
  ],
  declarations: [PrimaryContentCardComponent, AppShellComponent],
  providers: [provideAnimations()],
  exports: [PrimaryContentCardComponent, MaterialModule, AppShellComponent],
})
export class SharedUiModule {}

<t3-app-shell
  [darkTheme]="darkTheme$ | async"
  class="app-content-wrapper"
  (signOutEvent)="signOutEvent()"
  (toggleThemeEvent)="toggleThemeEvent(false)"
>
  <router-outlet></router-outlet>
</t3-app-shell>

答案1

得分: 0

问题是在这个应用程序中混合了模块和独立组件。我正在尝试迁移到独立组件，首先从延迟加载的路由/组件开始。

问题是将sharedUI模块导入到所有的独立组件中。我删除了shared UI模块的导入，只导入了每个独立组件所需的特定内容。

一旦我这样做，路由就正常工作了。