Подстановочный знак Angular 7 '**' с модулем отложенной загрузки и дочерними маршрутами не работает?

Question

Я пытаюсь создать маршрут по умолчанию, используя подстановочный знак '**' из маршрутизатора Angular.Этот маршрут по умолчанию загрузит ленивый модуль, а затем ему придется решать свои собственные маршруты.Проблема в том, что, когда у меня есть следующая конфигурация, она не разрешается должным образом:

export const routes = [
  {
    path: '',
    component: 'DashboardComponent'
  },
  {
    path: '**',
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [AppComponent]
  bootstrap: [AppComponent]
})
export class AppModule {}

---

const routes = [
  {
    path: '', 
    component: MainComponent
  }
  {
    path: 'hello',  // hoping to pick up the wildcard and resolve the route
    component: HelloComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    AnyComponent,
    EditComponent
  ]
})
export default class LazyModule {}

Например.С mydomain.com/hello он не показывает мне HelloComponent, он показывает мне MainComponent.

Что-то не так с моей конфигурацией или она не работает так?

Заранее спасибо.

Answer 1

Я считаю, что вы должны перенаправить на фактический маршрут. Есть несколько тем, связанных с этим, вот одна . Также для примеров Angular вам, возможно, придется экспортировать свой RouterModule из LazyModule.

Answer 2

Ленивые модули требуют двух конфигураций маршрутизации.Первый, который находится в appModule, указывает угол, когда загружать модуль.Второй, который находится в модуле отложенных функций, сообщает углу, когда отображать конкретный компонент.

В вашем случае измените путь маршрутизации appModule на hello.Это говорит угловому, чтобы загружать ленивый модуль, когда видит hello URL.Что касается второй конфигурации, оставьте ее пустой.Это указывает angular загружать компонент, когда он видит пустую строку, следующую за hello url

AppModule

export const routes = [
  {
    path: '',
    component: 'DashboardComponent'
  },
  {
    path: 'helllo', <-- change this
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

LazyModule

const routes = [
  {
    path: '', 
    component: LazyComponent // I do not know what this is. The components are not lazy. Modules are
  }
  {
    path: '',  <-- change this
    component: HelloComponent
  }
];

Я видел в вашем коде, что у вас есть LazyComponent .Я не знаю, что вы пытаетесь достичь с этим, но компоненты не ленивы.Модули есть.