Блог

Главная - Вопросы по программированию - Угловая маршрутизация 12 не работает при ленивой загрузке модулей

Угловая маршрутизация 12 не работает при ленивой загрузке модулей

#angular #routes #lazy-loading #angular12

Вопрос:

У меня очень странная проблема с маршрутизацией и ленивыми загруженными модулями. Я прочитал несколько различных статей и руководств по ленивой загрузке и маршрутизации, но не смог решить эту проблему. Короче говоря, я лениво загружаю несколько модулей, однако, когда я пытаюсь использовать метод навигации по маршрутизатору (), я вижу обновление адресной строки с правильным URL-адресом, но сама страница не перемещается. Если затем я обновлю страницу с обновленной адресной строкой, я попаду на страницу, на которую должен был изначально перейти. Я подтвердил, что аспект ленивой загрузки работает так, как ожидалось, поскольку я вижу, как загружаются фрагменты, когда я выбираю соответствующий маршрут. Я также проверил, что если вместо использования ленивой загрузки я загружу соответствующий компонент заранее, маршрутизация будет работать без каких-либо проблем.

приложение.модуль

 @NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    SharedModule,
    AppRoutingModule,
  ],
  providers: [
    LoginService,
    LocalStorageService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CustomHttpInterceptor,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

маршрутизация приложений

 const routes: Routes = [
  {
    path: 'login',
    loadChildren: () =>
      import('./login/login.module').then((c) => c.LoginModule),
  },
  {
    path: 'employer',
    canActivate: [UserGuard],
    loadChildren: () =>
      import('./employer/employer.module').then((c) => c.EmployerModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

работодатель-модуль

 @NgModule({
  declarations: [EmployerComponent, EmployersComponent],
  imports: [CommonModule, SharedModule, EmployerRoutingModule],
})
export class EmployerModule {}

работодатель.маршрут

 const routes: Routes = [
  {
    path: '',
    component: EmployersComponent,
  },
  {
    path: 'detail/:id',
    component: EmployerComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class EmployerRoutingModule {}

Комментарии:

1. Сначала попробуйте с <li><li><маршрутная ссылка=»/работодатель»>На работодателя<маршрутная ссылка=»/работодатель»></a></a></li> в вашем app.component.html. У вас есть вторая <розетка маршрутизатора> для дочерних страниц?. Модуль входа в систему работает нормально?

2. Ты пользуешься ionic ?

3. У меня только одна розетка маршрутизатора.

4. Но у меня есть другое приложение, использующее аналогичную архитектуру, в котором также есть только одна розетка маршрутизатора.

5. Я не использую ионный

Ответ №1:

Я, наконец, нашел свою проблему, которая мешала моей маршрутизации. Внутри моего общего модуля.я вызывал AppRoutingModule, который каким-то образом дублировал все маршруты и все нарушал. Маршрутизация теперь работает так, как ожидалось.

Метки: